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

Question

Hi, 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")