Question

I have the following:

     function setupGrid(labId) {

       var url = '@Url.Action("GetProgData", "Prog")' + '?lId=' + lId;
       alert(url);

       $("#loginList").jqGrid({
         url: url,
         datatype: "json",
         colNames: ['PNum', 'Client', 'Salesperson', 'Email', ....
       .....
       .....  

I also have the following code:

    <script type="text/javascript">
      $(document).ready(function () {
       var labId;

       $("#LabId").change(function () {   // point1
        labId = $("#LabId").val();
        setupGrid(labId); // this goes to setupGrid but DOES NOT go to the given url( url = '@Url.Action("GetProgData", "Prog")' + '?lId=' + lId;)         
       });

       // point 2
       setupGrid(labId);  // this goes to setupGrid  and DOES go to the given url(url = '@Url.Action("GetProgData", "Prog")' + '?lId=' + lId;)
       ......

When the program runs the first time, it goes to point2 which then goes to setupGrid function and goes to the url value in:

    url: url

When I call it from the .change (point1) it again goes to SetupGrid and the alert shows the correct value but cannot understand why when I put a breakpoint at the url it does not go to the url. Why does it work the first time but when I do it from the .change it does not to go to the url.

Answer 1

I see that there are common understanding problem how jqGrid works.

If you use $("#loginList").jqGrid({...}); you need have empty <table> element with id="loginList". jqGrid convert the <table> element to relatively complex structure of divs, tables etc. So jqGrid initialize the grid first of all. It build outer part of the grid.

Then jqGrid make Ajax call to url (in case of usage datatype: "json" or datatype: "xml") and fill the grid body. One can use $("#loginList").trigger("reloadGrid") to refresh the grid body.

I hope that it should be clear now that one can call $("#loginList").jqGrid({...}); only once. It you do try to create the grid one more time from existing grid l will be just ignored.

What you should do is just rewriting the code to the following

$(document).ready(function () {
    var labId;

    $("#loginList").jqGrid({
        url: '@Url.Action("GetProgData", "Prog")',
        postData: {
            lId: function () {
                return $("#LabId").val();
            }
        },
        datatype: "json",
        colNames: ['PNum', 'Client', 'Salesperson', 'Email', ....
    });

    $("#LabId").change(function () {   // point1
        $("#loginList").trigger("reloadGrid");
    });
});

You can read here more about the usage of methods inside of properties of postData. In another answer you will find alternative way which could be practical in case if it’s require to send values from all controls of one form to the controller action.