tutorial: Simplify ajax options
dataType was unnecessary; mimeType was both unnecessary and wrong in this case. Also removed an unnecessary bind and changed pollInterval to 2000 ms for consistency with https://github.com/petehunt/react-tutorial (faster is nicer if you actually try it out!).
Ben Alpert committed
Nov 5, 2013 at 11:10 UTC
5386cd96652570669a47abd5a0d5b46b7c63003e
1 file changed
+11
-35
docs/docs/tutorial.md
+11
-35
@@ -379,8 +379,6 @@ var CommentBox = React.createClass({
379
getInitialState: function() {
380
$.ajax({
381
url: 'comments.json',
382
- dataType: 'json',
383
- mimeType: 'textPlain',
382
success: function(data) {
383
this.setState({data: data});
384
}.bind(this)
@@ -407,8 +405,6 @@ var CommentBox = React.createClass({
405
loadCommentsFromServer: function() {
406
$.ajax({
407
url: this.props.url,
410
- dataType: 'json',
411
- mimeType: 'textPlain',
408
success: function(data) {
409
this.setState({data: data});
410
}.bind(this)
@@ -419,10 +415,7 @@ var CommentBox = React.createClass({
415
},
416
componentWillMount: function() {
417
this.loadCommentsFromServer();
422
- setInterval(
423
- this.loadCommentsFromServer.bind(this),
424
- this.props.pollInterval
425
- );
418
+ setInterval(this.loadCommentsFromServer, this.props.pollInterval);
419
},
420
render: function() {
421
return (
@@ -436,13 +429,13 @@ var CommentBox = React.createClass({
429
});
430
431
React.renderComponent(
439
- <CommentBox url="comments.json" pollInterval={5000} />,
432
+ <CommentBox url="comments.json" pollInterval={2000} />,
433
document.getElementById('content')
434
);
435
436
```
437
445
-All we have done here is move the AJAX call to a separate method and call it when the component is first loaded and every 5 seconds after that. Try running this in your browser and changing the `comments.json` file; within 5 seconds, the changes will show!
438
+All we have done here is move the AJAX call to a separate method and call it when the component is first loaded and every 2 seconds after that. Try running this in your browser and changing the `comments.json` file; within 2 seconds, the changes will show!
439
440
### Adding new comments
441
@@ -456,7 +449,7 @@ var CommentForm = React.createClass({
449
<form className="commentForm">
450
<input type="text" placeholder="Your name" />
451
<input type="text" placeholder="Say something..." />
459
- <input type="submit" />
452
+ <input type="submit" value="Post" />
453
</form>
454
);
455
}
@@ -488,7 +481,7 @@ var CommentForm = React.createClass({
481
placeholder="Say something..."
482
ref="text"
483
/>
491
- <input type="submit" />
484
+ <input type="submit" value="Post" />
485
</form>
486
);
487
}
@@ -517,8 +510,6 @@ var CommentBox = React.createClass({
510
loadCommentsFromServer: function() {
511
$.ajax({
512
url: this.props.url,
520
- dataType: 'json',
521
- mimeType: 'textPlain',
513
success: function(data) {
514
this.setState({data: data});
515
}.bind(this)
@@ -532,10 +523,7 @@ var CommentBox = React.createClass({
523
},
524
componentWillMount: function() {
525
this.loadCommentsFromServer();
535
- setInterval(
536
- this.loadCommentsFromServer.bind(this),
537
- this.props.pollInterval
538
- );
526
+ setInterval(this.loadCommentsFromServer, this.props.pollInterval);
527
},
528
render: function() {
529
return (
@@ -573,7 +561,7 @@ var CommentForm = React.createClass({
561
placeholder="Say something..."
562
ref="text"
563
/>
576
- <input type="submit" />
564
+ <input type="submit" value="Post" />
565
</form>
566
);
567
}
@@ -588,8 +576,6 @@ var CommentBox = React.createClass({
576
loadCommentsFromServer: function() {
577
$.ajax({
578
url: this.props.url,
591
- dataType: 'json',
592
- mimeType: 'textPlain',
579
success: function(data) {
580
this.setState({data: data});
581
}.bind(this)
@@ -598,9 +584,8 @@ var CommentBox = React.createClass({
584
handleCommentSubmit: function(comment) {
585
$.ajax({
586
url: this.props.url,
587
+ type: 'POST',
588
data: comment,
602
- dataType: 'json',
603
- mimeType: 'textPlain',
589
success: function(data) {
590
this.setState({data: data});
591
}.bind(this)
@@ -611,10 +596,7 @@ var CommentBox = React.createClass({
596
},
597
componentWillMount: function() {
598
this.loadCommentsFromServer();
614
- setInterval(
615
- this.loadCommentsFromServer.bind(this),
616
- this.props.pollInterval
617
- );
599
+ setInterval(this.loadCommentsFromServer, this.props.pollInterval);
600
},
601
render: function() {
602
return (
@@ -640,8 +622,6 @@ var CommentBox = React.createClass({
622
loadCommentsFromServer: function() {
623
$.ajax({
624
url: this.props.url,
643
- dataType: 'json',
644
- mimeType: 'textPlain',
625
success: function(data) {
626
this.setState({data: data});
627
}.bind(this)
@@ -653,9 +633,8 @@ var CommentBox = React.createClass({
633
this.setState({data: comments});
634
$.ajax({
635
url: this.props.url,
636
+ type: 'POST',
637
data: comment,
657
- dataType: 'json',
658
- mimeType: 'textPlain',
638
success: function(data) {
639
this.setState({data: data});
640
}.bind(this)
@@ -666,10 +645,7 @@ var CommentBox = React.createClass({
645
},
646
componentWillMount: function() {
647
this.loadCommentsFromServer();
669
- setInterval(
670
- this.loadCommentsFromServer.bind(this),
671
- this.props.pollInterval
672
- );
648
+ setInterval(this.loadCommentsFromServer, this.props.pollInterval);
649
},
650
render: function() {
651
return (