THE PROBLEM:
Can I save a new jqGrid Row successfully added with 'addRowData' on jqGrid client side to the server side collection with one line 'saveRow' method call?
This is sort of a different version of a similar thread:
How to perform action in jqGrid after adding new row
Although In my case it seems little different:
EXISTING:
I have a grid that talks to .ashx handler for insert update delete and reading.
(this works fine with inline editing etc.)
NEW FUNCTIONALITY:
I have just added Paste Button that pastes an array of text and converts it to rows:
long story short in the end two following lines of code finally add my split Data, row by row to my jqGrid:
var gridRow = { Id: rowId, Surname: rowSurname, DateOfBirth: rowDateOfBirth, Salary: rowSalary, Postcode: rowPostcode };
jQuery("#list").addRowData(rowId, gridRow); //(**)
(as you see I KNOW my rowId, which I calculate searching through the existing data)
THE CATCH:
Above code adds new row on UI only and I wanted it to get it added to Server collection as well.
FAULTY:
After the line (**) I wanted to add it to server collection - simply using brand new call with saveRow passing URL. YET NOTHING HAPPENS
This is one variation of what I have already tried:
$("#list").jqGrid('saveRow', rowId, { //same rowId value used in 'addRowData' method above
succesfunc: function (response) {
return true;
},
url: "jqHandler.ashx",
mtype: "POST",
extraparam: gridRow // gridRow used in 'addRowData' method above
});
BOTTOM LINE:
Can I save a new jqGrid Row successfully added with 'addRowData' on jqGrid client side to the server side collection with one line 'saveRow' method call?
I would really appreciate some guidance.
Best Regards,
Chris
Sorted it out, may help someone, as it's simplistic:
All you need is to "Edit the row" so we just needed to add a Edit function call in the most simplistic way.
So the whole thing looks like this:
var gridRow = { Id: rowId, Surname: rowSurname, DateOfBirth: rowDateOfBirth, Salary: rowSalary, Postcode: rowPostcode };
jQuery("#list").addRowData(rowId, gridRow);
jQuery("#list").addRowData(rowId, gridRow);
jQuery("#list").jqGrid('editRow', rowId, { keys: true });
$("#list").jqGrid('saveRow', rowId, { //same rowId value used in 'addRowData' method above
succesfunc: function (response) {
return true;
},
url: "jqHandler.ashx",
mtype: "POST",
extraparam: gridRow // gridRow used in 'addRowData' method above
});
You may adjust so it uses same way of calling jQuery or jqGrid API. but it works...
Cheers
Related
After using table.destroy() method my table rows are still displayed, only the search box and other borders of datatable are not displayed.
I want to delete all the rows in the datatable, basically i want to delete the whole datatable so that i can reinitialize it.
Thank you
When you use the destroy() method you are effectively returning the table back to its original state. The HTML for the table is still present on the page hence why you can still see the table rows, without the added DataTables functionality.
If you want to remove the data rows from your DataTable, you may want to look at the clear() method, for example:
table.clear();
I have set up a jsfiddle which demonstrates these options.
If you can provide your code I should be able to give you a more accurate answer.
In case someone else finds this thread, I had the same issue when trying to replace a datatable with an ajax call. Calling destroy and then reinitializing the datatable after the ajax response worked for me with no errors. documentation
$('#myTrigger').click(function(e){
e.preventDefault();
table.destroy();
$.ajax({
type: 'post',
url: 'processor.php',
data: $('#myform').serialize(),
success: function (response) {
var table = $('#myTable').DataTable({
"pageLength": 25
});
}
});
});
On the website I have two partial views rendering 2 tables,one on the left and one right. On the left hand table I have an Action-Link to call an ajax function which will render and replace the table on the right hand side.
Now here is the question:
The table is being replaced on the right. How can I revert to the original table on a button click ?. I do not want to use database queries to achieve this but rather find a better way.
Thank you for your time, I would appreciate if anyone could help me answer this.
Here is the ajax code used:
#section scripts
{
<script>
function productVersionCustomers(id) {
$.ajax({
url: '#Url.Action("GetCustomersFromVersionID")',
data: { id: id },
success: function (data) {
$('#versionCustomers').html(data);`enter code here`
TableManaged.init();
}
});enter code here
};
</script>
}
Can someone please help me i want to update a database record by using the dropdownlistbox,
so when i select an option from the dropdown the database is updated with that value for that record, without having to click a submit button using codeigniter.
I know the best way to go about this is with AJAX
Yeah AJAX can make it work, and doing it with jQuery can make it a lot easier. You can add an event listener to your dropdown list, listening to a change in its value:
$("#the-dropdown-list").change(function() {
var value = $(this).attr("value");
$.ajax({
url: "path/to/controller/action/",
type: "POST",
data: {value: value},
success: function() {
// whatever you want to do after
}
});
});
This will detect a change in the dropdown list value, and then send it to the controller action given in url in $.ajax object. After that you can just update the database record like you would usually do. In the controller, the new value can be obtained using $_POST['value'], since we defined type to be POST and the different values to be passed to controller action are in the data.
I need to display a number of "dynamic" grids using jqGrid. By dynamic I mean that both definition and data of the grid are retrieved from a database. There are many grids on the page, so I am trying to minimize the number of server trips, and there is a lot of data, so server-side paging is a must.
My workflow is
On initialization of each grid, retrieve grid definition and first
page of data in one server call.
If a user sorts/pages, then retrieve a page of data from the server
Because I want to retrieve the grid definition and first page of data in one call, I cannot use datatype: 'json', url: '###' approach; instead I do:
grid.jqGrid({
mtype: 'post',
...
datatype: function (postdata) {
if (!init.data) {
var request = {
screenId: settings.screenId,
pageNumber: postdata.page,
pageSize: postdata.rows,
sortColumn: postdata.sidx,
sortDirection: postdata.sortd,
date: settings.date
};
site.callWs("/MyService", request, function (pageResponse) {
//WHAT TO CALL HERE TO SET A PAGE OF DATA?
});
} else {
//WHAT TO CALL HERE TO SET A PAGE OF DATA?
init.data = null;
}
}
});
My data object (pageResponse or init.data) looks like this
I am not sure what method to call on jqGrid once a page of data is returned. I considered addJSONData, but it seems so inefficient to convert JSON back to string, then use EVAL(). Also, considered addRowData or setting the data property, but I am confused how to instruct jqGrid that I am doing server-side paging -- if I set the data property to one page of records, what do I need to do to tell jqGrid that there is a total of 50 records and this is page 1 out of 10.
Thanks for your help.
It was a user error (mine :). I had some show/hide logic in loadComplete of jqGrid, but this event does not fire when addJSONData is called.
addJSONData works just fine when provided with a properly-structured JavaScript object.
I am using the jQuery plugin chosen (by Harvest). It is working fine on (document).ready, but I have a button that, when clicked, uses ajax to dynamically create more select objects that I want to use the "chosen" feature. However, only the original select elements have the "chosen" features, and the new (dynamically created) do not work. I am using jQuery.get to append the new elements. Here is a sample of the code:
jQuery(".select").chosen();//this one loads correctly
jQuery("#add-stage").click(function() {
jQuery.get('/myurl',{},function(response) {
//response contains html with 2 more select elements with 'select' class
jQuery('#stages').append(response);
jQuery(".select").chosen();//this one doesn't seem to do anything :-(
});
});
I was thinking that I need a .live() function somewhere, but I haven't been able to figure that out yet. Any help is much appreciated!
Note - I am not trying to dynamically load new options, as specified in the documentation using trigger("liszt:updated");
Ensure that the response elements have the select class.
console.log( response ); // to verify
May also be a good idea to only apply the plugin to the new element(s).
jQuery(".select").chosen();
jQuery("#add-stage").click(function() {
jQuery.get('/myurl',{},function(response) {
console.log( response ); // verify the response
var $response = $(response); // create the elements
$response.filter('.select').chosen(); // apply to top level elems
$response.find('.select').chosen(); // apply to nested elems
$response.appendTo('#stages');
});
});
Also, if /myurl is returning an entire HTML document, you may get unpredictable results.
after you code (fill the select) .write this
$(".select").trigger("chosen:updated");
I had a similar problem with Chosen. I was trying to dynamically add a new select after the user clicks on a link. I cloned the previous select and then added the clone, but Chosen options would not work. The solution was to strip the Chosen class and added elements, put the clone in the DOM and then run chosen again:
clonedSelect.find('select').removeClass('chzndone').css({'display':'block'}).removeAttr('id').next('div').remove();
mySelect.after(clonedSelect);
clonedSelect.find('select').chosen();
one way you can use chosen with ajax:
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
cache: false,
data: search
}).done(function(data){
$.each(data, function(){
$('<option />', {value: this.value, text: this.text}).appendTo(selectObj);
});
chosenObj.trigger('liszt:updated');
});
where selectObj is particular select object
But ...
Chosen is implemented very bad.
It has several visual bugs, like: select some option, then start searching new one, then remove selected and the keep typing - you will get 'Select some options' extended like 'Select some options search value'.
It doesn't support JQuery chaining.
If you will try to implement AJAX you will notice, that when you loose focus of chosen, entered text disappears, now when you will click again it will show some values.
You could try to remove those values, but it will be a hard time, because you cannot use 'blur' event, because it fires as well when selecting some values.
I suggest not using chosen at all, especially with AJAX.
1.- Download Livequery plugin and call it from your page.
2.- Release the Kraken: $(".select").livequery(function() { $(this).chosen({}); });
This is an example of Chosen dynamically loading new options form database using ajax every time Chosen is clicked.
$('.my_chonsen_active').chosen({
search_contains:true
});
$('.my_chonsen_active').on('chosen:showing_dropdown', function(evt, params){
id_tosend=$(this).attr("id").toString();
$.get("ajax/correspondance/file.php",function(data){
$('#'+id_tosend).empty();
$('#'+id_tosend).append(data);
$('#'+id_tosend).trigger("chosen:updated");
});
});