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?

Gwenni

Did you ever find an answer to this? I've been look as well and would love to pass some additional query strings to the URL during a grid-reload call. – Oates

I wonder if this was before jQuery was aliased with the $. – Gwenni

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

Ventre

How did they send the variables in the tutorial? Do you know how the pager querystring is created? – Gwenni

by using the methods .getGridParam("page") etc – Ventre

But where is that in the tutorial? I believe you. I just don't see how they implemented it in their tutorial. – Gwenni

well sometimes you have to infer things from an api. They cant spell everything out in abc when it is a free product. – Ventre

@redsquare: i have used your answer but the grid is loading all the data but when when i'm opening that url in new window json show few record, which should be the output. can you tell me what may be the issue.? this is my code grid.jqGrid().setGridParam({url : myUrl}).trigger("reloadGrid"); – Rhomboid

Answer 2

You can try this:

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

Biased

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();

Zamudio