CODEWITHSUNDEEP
javascriptjqueryjqgrid
Gleydson S. Tavares
Gleydson S. Tavares

Reputation: 600

How to reload JqGrid grid

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.

Upvotes: 0

Views: 1437

Answers (3)

Oleg
Oleg

Reputation: 221997

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

Upvotes: 2

Pradeep
Pradeep

Reputation: 74

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

Upvotes: 0

gamini2006
gamini2006

Reputation: 299

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!!!

Upvotes: 0

Related Questions