Skip to content

Add 'cache: false' to $.ajax when fetching comments (docs/tutorial) #3691

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 22, 2015
Merged

Add 'cache: false' to $.ajax when fetching comments (docs/tutorial) #3691

merged 2 commits into from
Apr 22, 2015

Conversation

jonscottclark
Copy link
Contributor

When trying out the tutorial, I had just moved my comments data to a separate .json file, and created the setInterval function to poll for changes to the file. (Section titled "Updating state")

At the bottom of this section the tutorial states "Try running this in your browser and changing the comments.json file; within 2 seconds, the changes will show!" They didn't 😞

It just kept returning the same content, until I told the $.ajax call not to cache the result by setting the cache option to false. Then the comments that I added came through OK and the state of the component updated automatically as expected.

This PR doesn't add any explanation about the cache option, and adds it to any call (also in the KR and JP tutorial.) Most people may be accustomed to using the following:

$.ajaxSetup({ cache: false });

Which would make all calls to XHR functions not cache by default, but for the sake of this tutorial, and avoidance in setting global config options for jQuery, I think it's a good idea to include it in each call so that things work as expected for newbies like myself 😄

@jonscottclark jonscottclark changed the title Add 'cache: false' to $.ajax when fetching comments Add 'cache: false' to $.ajax when fetching comments (docs/tutorial) Apr 18, 2015
@jonscottclark
Copy link
Contributor Author

I see that since no-cache headers have been added to the server implementations in the example files this cache option would not really be necessary after completing the tutorial. However, someone running the tutorial on a simple http server would still need to rely on the option to be set to guarantee that the results from the fetch are fresh.

@zpao
Copy link
Member

zpao commented Apr 18, 2015

Someone running this on a simple http server would also fail shortly after when trying to POST to a JSON file :)

I'm fine with adding it. I think last time somebody started to, they never addressed review comments, which is why this is still like this.

@@ -395,6 +395,7 @@ var CommentBox = React.createClass({
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At the beginning of this code block (and the others), we have some numbers in curly braces. We use this to highlight lines (which you can see on the website, and more info).

You're adding a line right in the middle of this range and probably outside the ranges in other code blocks. We need to make sure they're all update appropriately.

@jonscottclark
Copy link
Contributor Author

Thanks for agreeing that it's not completely foolish to add, despite not being required to achieve the end goal -- it could certainly introduce/reinforce the concept of having something in your code to prevent caching (whether it's here in the client-side or in the server code in your examples), and hopefully eliminate a stumbling block for some people.

I'll go through the code blocks and make sure the added line doesn't screw up the highlighting.

@zpao
Copy link
Member

zpao commented Apr 22, 2015

👍 thanks! We'll pick this up on the website in the next few days.

zpao added a commit that referenced this pull request Apr 22, 2015
Add 'cache: false' to $.ajax when fetching comments (docs/tutorial)
@zpao zpao merged commit 5b42e89 into facebook:master Apr 22, 2015
zpao added a commit that referenced this pull request May 1, 2015
Add 'cache: false' to $.ajax when fetching comments (docs/tutorial)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants