Trying to understand jqgrid for jquery. How do I change the URL for my AJAX call?

Question

I have everything working from the tutorial, replacing it with my data, but it is a hardcoded situation. For example, in the tutorial, which is what I have working, I have:

jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    url:'http://127.0.0.1/products/index.php/mystuff/test/1/5/productname/desc',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['ProductID','title', 'description','price','tax','notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {name:'amount', index:'amount', width:80, align:'right'}, 
      {name:'tax', index:'tax', width:80, align:'right'}, 
      {name:'total', index:'total', width:80, align:'right'}, 
      {name:'note', index:'note', width:150, sortable:false} ],
    pager: jQuery('#pager'),
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'title',
    sortorder: "desc",
    viewrecords: true,
    imgpath: 'http://127.0.0.1/products/public/themes/basic/images',
    caption: 'Product List'
  }); 
}); 

But the url is hard coded to pull up data. The tutorial has:

jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {name:'amount', index:'amount', width:80, align:'right'}, 
      {name:'tax', index:'tax', width:80, align:'right'}, 
      {name:'total', index:'total', width:80, align:'right'}, 
      {name:'note', index:'note', width:150, sortable:false} ],
    pager: jQuery('#pager'),
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    imgpath: 'themes/basic/images',
    caption: 'My first grid'
  }); 
}); 

Obviously, the data in my querystring will change and I won't always want the same url of: http://127.0.0.1/products/index.php/mystuff/test/1/5/productname/desc

And, the tutorial with example.php needs querystring variables so it can get the right data, but they never show that part that I can find. So how do I change the querystring? How do I send items dynmically? Also, the pager buttons send stuff like this because of the hardcode url:

http://127.0.0.1/products/index.php/mystuff/test/1/5/productname/desc?page=2&rows=10&sidx=productname&sord=desc&nd=1248988261293&_search=false

How can I just have a url like /test/the right variables? How can I change the querystring?

Thank you for any help. I hope it is not too obvious. I found setGridParam({url:newvalue}) but did not understand how to use it.

Here is the documentation. The tutorial is at the first part, top.

EDIT: Thanks for the below. I am trying to see how they use the setGridParam in their tutorial with example.php. They simply have example.php and I cannot see how they got the querystring variables there from the html page to the example.php page. setGridParam may be the right way to accomplish this but it is no where in the example so I cannot figure out how they passed the initial querystring variables over.

I know that I can do this:

    function gridSearch()
    {
        $("#list").setGridParam(
            {

                  url:"http://127.0.0.1/products/index.php/mystuff/test/1/5/productname/desc",
                page:1
            }
            ).trigger("reloadGrid");//Reload grid trigger
        return false
    }

<input id="sData" class="EditButton" type="submit" value="Search" onClick="return gridSearch()"/>

and that that will reload the grid (I tested it; it works), but how did they send over items in the tutorial in the first place? What if I do not want a button to reload but just pass in variables for it to initially load?

Answer 1

After you have created your grid you can build up a url and then specify this and trigger the grid to reload.

jQuery("#list").jqGrid().setGridParam({url : 'newUrl'}).trigger("reloadGrid")

Answer 2

You can try this:

jQuery("#list")
    .jqGrid()
    .setGridParam({
        data:'xml',
        url : 'newUrl'
    })
    .trigger("reloadGrid");

Answer 3

Suppose you have written a jqgrid js code in a js function. So in that method pass your url dynamically in a variable urlGetLst In jqgrid code we have to specify some attributes:

url: urlGetLst,//(will be dynamic)
//and
loadonce: false

With this option it will every time give a call to specified url and refresh the jqgrid with fresh data.

And before calling jqgrid load function with url call/execute below code

$("#jqgridtab").GridUnload();