From ddc736fd4662c5faac1c622942fccd8c0da93b1c Mon Sep 17 00:00:00 2001 From: Cotton Hou Date: Mon, 8 Sep 2014 05:06:15 +0800 Subject: [PATCH 1/5] Use promise callbacks from jqXHR --- scripts/example.js | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/scripts/example.js b/scripts/example.js index 0d316b6e..86808252 100755 --- a/scripts/example.js +++ b/scripts/example.js @@ -20,14 +20,15 @@ var CommentBox = React.createClass({ loadCommentsFromServer: function() { $.ajax({ url: this.props.url, - dataType: 'json', - success: function(data) { + dataType: 'json' + }) + .done(function(data) { this.setState({data: data}); - }.bind(this), - error: function(xhr, status, err) { + }.bind(this)) + .fail(function(xhr, status, err) { console.error(this.props.url, status, err.toString()); - }.bind(this) - }); + }.bind(this)) + ; }, handleCommentSubmit: function(comment) { var comments = this.state.data; @@ -40,14 +41,15 @@ var CommentBox = React.createClass({ url: this.props.url, dataType: 'json', type: 'POST', - data: comment, - success: function(data) { + data: comment + }) + .done(function(data) { this.setState({data: data}); - }.bind(this), - error: function(xhr, status, err) { + }.bind(this)) + .fail(function(xhr, status, err) { console.error(this.props.url, status, err.toString()); - }.bind(this) - }); + }.bind(this)) + ; }); }, getInitialState: function() { From a3bd8b5eed59b4fd0c06b0b5f5e1a793ad3dc500 Mon Sep 17 00:00:00 2001 From: Cotton Hou Date: Mon, 8 Sep 2014 05:11:44 +0800 Subject: [PATCH 2/5] Use jQuery.proxy instead of Function.prototype.bind which not supported by IE8- --- scripts/example.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/scripts/example.js b/scripts/example.js index 86808252..c36d9e72 100755 --- a/scripts/example.js +++ b/scripts/example.js @@ -22,12 +22,12 @@ var CommentBox = React.createClass({ url: this.props.url, dataType: 'json' }) - .done(function(data) { + .done($.proxy(function(data) { this.setState({data: data}); - }.bind(this)) - .fail(function(xhr, status, err) { + }, this)) + .fail($.proxy(function(xhr, status, err) { console.error(this.props.url, status, err.toString()); - }.bind(this)) + }, this)) ; }, handleCommentSubmit: function(comment) { @@ -43,12 +43,12 @@ var CommentBox = React.createClass({ type: 'POST', data: comment }) - .done(function(data) { + .done($.proxy(function(data) { this.setState({data: data}); - }.bind(this)) - .fail(function(xhr, status, err) { + }, this)) + .fail($.proxy(function(xhr, status, err) { console.error(this.props.url, status, err.toString()); - }.bind(this)) + }, this)) ; }); }, From e8ec36252c38a46b64fb3cf20ca857716f2d7f32 Mon Sep 17 00:00:00 2001 From: Cotton Hou Date: Mon, 8 Sep 2014 05:14:24 +0800 Subject: [PATCH 3/5] Use shortcuts of jQuery.ajax --- scripts/example.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/scripts/example.js b/scripts/example.js index c36d9e72..15288dfa 100755 --- a/scripts/example.js +++ b/scripts/example.js @@ -18,10 +18,7 @@ var Comment = React.createClass({ var CommentBox = React.createClass({ loadCommentsFromServer: function() { - $.ajax({ - url: this.props.url, - dataType: 'json' - }) + $.getJSON(this.props.url) .done($.proxy(function(data) { this.setState({data: data}); }, this)) @@ -37,12 +34,7 @@ var CommentBox = React.createClass({ // `setState` accepts a callback. To avoid (improbable) race condition, // `we'll send the ajax request right after we optimistically set the new // `state. - $.ajax({ - url: this.props.url, - dataType: 'json', - type: 'POST', - data: comment - }) + $.post(this.props.url, comment) .done($.proxy(function(data) { this.setState({data: data}); }, this)) From 96d92e185ac4c601836ec29788a1a82a72247432 Mon Sep 17 00:00:00 2001 From: Cotton Hou Date: Mon, 8 Sep 2014 05:23:10 +0800 Subject: [PATCH 4/5] Remove redundant state updates within post succeed callback --- scripts/example.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/scripts/example.js b/scripts/example.js index 15288dfa..0f0699ba 100755 --- a/scripts/example.js +++ b/scripts/example.js @@ -35,9 +35,6 @@ var CommentBox = React.createClass({ // `we'll send the ajax request right after we optimistically set the new // `state. $.post(this.props.url, comment) - .done($.proxy(function(data) { - this.setState({data: data}); - }, this)) .fail($.proxy(function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }, this)) From e32b0e7e75ba5545254110952226d9681c5a65c6 Mon Sep 17 00:00:00 2001 From: Cotton Hou Date: Mon, 8 Sep 2014 05:38:45 +0800 Subject: [PATCH 5/5] Fetch comments only after each call has finished --- scripts/example.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/scripts/example.js b/scripts/example.js index 0f0699ba..e54fbf54 100755 --- a/scripts/example.js +++ b/scripts/example.js @@ -25,6 +25,9 @@ var CommentBox = React.createClass({ .fail($.proxy(function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }, this)) + .always($.proxy(function() { + setTimeout(this.loadCommentsFromServer, this.props.pollInterval); + }, this)) ; }, handleCommentSubmit: function(comment) { @@ -46,7 +49,6 @@ var CommentBox = React.createClass({ }, componentDidMount: function() { this.loadCommentsFromServer(); - setInterval(this.loadCommentsFromServer, this.props.pollInterval); }, render: function() { return (