When I dynamically load a script with jquery
...
options = {
dataType: "script",
cache: true,
url: "...appContr.js"
}
return jQuery.ajax(options);
...
and I debug the script with firebug, this script has the name "1" and everything is in
one line (or in a few lines). I cannot use this for debugging.
I use Firefox 10.0.2 and Firebug 1.9.1.
When I use LAB.js
$LAB.script("...appContr.js").wait(function() {
...
});
or require.js
The file has its line breaks and the name of the script is "appContr".
How can I change the jQuery command in order to get the same result?
Thanks a lot in advance
EDIT:
Thank you, Headshota, for your answer, but this does not help.
Besides, getscript does not cache the contents, and this is important for me.
EDIT:
Thank you, Marlin, for your answer:
The whole thing works without firebug enhancements when I load the script with lab.js or require.js, the problem is only with jquery script loading.
In firebug I have the tabs console, html, css, script, dom and network.
If I go - after jquery script loading - to script and view the script, there are no line breaks in the code.
But when I go to the "tab" console, I have one entry for the get request. When I click
"answer" in this get request, the script contains the line breaks. But this does not help me because in the "script" tag the line breaks are missing.
dataType: script tells jQuery.ajax() to interpret the response as JavaScript and evaluate it.
"script": Evaluates the response as JavaScript and returns it as plain
text.
An evaluated code basically has no file, line number and probably no white space. If you try to debug it in FireBug, it will probably tell you that it is "eval()ed" code.
JavaScript loaders such as LABjs work by injecting a <script src> tag in your document; it is easier for FireBug to debug because the JavaScript filename, file content and line numbers are all available.
I am not certain how to get the script's name right in firebug, but as to your other dilemmas there are a couple Firebug extensions you should consider
JS Deminifier 1.0.7 by Ben Murphy: This will expand your javascript into very readable code (but can lead to breaks if the javascript has been incredibly minified but that doesnt sound like it'll happen in your case). Just make sure that you turn on your addon bar which shows up below firebug and JSD is set to on (in the bottom left).
Another Good Option for Javascript debugging in Firebug...
FireRainbow 1.5 by BinaryAge: This provides javascript viewed in firebug with very helpful syntax highlighting.
Hope these tools alleviate your issues.
Related
I can't understand this for the life of me. I normally work with Python, but am trying to dabble a bit in web development with JQuery. I've used the CDN from google, and have done everything from putting the script below the footer (A site I found said that was the best spot), to moving it up into the header (every other site I've been to since says that is the best spot), and nothing works.
From the error in the inspection tools 'Loading failed for the with source “http://localhost:63342/HTML/Omnifood/resources/javascript/script.js”.' It suggests to me that it can't even find the .js file I created to hold my code, but it is there, defined. (See screenshots attached)
Any help getting this sorted out would be appreciated.
Screenshot of HTML and file structure, as well as error in inspection tool:
Edit: The issue has been resolved in so far as the folder has been moved to the correct location (/resources/javascript/script.js), I even went in and added type="text/javascript" to all the script files just in case. Now when attempting to run script with following JQuery code:
$(document).ready(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
})
});
I get the following errors in inspection tool:
The path is wrong http://localhost:63342/HTML/Omnifood/resources/javascript/script.js
your script.js is at
http://localhost:63342/HTML/Omnifood/vendors/javascript/script.js
We are trying to build a Windows 8 native application using JavaScript. We are using jQuery to dynamically load the javascripts files, and all the javascript files are stored inside of the app. When I try to debug the javascript, the breakpoint can't hit, saying "The breakpoint will not currently be hit....", but in the Solution Explorer, there is a Script Documents project, there is a file called "script block", which contains all the javascripts which are loaded from jQuery. I can debug from there after I disable the "Enable Just My Code", but it's difficult to find the right place to put breakpoint, since this file is huge...
Actually all the javascript files are having sourcemap attribute, for example: //# sourceURL=ms-appx://d664ef20-6ac8-11e4-ab78-2f4dc8b50d53/www/resources/abc.js
It is working fine with all the browsers, IE, Safari, Firefox and Chrome. But Visual Studio seems not be able to recognize them.
Anyone who has the same issue?
Regards,
Xiaojun
I expect you are doing this, which evals the contents as a string, causing the string to be added to the "eval code" file under Script Documents. Note, you can still set breakpoints, you just have to do it from the "eval code" document.
// eval via AJAX -- adds to the "eval code" document
$.ajax("./js/fileToAdd.js").done(function (data) {
window.eval(data);
});
If you load the file via a script tag, the script file is loaded separately and breakpoints bind as expected because the contents are tied to the file and not a string. Here's how:
// Add <script> tag to head -- Causes script file to be loaded/displayed individually
var scriptTag = document.createElement("script");
scriptTag.src = "./js/fileToAdd.js"
document.head.appendChild(scriptTag);
i want to put a soundcloud music player (http://stratus.sc/) on my drupalgardens page. i added an external source javascript library and uploaded a js file on the system as it says on the pluging website. all this tru the administration website of drupalgardens. When i check the sourcecode of my webpage it appears like the pluging is on the header. But it doesnt work, i cant see it. i activated all the jquery functions.
bit of sourcecode on header where the pluging seems there:
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script>
<script type="text/javascript" src="http://NAMEOFMYSITE/sites/NAMEOFMYSITE/files/js/js_PRNQJr2GPf-FrbaSuV5IDQ1l6Lfby6e79KpPOUTf5kI.js"></script>
link:
http://bit.ly/10nyAHV
Any suggestions?
Note : The player im talking about is NOT the one that can be seen under the rotating banner. the one im talking about its supposed to be globally on the webpage at its seem on the pluging oficcial webpage
For one you're getting this console error: "Uncaught SyntaxError: Unexpected token < "
Not sure how that script is getting added but just removing the script tags may clear it up.
Even if the frame errors mentioned by KG are unrelated, you have to go clean that all up.
Your script should also be loaded after jquery. Since it looks like you have js aggregation turned on, I don't really know how to determine if drupal is loading things correctly. You can just tell your script to load in the footer instead of header if you're unsure. The links below explain how to do that.
Here are some javascript related resources for Drupal. They sometimes expect things to be handled differently.
The plugin is dependent on jQuery. By default, Drupal 7 loads jQuery 1.4. You may need to use the jQuery Update plugin to use 1.5, 1.7 or 1.8
Drupal Community docs about javascript:
http://drupal.org/node/756722
Drupal javascript API:
http://drupal.org/node/751744
I had a similar issue. Some reasons for a not working player are:
For some reason $ is not known (although jQuery is included). I replaced '$' by 'jQuery' and everything worked fine. That means use jquery(document).ready(... instead of $(document).ready(... and jQuery.stratus({.. instead of $.stratus({...
There is a typo on the stratos.sc web site. It should read $.stratus not $stratus (or jQuery.stratus, see previous hint).
Check that the source stratus.js and the initialisation code is included.
Mixture of https and http might be a good guess as reason for problems, but actually it works (I just tried it). If you can't find the problem, try to use a JavaScript debugger and check the error logs first!
I'm getting the familiar '$ is not defined' error in my JavaScript for the following line in one of my javascript files...
$(document).ready(function() { … }
Normally this is because I've forgotten to include jQuery, but not this time! I have included it, and it is the first include in the page. This error happens in included JavaScript files, and also in any code within tags, all of which come after the jQuery include. It also doesn't happen all the time, maybe half the time when I refresh the page.
I've also used jQuery quite a lot and never seen this before, so I am quite confused.
Edit:
Looking at the Net tab in Firebug, jQuery is being requested and I get a 200 response but nothing is sent back in the response body. If I open the file directly in a new tab or whatever, I get an empty document. Firefox seems to think the file is cached but the data size is 0. Cache control is 'no-cache'. Confused.
Edit 2:
Opened jQuery file in VisualStudio, saved jQuery file with no modifications, everything works perfectly now. Still totally confused.
Are you sure that jQuery is actually being loaded into the browser? It sounds like it really isn't. You should use Firebug or Fiddler to check all the http requests to see if it is actually being downloaded.
Here's a screenshot of how you can check this using Firebug.
Are you using Wordpress or some sort of CMS? If so, their version of jQuery may have of code at the end which calls jQuery.noConflict(). You can read about this method here: http://api.jquery.com/jQuery.noConflict/
This means that whenever you want to use the $ function, you need to use jQuery instead.
For example...
Instead of
$("p").addClass("awesome");
You would do
jQuery("p").addClass("awesome").
I have an ASP.NET MVC project that uses some simple AJAX functionality through jQuery's $.get method like so:
$.get(myUrl, null, function(result) {
$('#myselector').html(result);
});
The amount of content is relatively low here -- usually a single div with a short blurb of text. Sometimes, however, I am also injecting some javascript into the page. At some point when I dynamically include script into content that was itself dynamically added to the page, the script still runs, but it ceases to be available to the debugger. In VS2008, any breakpoints are ignored, and when I use the "debugger" statement, I get a messagebox saying that "no source code is available at this location." This fails both for the VS2008 debugger and the Firebug debugger in Firefox. I have tried both including the script inline in my dynamic content and also referencing a separate js file from this dynamic content -- both ways seemed to result in script that's unavailable to the debugger.
So, my question is twofold:
Is there any way to help the debugger recognize the existence of this script?
If not, what's the best way to include scripts that are used infrequently and in dynamically generated content in a way that is accessible to the debuggers?
I can not comment yet, but I can maybe help answer. As qwerty said, firefox console can be the way to go. I'd recommend going full bar and getting firebug. It hasn't ever missed code in my 3 years using it.
You could also change the way the injected javascript is added and see if that effects the debugger you're using. (I take it you're using Microsoft's IDE?).
In any case, I find the best way to inject javascript for IE is to put it as an appendChild in the head. In the case that isn't viable, the eval function (I hate using it as much as you do) can be used. Here is my AJAX IE fixer code I use. I use it for safari too since it has similar behavior. If you need that too just change the browser condition check (document.all for IE, Safari is navigator.userAgent.toLowerCase() == 'safari';).
function execajaxscripts(obj){
if(document.all){
var scripts = obj.getElementsByTagName('script');
for(var i=0; i<scripts.length; i++){
eval(scripts[i].innerHTML);
}
}
}
I've never used jquery, I preferred prototype then dojo but... I take it that it would look something like this:
$.get(myUrl, null, function(result) {
$('#myselector').html(result);
execajaxscripts(result);
});
The one problem is, eval debug errors may not be caught since it creates another instance of the interpreter. But it is worth trying.. and otherwise. Use a different debugger :D
This might be a long shot, but I don't have access to IE right now to test.
Try naming the anonymous function, e.g.:
$.get(myUrl, null, function anon_temp1(result) {
$('#myselector').html(result);
});
I'm surprised firebug is not catching the 'debugger' statement. I've never had any problems no matter how complicated the JS including method was
If this is javascript embedded within dynmically generated HTML, I can see where that might be a problem since the debugger would not see it in the initial load. I am surprised that you could put it into a seperate .js file and the debugger still failed to see the function.
It seems you could define a function in a seperate static file, nominally "get_and_show" (or whatever, possibly nested in a namespace of sorts) with a parameter of myUrl, and then call the function from the HTML. Why won't that trip the breakpoint (did you try something like this -- the question is unclear as to whether the reference to the .js in the dynamic HTML was just a func call, or the actual script/load reference as well)? Be sure to first load the external script file from a "hard coded" reference in the HTML file? (view source on roboprogs.com/index.html -- loads .js files, then runs a text insertion func)
We use firebug for debug javascript, profile requests, throw logs, etc.
You can download from http://getfirebug.com/
If firebug don't show your javascript source, post some url to test your example case.
I hope I've been of any help!
If you add // # sourceURL=foo.js to the end of the script that you're injecting then it should show up in the list of scripts in firebug and webkit inspector.
jQuery could be patched to do this automatically, but the ticket was rejected.
Here's a related question: Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?