Issue updating table results from ajax, and incorrect example

[decodeman]

Issue updating table results from ajax, and incorrect example

[ryanlanciaux]

Hi there and thanks for posting this question! I appreciate all the detail you put into describing the issues you are running into.

It seems that the external results is one area we need to document at bit better. In the near future here we'll write a much more thorough example of using the external results and hopefully clean up some of the issues that are commonly encountered with that part of Griddle. I hope to have that online by this weekend.

Thanks again for being a first time Github poster on our repository :)

[0xdabbad00]

For anyone else that is coming from jQuery datatables, I make an ajax call using the https://github.com/ded/reqwest library (so I don't have jquery at all in my project). This works very similarly to jQuery's $.ajax({ by using Reqwest({ instead.

Then I need to modify some things with the results returned, so I make a temporary results array as follows:

success: function (resp) {
  var results = [];
  for (var i=0; i<resp.iTotalDisplayRecords; i++)
  {
    results[i] = {
      "Path" : resp.aaData[i]["FilePath"],
      "Last Seen": resp.aaData[i]["LastSeen"],
      "First Seen": resp.aaData[i]["FirstSeen"],
      "Count": resp.aaData[i]["NumSystems"]
    };
  }

  callback({
    results: results,
    totalResults: resp.iTotalRecords
  });
},

[sam3k]

What about when you do an ajax call on form submit? This is the only workaround I've found:

loadItUp: function(filterString, sortColumn, sortAscending, page, pageSize, callback, e) {
    if(e) {
    $.ajax({
      url: 'musings.json',
      dataType: 'json',
      success: function(data) {
        callback({
          results: data,
          totalResults: data.length
        });
      }.bind(this),
      error: function(xhr, status,err) {
        console.error(xhr, status, err.toString());
      }.bind(this)
    });    

    } else {
       callback({
          results: data,
          totalResults: data.length
        });
    }
  },  
  handleSubmit: function(e) {
      e.preventDefault();
      this.loadItUp(null, null, null, null, null, function(){}, e);
      return;
  },
  render: function() {
    return (
        <form onSubmit={this.handleSubmit}>
            <Griddle getExternalResults={this.loadItUp} tableClassName="table" />
        </form>
    )
  }  

It works but it kinda defeats the purpose of using ReactJS state/props plus it feels wrong. =/

[ryanlanciaux]

Hey @sam3k -- thanks for posting! I agree -- we are currently refactoring the external results to be more react-y. It's working on our manual examples but I'm trying to get more tests around the functionality and shim in the callback (so we don't break the grid for anyone using the callback method in the immediate future) before pushing it to the released version.

This functionality is available on this branch and once more of the tests are done it will be in npm as a pre-release version.

[sam3k]

Using that branch (and switching to "results" instead of "getExternalResults" works perfect. Thanks @ryanlanciaux

[ryanlanciaux]

I'm closing this out as the ver0.2.0 release should have made this sort of thing a bit easier. The external data documentation contains some better example than the original docs. Please feel free to ping me if this is still giving you trouble! 👍