Skip to content

Instantly share code, notes, and snippets.

@iandanforth
Last active August 29, 2015 14:20
Show Gist options
  • Select an option

  • Save iandanforth/68b59a4c6c5fc789791a to your computer and use it in GitHub Desktop.

Select an option

Save iandanforth/68b59a4c6c5fc789791a to your computer and use it in GitHub Desktop.
Error - backbone - Synchronous XMLHttpRequest on the main thread is deprecated
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