Im working with a relatively large backbone codebase, and it seems like whenever I get a javascript error, no matter what it is. The stacktrace that appears in the console looks identical (example below). All of my models/views are created via the backbone .extend method. Does anyone else have this problem, or know how to fix it?? I ususally have to put console.log statements everywhere to find the source of the error and its very time consuming. Thanks.
jquery-1.5.min.js:16 Uncaught InvalidConstructorArgs
d.extend._Deferred.f.resolveWith jquery-1.5.min.js:16
v jquery-1.5.min.js:16
d.support.ajax.d.ajaxTransport.send.c jquery-1.5.min.js:16
You should use an un-minified version of jQuery, Underscore and Backbone when debugging. Life will be a lot easier if you do it that way.
As far as I can tell, you are having a problem with your $.ajax call within they Backbone.sync function, but it is way too difficult to tell when you are working with minified JS.
Upgrading to Jquery 1.6.4 solved this problem
Related
I am new to AngularJS and making a headway.
However I came across this issue later in my work.
I have found that...
Some non-angular JS files are not available in the partial-html loaded with the ng-view command through default AngularJS routing.
As I am new to AJs, so can anyone assist me to fix this problem.
I would really appreciate if the solution is given living in the default AngularJS framework i.e a pure AJs solution. I have seen third party workarounds which are sort of stepping out of the framework without being aware of any possible performance compromises.
Thank you.
After searching for answers for quiet a while I have discovered a pure AngularJS solution to the problem at last.
The solution is rather a complete repository on GitHub by a user so here is the link...
https://github.com/ikaul/AngularJS-Single-Page-App/tree/master/assignment5
So far, I have been using prerender.io to make my angularjs websites seo friendly. I have worked okay when it comes to urls with hashbangs (website.com/#!).
Currently, I am making my websites go to html5mode, which doesn't contain hashbangs on url and looks a way prettier. However, even since I went to html5 url, prerender.io doesn't work properly.
Also, I came up with a Google article that claims their new technology allow the engine render Javascript framework websites automatically (https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html). However, as I use 'Fetch as Google' tool in Google Search Console. It renders very poorly and my title and meta description spit angularjs syntax ({{seo.tile}} or {{seo.desc}}), which are not rendered.
I am quite lost where I should start and fix the problems I came across with. I tried to get away from prerender.io cause I don't think we necessarily need it anymore.
Sorry for my poorly organized post and questions. Let me try to clear and tie the questions below.
1) Do we still need to teach the Google bot about the angularjs?
2) What is the most stable and best practice for AngularJS+ExpressJS SEO? I don't wanna try unstable and easily crashable method for this.
Thank you very much for your time.
EDIT
At the time of writing this article, I didn't know about using javascript compiler such as babel. I will say here make sure use webpack or gulp to compile your ES6 codes into stable ones so that your codes can be written as you expect it to be and works well with any 3rd party tools or pacakges.
It's the era of ES6!!!
Finally, I solved my problem and for future reference and others who struggling with the sample problem I had gone through, let me leave what I found.
First of all, the very reason why I was tremendously confused was that even if I take html snapshot with phantomjs, I saw still bare angular syntax like {{seo.title}} and . Very awkwardly the reason was that I was using ES6 syntax across my angularjs module. Since phantomjs wasn't fully adopted with ES6 syntax, it failed to interpret angularjs module and just spat html with unconpiled angularjs... From this, I came up with a unexpected conclusion that it's not a good time to implement ES6 for production.
Secondly, I would not count on what Google confidently announced that their bots can handle the websites with dynamic javascript frameworks like angularjs. Even if phantomjs works, 'Fetch as Google' tool doesn't give me a good result. Some times (actually very often) it resulted in just empty html file. Since still Ajax crawling is supported as a 'fall back', but more stable method, I would count it rather than counting on their very unstable smart bots.
In conclusion, DON'T BE EARLY ADOPTOR especially if you are making business out of it!! For angularJS SEO, (1) follow the Ajax calling guideline even if considered to be deprecated, (2) Don't use ES6 syntax for serious programming stuff.
Recently I've been setting up a development stack for React using Webpack (new for me) and of course wanted to benefit from all of the shiny conveniences that it provides (which are by the way great!). Among tons of resources I dug on the internet, the particularly good one I found was the React Webpack Cookbook, with which every step went like clockwork. However I stumbled across a hitch that has been taking me several hours to try to solve, not being able to find a solution in the aforementioned page, nor any other source: the expose-loader wouldn't expose React to global scope in Chrome (not tested on other browsers) therefore not allowing React DevTools extension to run. I tried mixing all the steps from the Cookbook, using different versions of React, minified/unprocessed, nothing worked.
The problem was trivial when discovered, but the source of the problem tricky to find: all the time I was using the localhost:8080/webpack-dev-server/ version of my development page, as suggested by the Cookbook, because it allowed me not to bother with the inability to inject <script src="http://localhost:8080/webpack-dev-server.js"></script> into html-webpack-plugin index file generator and provided sort of a nice status bar. It works perfectly since I switched to localhost:8080. Unfortunatelly I wasn't able to make it work with the localhost:8080/webpack-dev-server/ version, though I think it has something to do with the fact that under this url the page is loaded into a frame.
I am getting this error on page load itself.
Error: [Ext.extend] Attempting to extend from a class which has not been loaded on the page.
javascript//ext-4.1.1a/ext-all-debug.js
Line 4391
I'm not able to render the page at all. Any ideas?
I have also used extjs4 compatibility for migration.
Are you using all of the resources outlined here, including the screencasts? The videos take a little time commitment, but I think you'll find them quite helpful as they walk through several examples of how to debug exactly these types of issues. Learning to debug effectively will be the best way to tackle this type of migration.
There's no class named 'TreeNodeUI' in ExtJS. If you want treepanel, then you need to extend 'treepanel'. Please have a look at examples given on Sencha website before trying out any code.
I'm creating a mobile version of a website using jQuery mobile, but have found the vast majority of the built in functionality is broken.
The problem arises from my URLs, they look like this:
http://www.mysite.com/testurl/(S(3wlciqrhccimwx133y2sivxb))/Home/Logon.aspx
^^^
The bit in brackets is different for each session.
Any use of the back button, or ajax page loading causes this error:
Uncaught Syntax error, unrecognized expression: data-url='/testurl/(S(0f2xpaxk5131rsm1rkmantws])/Home/Index.aspx')
I really, really need help with this, I've bodged my way around most of the problems, but if I could just get the core functionality to work, my life would be a lot easier.
Cheers!
Following on from Alex K's advice, here's edited the edited jquerymobile.js file that allows brackets in the urls - hope it helps someone else:
http://jsfiddle.net/bazzlad/bWUsa/