jQuery Bootgrid Not Working Properly

Question

I could use some help. I have a jQuery Bootgrid on a page that is using ajax. While the data loads properly and the grid is properly rendered. None of the features seem to work properly including the search box, sorting, refresh, etc. Likewise I am getting no javascript errors.

I am referencing the following

jquery.bootgrid.min.css
jquery.bootgrid.min.js
jquery.bootgrid.fa.min.js

My Code is pretty basic

HTML

<table id="jobGrid" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="JobNumber" data-identifier="true" data-type="string">Job Number</th>
            <th data-column-id="JobName" data-type="string">Job Name</th>
            <th data-column-id="JobState" data-type="string">Request State</th>
            <th data-column-id="JobStatus" data-type="string">Status</th>
            <th data-column-id="JobRequestor" data-type="string">Requestor</th>
            <th data-column-id="LastModifiedDate" data-type="date" data-order="desc">Last Modified</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
        </tr>
    </thead>
</table>

JavaScript

// Planning Filter
var planningFilter = function () {
    // NOTE: I have multiple types of basic filters. 
    // eg: Planning, Approved, Completed
    $("#jobGrid").bootgrid("destroy");
    var grid = $("#jobGrid").bootgrid({
        ajax: true,
        ajaxSettings: {
            method: "GET",
            cache: false
        },
        url: RestService.GetJobsInPlanningSvr(),
        formatters: {
            "commands": function (column, row) {
                return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.JobNumber + "\"><span class=\"fa fa-pencil\"></span>&nbsp;&nbsp;View Details</button>";
            }
        }
    }).on("loaded.rs.jquery.bootgrid", function () {
        /* Executes after data is loaded and rendered */
        grid.find(".command-edit").on("click", function (e) {
            alert("You pressed edit on row: " + $(this).data("row-id"));
        });
    });
}

JSON Result

{
    "current":1,
    "rowCount":10,
    "rows":[
        {"CustomerID":"88888888-8888-8888-8888-888888888888","JobNumber":"DMPC-2","JobName":"DMPC-2: Transfer 645 Units to Warehouse","JobState":"Request Draft","JobStatus":"In Planning","JobRequestor":"Jim Halpert","LastModifiedUTS":1439768413,"LastModifiedDate":"8/16/2015"},
        {"CustomerID":"88888888-8888-8888-8888-888888888888","JobNumber":"DMPC-1","JobName":"DMPC-1: Scranton Chamber of Commerce Delivery","JobState":"Request Draft","JobStatus":"Pending Approval","JobRequestor":"Dwight Schrute","LastModifiedUTS":1440009361,"LastModifiedDate":"8/19/2015"}
    ],
    "total":2
}

And that's basically it... Any reason why none of the features would not be working that you can see... Not: I have not tested pagination but It would not surprise me if this did not work either.

Thanks for your help

score 2 · Accepted Answer · answered Aug 19 '15 at 20:56

2

The problem is, the function was executed before the page elements were fully loaded.

You can put the function inside $(function() { });

e.g

$(function() {  
  // Planning Filter
  var planningFilter = function () {
      // NOTE: I have multiple types of basic filters. 
      // eg: Planning, Approved, Completed
      $("#jobGrid").bootgrid("destroy");
      var grid = $("#jobGrid").bootgrid({
          ajax: true,
          ajaxSettings: {
              method: "GET",
              cache: false
          },
          url: "data.json",
          formatters: {
              "commands": function (column, row) {
                  return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.JobNumber + "\"><span class=\"fa fa-pencil\"></span>&nbsp;&nbsp;View Details</button>";
              }
          }
      }).on("loaded.rs.jquery.bootgrid", function () {
          /* Executes after data is loaded and rendered */
          grid.find(".command-edit").on("click", function (e) {
              alert("You pressed edit on row: " + $(this).data("row-id"));
          });
      });
  }

  planningFilter();
});

Preview

answered Aug 19 '15 at 20:56

Robin Carlo Catacutan

13,249
11
52
85

I am actually calling the planningFilter(); method from the $(document).ready() method. Having said that - I did try your way and still none of the features worked. It has to be something in my code because I then commented out all of my code and tried the demo script and it worked... The biggest difference between the sample code and my code is that the data was hard coded into the HTML table where as I am pulling from an ajax call. I am using a get method according the the bootgrid api. Unfortunately there was no example. Am I using it properly? (ref: ajaxSettings) in my code. – Sean Aug 20 '15 at 17:15
@Sean Ah I see, yeah it's probably the data. The difference between our code is where we fetch the data, where I use `data.json` and you use `RestService.GetJobsInPlanningSvr()`. What I would suggest to debug is you use a sample `json` file and put the data there and instead of using `RestService.GetJobsInPlanningSvr()` use `name_of_file.json` – Robin Carlo Catacutan Aug 20 '15 at 18:07
I think I figured out what the problem is... Basically, the grid does not reference the existing json payload when paging or sorting when using ajax as it does with static json. It actually makes a new ajax call to the server where I am expected to perform the logic there. I tried to turn this feature off but it did not seem to take. I would prefer not to open threads to the database for paging and sorting so I am going to try an alternate data grid solution. Thanks for your help @Robin Carlo Catacutan - much ablidged... – Sean Aug 31 '15 at 16:51
@Sean Great! I'm happy to help. – Robin Carlo Catacutan Sep 01 '15 at 09:15

score 0 · Answer 2 · answered Dec 02 '15 at 15:07

0

I think your server side isn't reacting correctly to the requests from the grid. Put in a breakpoint on the server-side, I think you'll find its being called....

You need to extract "current" (currentPage) and "rowCount" from the request.args, and then return the correct json...

answered Dec 02 '15 at 15:07

James Joyce

1,694
18
20

This is more of a comment than a definitive answer, please make sure you review [answer] before posting. – Dan Beaulieu Dec 02 '15 at 15:24

score 0 · Answer 3 · answered Nov 18 '16 at 03:40

When you are using ajax with bootgrid, functionalities like search and pagination are expected to be done on the server side. Therefore, you should get the search input from the defualt post results of the table.

current=1&rowCount=10&sort[sender]=asc&searchPhrase=&id=b0df282a-0d67-40e5-8558-c9e93b7befed

jQuery Bootgrid Not Working Properly

3 Answers3