How to reload JqGrid grid

Question

I have a on my page with semesters as a selection option. When a semester is selected a JavaScript function is called passing as parameter the id semester.

<select name="semester" id="semester" onchange="getStudents(this)">
 <option value="1">Semester 1</option>
 <option value="2">Semester 2</option>
</select>

And my jqGrid has the following

function getStudents(semester) {
    var $table= $("#students_list");
    $table.jqGrid({
      url:'getStudents/?semester='+semester,
      datatype: "json",
      mtype: 'POST',
      colNames:['id','Student','Semester'],
      colModel:[
        {name:'studentId'},
        {name:'studentName'},
        {name:'semester'}
     ],
    viewrecords: true,
    gridview: true
    });         
}

But I can only see the results the first time when I call getStudents function.

score 2 · Answer 1 · edited May 23 '17 at 11:53

First of all I shows the errors in your current code.

You use onchange="getStudents(this). It means that the parameter of getStudents will be initialized with DOM element of the select #semester. It means that you need use $(semester).val() to get the value of selected option inside of getStudents function instead of usage just semester (see 'getStudents/?semester='+semester).

The next problem is the following. The code $table.jqGrid({...}); creates the grid. The empty table <table id="students_list"></table> will be converted to relatively complex structure of dives and tables during creating the grid. Because of that one can't make the same call at the second time. Such call will be just ignored. Instead of that one have to destroy the grid by usage of $("#students_list").jqGrid("GridUnload"); or better to create the grid ones and to reload it later.

You use mtype: 'POST' option in jqGrid. It means thet jqGrid use HTTP POST to send some parameters to the server and place there in the body of the HTTP request. It's recommended to send custom parameter semester in the same way. In the case you can use

var $table = $("#students_list");
$table.jqGrid({
    url: "getStudents",
    datatype: "json",
    mtype: "POST",
    postData: {
        semester: function () {
            return $("#semester").val(); // 1 or 2 from value attr of option
        }
    },
    colNames: ["id", "Student", "Semester"],
    colModel: [
        {name: "studentId"},
        {name: "studentName"},
        {name: "semester"}
    ],
    viewrecords: true,
    gridview: true
});

The code will always send the current value of semester select to the server. For example if the user will click on the column header to sort by it of to click on the next page button then new request with the current selected semester will be sent to the server. I'd recommend you to read the old answer which describes the usage of functions in postData more detailed.

To refresh the grid content immediately after changing the option one can use change handle which trigger reloadGrid:

$("#semester").change(function () {
    $table.trigger("reloadGrid");
});

If you do need to place selected semester in the URL then you should remove postData parameter from the option used during creating the grid and to use the following code in change event handler:

$("#semester").change(function () {
    $table.jqGrid("setGridParam", {
        url: "getStudents/?semester=" + encodeURIComponent($("#semester").val())
    }).trigger("reloadGrid");
});

I did as expected, but it not worked. See my code. [Code](http://www.codeshare.io/8xW7r) — Gleydson S. Tavares, May 25 '15 at 13:19
@GleydsonS.Tavares: You posted only the same code which I included. Where is the ` — Oleg, May 25 '15 at 13:23
It is calling only the first time when the page loads, but when I click on select nothing happens. — Gleydson S. Tavares, May 25 '15 at 13:25
@GleydsonS.Tavares: You should place `$("#semester").change(function () {...})` **inside of** `$(document).ready(function () {...});` — Oleg, May 25 '15 at 13:28
I use firebug, it shows me the HTTP request returns JSON only the first time, but when I click the select is not made any request — Gleydson S. Tavares, May 25 '15 at 13:30
@GleydsonS.Tavares: I still don't see *the real code which you use*. Do you placed ` — Oleg, May 25 '15 at 13:33
@GleydsonS.Tavares: You can use JSFiddle for example to provide the demo. Look at this one http://jsfiddle.net/OlegKi/0fvajwhp/ for example which shows how to use `url: "/echo/json/", // use JSFiddle echo service` of JSFiddle — Oleg, May 25 '15 at 13:35
Thanks @Oleg, in jsFiddle worked. I'll check my code to see what is happening. http://jsfiddle.net/t9ehx142/1/ — Gleydson S. Tavares, May 25 '15 at 14:06
@GleydsonS.Tavares: It should be so. I recommend you to add `height: "auto", autoencode: true` options additionally, but it's independent from your problem. — Oleg, May 25 '15 at 14:15

score 0 · Answer 2 · edited May 25 '15 at 05:47

0

Use $table.trigger('reloadGrid'); inside getStudents() function.. and don't add jqGrid code inside getStudents() function add it on document ready (means page when loaded). Also inside the jqGrid code fetch the ID of selected item dynamically rather than passing as a parameter.like below:

url:'getStudents/?semester='+$("#semester").val(),

edited May 25 '15 at 05:47

Akash Rajbanshi

1,553
11
23

answered May 25 '15 at 05:43

Pradeep

74
7

Or try only changing this line only "url:'getStudents/?semester='+$("#semester").val()," it should also work in ur case. – Pradeep May 25 '15 at 05:46
I did as expected, but it not worked. See my code. [Code](http://www.codeshare.io/8xW7r) – Gleydson S. Tavares May 25 '15 at 13:19
check for the console using firebug. On changing the select box value is it printing any error or what. Sorry codeshare is blocked for me So,I cant check ur code. – Pradeep May 26 '15 at 05:30

score 0 · Answer 3 · answered May 25 '15 at 05:46

try something like this...

function getStudents(semester) {
    var $table= $("#students_list");
    $table.jqGrid({
      url:'getStudents/?semester='+semester,
      datatype: "json",
      mtype: 'POST',
      colNames:['id','Student','Semester'],
      colModel:[
        {name:'studentId'},
        {name:'studentName'},
        {name:'semester'}
     ],
    viewrecords: true,
    gridview: true
    }).trigger("reloadGrid");         
}

add trigger("reloadGrid") at the end

Hope this help!!!

How to reload JqGrid grid

3 Answers3