Last active
August 29, 2015 14:20
-
-
Save iandanforth/68b59a4c6c5fc789791a to your computer and use it in GitHub Desktop.
Error - backbone - Synchronous XMLHttpRequest on the main thread is deprecated
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Descriptions: | |
| ready event fires twice | |
| backbone router runs twice | |
| router won't render sub-pages | |
| Long description: | |
| My backbone app wouldn't render any pages that were not at the root of the | |
| tree. For example /robots would render fine but /robots/id/1 would not. | |
| Specifically these pages wouldn't not render when loaded directly from the | |
| server. If they were rendered from the context of clicking links in the single | |
| page app they worked fine, but if you navigated to one of these pages and hit | |
| reload, the page would fail to load. | |
| Solution: | |
| I noticed I was getting a browser warning about Synchronous XMLHTTPRequests | |
| being deprecated. This can happen when jQuery .html() function is passed HTML | |
| containing <script> tags with src defined. I knew that the only html with such | |
| links was my index.html. | |
| Eventually I went through the response of every request being made on page | |
| reload and discovered that the templates being loaded into my backbone app were | |
| all the contents of index.html rather than RobotsView.html as expected. | |
| It turned out there was a single character error in my LoadTemplates method | |
| which was directing all requests, not to the root /statics/templates, but to | |
| the relative static/templates dir. | |
| Because I am using backbone with pushState = true, and because of the way I | |
| have my server configured, whatever URL I request from the server just returns | |
| index.html and then the backbone router takes over, parsing the URL, loading | |
| templates, and rendering the appropriate view. | |
| Unfortunately in this case, the only template it got was index.html over and | |
| over and so when in my first render method I called. this.$el.html(template) I | |
| invoked the jQuery side effect of Synchronous XMLHTTPRequests for any linked | |
| js, and tripped the deprecation warning in Chrome. This somehow caused the | |
| document "ready" event to fire again, causing other errors, and obscuring the | |
| real problem. | |
| The solution was simply to load /static/template/* rather than | |
| static/template/* | |
| Two hours of debugging, single character fix. Woo! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment