Issue updating table results from ajax, and incorrect example

[decodeman]

Hi, thanks for your component. Is there any way Griddle could render results more than once, so we can follow React examples and simply make the ajax call ourselves when our component mounts and then update our setState() thereby passing updated 'results' property to your Griddle component?

1. Currently when I try this (and let's say I even try to poll the server for new results every X seconds), Griddle will not re-render (as I see in the code it only cares about props.results in the original getInitialState call.

This is the basic code I'd like to be able to work with Griddle, which follow React examples of how to do things

var MusingsSearchResults = React.createClass({
  getInitialState: function() {
    return {musings: []};
  },
  componentDidMount: function() {
    this.loadMusingsFromServer(); //doesn't work out, because Griddle 'results' property must be populated ahead of time
    setInterval(this.loadMusingsFromServer,5000); //could even try to poll
  },
  loadMusingsFromServer: function() {
    debugger;
    $.ajax({
      url: 'musings.json',
      dataType: 'json',
      success: function(data) {
        this.setState({musings: data});
      }.bind(this),
      error: function(xhr, status,err) {
        console.error(xhr, status, err.toString());
      }.bind(this)
    });    
  },
  render: function() {
    return <Griddle results={this.state.musings} tableClassName="table"/>;
  }  
});

2. I do see getExternalResults, though I don't need paging or filter... just ability to easily feed results from my ajax call (which I may want to poll every X seconds). I did notice this fyi: I think the callback example at http://dynamictyped.github.io/Griddle/ is not supposed to pass a function, just the results and totalResults?

var fakeDataMethod = function(filterString, sortColumn, sortAscending, page, pageSize, callback) {
    // Load results from your API here.
    callback(function() {
        results: [],
        totalResults: 300
    });
}

For example, this works for me:

  loadItUp: function(filterString, sortColumn, sortAscending, page, pageSize, callback) {
    $.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)
    });    
  },  
  render: function() {
    //return <Griddle results={this.state.musings} tableClassName="table"/>;
    return <Griddle getExternalResults={this.loadItUp} tableClassName="table"/>;
  }  

Thanks again! (Note maybe I have React misunderstood, but I think components' render should be able to handle props updates. And I can't think of how to call render the very first time with async ajax callback data already provided.)

-First time poster on GitHub (unsure how to find responses, so I'll check back for issue comments)

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