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.
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
});
}
});
});
I'm just trying to load the data for a select2 dropdown using Ajax, instead of putting the large dataset inline in my HTML.
$('input[name="field"]').select2({
ajax: {
url: "/data.json",
dataType: "json",
results: function(data,page)
{
return data;
}
}
});
This works, in that it waits until I "open" my select2 list before making the Ajax call to get the data. It then also displays the data correctly. However, it isn't filtering the list as I type. Instead, it makes repeated ajax calls to (presumably) get the filtered data.
Also, if I set an existing value in my form, it doesn't appear in my select2 control. I'm guessing this is because I'm not using initSelection but I'm not clear on how to do this correctly.
Am I doing this all wrong? It appears that what I really want is the functionality of data but with remote loading.
I don't think this is ideal, but it works:
$.get("/data.json", function(data)
{
$('input[name="field"]').select2({
data: data,
});
});
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 have a table filled with data that I want to sort and filter.
I implemented an auto-refresh function, which loads data from the server each time, but I want to restore sort and filter options, which I can do.
I use trigger("reloadGrid",[{current:true}]), setting the datatype to json so that the data are retrieved from the server, in the autorefresh function, and the sort and filter options are used in the loadcomplete method with a setTimeout, as explained in other stackoverflow questions.
That works, but each time the grid refreshes, I see during one second the grid with the full data, not sorted nor filtered, and then the data are locally sorted/filtered.
Given that I want an 5 seconds auto-refresh, is there a way I can prevent the reloadGrid method from displaying the full data when there is a server request but wait for the reload in loadComplete to refresh the display?
Reload used in the autorefresh function :
$("#MyGrid").jqGrid("setGridParam",{url:"list.php", datatype:"json"}).trigger("reloadGrid",[{current:true}]);
Model :
jQuery("#MyGrid").jqGrid({
url:'list.php',
datatype: "json",
loadonce:true,
...
loadComplete: function(){
if ($("#MyGrid").jqGrid("getGridParam", "datatype") !== "local") {
setTimeout(function () {
$("#MyGrid").jqGrid("setGridParam",{search:srch,postData:post});
})
};
}
You can use setInterval JavaScript function to do automatic refreshing
var grid = $("#list"),
intervalId = setInterval(
function() {
grid.trigger("reloadGrid",[{current:true}]);
},
60000); // Every 1 min
to stop the grid reload you can use one more JavaScript function:
clearInterval(intervalId);
In the "reloadGrid" I use less known parameter current:true which is described here to preserve the current selection in the grid.
You can see the Reload Jqgrid by given interval
I've got a pretty strong understanding of php, html & css but i've only just started to dive into javascript & jQuery.
The problem i'm facing is that I have a form on a page that I want first to validate, then when it passes validation to submit 2 ajax requests; the first to insert data into a table in my database and the second to run a query on another table and return the result.
I've got the latter working just fine using the submitHandler method to send the ajax request and update a div on my page with it's result. When I added a second ajax call after or before this one it seems to break...
My question is should there be a problem with having 2 ajax calls in the submitHandler, like below, and if so what would be the correct way to go about this, or even a better way?
$("#contactform").validate({
rules: ...
submitHandler: function() {
// First to insert the contact details using input#firstname etc.
var firstname = $("#firstname").value();
var lastname = $("#lastname").value();
var contactString = 'firstname='+ firstname + '&lastname=' + lastname;
$.ajax({
type: "POST",
url: "insertcontact.php",
data: quoteString,
success: function(server_response){
$('#yourquote').html(server_response).show();
}
});
// Second use width & height submitted from previous page for processquote.php
var width = <?php echo json_encode($cleanpost['width']); ?>;
var height = <?php echo json_encode($cleanpost['height']); ?>;
var quoteString = 'width='+ width + '&height=' + height;
$.ajax({
type: "POST",
url: "processquote.php",
data: quoteString,
success: function(server_response){
$('#yourquote').html(server_response).show();
}
});
}
});
I'm using the 'jquery.validate.js' validation plugin. Again my goal is such that once someone has entered valid details on my form, using Ajax their contact data is inserted into the database then the database is queried using fields submitted on the previous page to retrieve a numerical result to display on the page, without a refresh.
Any pointers you could give me would be much appreciated!
Rob
EDIT: Learning Javascript & Jquery simultaneously isn't such a good idea it seems, i've confused: this.value = ''; with $(this).val(''); as shown in the first 2 variable declarations, this is what was causing problems! Thanks for your useful help anyway guys, will upboat for your assistance.
In your first .ajax() call, you are trying to pass it a value in the data: parameter that you have not created yet. I believe you are wanting to send it the contactString instead.
Unless your two queries depend on each other being done sequentially then you should be able to execute them both asynchronously (essentially at the same moment). If you want the second AJAX call to happen after the first one, you could always pass all of your data parameters to insertcontact.php and once the insertion is done, execute processquote.php with the values you already passed through.
Lastly, I wonder if you are meaning to do this, but both of your AJAX calls overwrite whatever is in the #yourquote DOM element and show it. You might want to provide a separate element to put the response in for each of your two requests. Perhaps #yourquoteinserted and #yourquoteprocessed?
Edit: BigRob, from your comment it sounds as if you want to make synchronous AJAX queries, check out the async property of your .ajax() call. This is from the .ajax() documentation:
async Boolean
Default: true
By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
(emphasis mine)
However, I could be wrong about this but you might actually be able to call one asynchronous AJAX method from within the success function of another. If it starts looking too intermingled for you, you might want to extract the inner call into a function. Rough approximation of what it might look like:
$.ajax({url, data:contactString,
success: function(server_response) {
extractedId = server_response; // you can return data many ways
$.ajax({url2, data:quoteString+"&extra="+extractedId,...
});
}
});
If you perform a synchronous call by setting async:false in the first AJAX call, then you could just store the result into an external (to the AJAX call) variable (or if that doesn't work store it in some DOM element temporarily). Then the javascript will pause execution and won't fire your second AJAX call until the first one has returned.
This is all hypothetical for now, though, and just based off of my understanding of how it should work.