The code below was fully working when it was placed inside <script></script> tags on the running page. I since moved the code to an outside .js file for organizational purposes which caused the code to stop working - nothing happens when certain events should be fired. I ensured that the script was being included on the given page, and furthermore, I ensured that the link was valid through "view-source" (when I clicked on the script's path, the script loaded in a new window).
The script declarations:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/main.js"></script>
So, what does my JS look like in this external file?
(function(){
$('#display-reply-box').click(function(){
$(this).hide();
$('#submit-reply-wrapper').show();
});
})(jQuery);
I removed most of the methods for readability, but that is how the file is setup. I ensured that there were no .js errors in the console, however, I did get the following errors regarding jQuery and Firelite
Failed to load resource: the server responded with a status of 404 (Not Found) http://getfirebug.com/releases/lite/skin/xp/pixel_transparent.gif
Failed to load resource: the server responded with a status of 405 (Method Not Allowed) http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
I would assume the above errors have something to do with the problem I'm experiencing, although I've had no luck getting them to disappear. At times the errors are there, other times they are not.
It seems as though you're attempting to run something on an element that might not have loaded in the DOM. Try wrapping it in a DOM Ready event handler like this:
(function($) {
$(document).ready(function() {
$('#display-reply-box').click(function(){
$(this).hide();
$('#submit-reply-wrapper').show();
});
});
})(jQuery);
Related
This is like 8 hours into this that I'm trying to fix it.
This might be a petty issue, but I'm not sure why in the world it isn't working.
I'm trying to refresh a div with jQuery.Load but it throws a weird 404 error. The page does exist and I'm not sure why it ain't taking it.
It was working well before when I hadn't added wordpress header files. Once I added them, it went haywire.
Here's my code
$( "#feed" ).load(window.location.href + " #feed" );
I've also tried this :-
$( "#tab1" ).load("http://example.com/community.php?#tab1" );
The JS code is written on the same file community.php
Here's the error :-
Failed to load resource: the server responded with a status of 404 (Not Found) community.php:1
All the examples I see have a space between the selector and the URL. Like so:
$("#tab1").load("http://example.com/community.php? #tab1");
Ref: http://api.jquery.com/load/ - "Loading Page Fragments"
Also, it seems problematic to load a fragment into a div that has the same id. If the space does not resolve the issue, try removing the #tab1 id from the page?
$("#tab1_target").load("http://example.com/community.php #tab1");
Also just noticing that ?... which seems odd as you are not passing any GET parameters. Not sure how well you copied your actual code into the question so this might all be moot.
I've got a stand alone script file that I want to load from a 3rd party server:
<script type="text/javascript" src="//some_server/logger.js"></script>
There's a small chance the remote script won't be there sometimes (404), and I want to be sure that including this script doesn't affect how my app operates, since my app doesn't require the script to be loaded to work (it's an analytics tracker of sorts)
Can I include this script safely without it blocking or causing javascript errors in my app that stops other javascript from running?
I was thinking of adding the async and defer attributes to make the script load lazily. Is this enough? My app needs to work on IE8 and above.
Here's what I'm thinking right now:
<script async defer type="text/javascript" src="//some_server/logger.js"></script>
<script type="text/javascript">
console.log("I want this to always execute, no matter if the above script 404's or not!");
</script>
Can I include this script safely without it blocking or causing
javascript errors in my app that stop other javascript from running?
YES you can
A 404 does not halt execution of javascript in any way, only errors do.
As long as the server responds with a 404, and doesn't hang, the script not loading won't cause any noticeable delay.
This can be tested in different browsers by logging the time it takes to check a 404 or broken link.
Just the fact that the browser logs the time, shows that such scripts does not halt execution of javascript, the thread always continues on to the next script tag unless the parser encounters an error in a script, if the URL isn't found, no browser will throw an error, it just goes on as soon as the URL is not resolved.
<script>console.time('Test');</script>
<script type="text/javascript" src="http://www.broken.url/file.js"></script>
<script>console.timeEnd('Test');</script>
FIDDLE
Testing in IE, Chrome, Firefox and Opera shows that all browsers use less than 0.0002 seconds to resolve a broken link, and the time it takes to resolve a 404 depends on how fast the server responds, but for Google's servers it seems to consistently be less than 0.2 seconds in all browsers before the 404 status code is returned, and the browser keeps executing the next scripts.
Even adding up 20 scripts that all return a 404 takes generally less than half a second for the server to resolve and move on
FIDDLE
In other words, you can safely add any script that has a broken link or returns a 404, it won't break anything, and it won't hang the browser in any way, it only takes a few milliseconds for modern browser to determine that the script can't be loaded, and move on.
What you can't do, is include scripts that actually load, and contain fatal errors, as that will stop the entire thread, and any execution of scripts that comes after the error is encountered.
Define all functions you use (which are in //some_server/logger.js) as empty functions before loading the script and you'll have no exceptions even if you use them without the script being loaded.
<script type="text/javascript">
functionInLogger = function() {
};
functionInLogger2 = function() {
};
...
</script>
<script type="text/javascript" src="//some_server/logger.js"></script>
<script type="text/javascript">
functionInLogger();
functionInLogger2();
console.log("This will always work");
</script>
And when the script is loaded, it'll override the empty functions.
I could not find any popular browser that will stop execution upon a 404. And W3 standard only states this; (W3)
When the user agent is required to execute a script block, it must run the following steps:
...
If the load resulted in an error (for example a DNS error, or an HTTP 404 error)
Executing the script block must just consist of firing a simple event named error at the element.
You can place that script on the bottom of the page (after all your important script), to make sure this will not block rendering of your page.
Or you can also load it after document ready, this method will not give extra load time when the script are not found. Example:
$(document).ready(function() {
$('head').append('<script type="text/javascript" src="//some_server/logger.js"></script>');
});
or use $.getScript method
$(document).ready(function() {
$.getScript('//some_server/logger.js', function(data, textStatus) {
/*optional stuff to do after getScript */
});
});
* in example above I assume if you are using jQuery
I think you should use something like RequireJS.
From Wiki:
It allow developers to define dependencies that must load before a module is executed, so the module doesn't try to use outside code that isn't yet available.
I have a Google +1 button on my site that requires the following script:
<script src="https://apis.google.com/js/platform.js" async defer></script>
The problem is as of today, apis.google.com can't be pinged from everywhere (servers are down) and some of my users don't see a button. I don't always want to use my own copy of the script because I can see that breaking the +1 functionality at some point. I'd like to use something like the solution from this question: my server's fallback copy should be fetched only when the CDN fails.
What's a good way to do that for this script? Is there a generic way to do this for any remote script using jQuery or plain js? Thanks in advance.
EDIT:
I tried jQuery getScript() and wrapped it in a function like this:
function fetch_script(script,fallback) {
$.getScript( script )
.fail(function() {
$.getScript( fallback );
});
};
This does not always work and is not reliable. Two problems I found:
500 errors trigger the fail method, but 404 errors do not and the fallback script is not loaded in these cases. Not sure what happens if the server is just down.
Some scripts are fetched (I see this in the console) but are somehow not executed (or they fail silently). Here's a script that doesn't work.
I am trying to use the jQuery.load() function, and it works on Firefox, but not on Safari and Chrome. The odd part is that it works on mobile Safari.
All of the posts I found on this subject appeared old and outdated.
Does anyone have a solution to fix this problem?
Here is sample code from my page:
<div class="navButton"></div>
<script>
$(".navButton").load("bottomNav.html");
</script>
The error console tells the story here.
Failed to load resource: the server responded with a status of 404 (Not Found)
http://yellowtailderby.com/jquery-2.1.0.js
Uncaught ReferenceError: $ is not defined
So, when you try to execute:
$(".navButton").load("bottomNav.html");
The $ symbol is not defined because jQuery is not successfully loaded.
The issue seems to be that this:
http://yellowtailderby.com/jquery-2.1.0.js
does not exist (gets a 404 error) so this script tag:
<script src="jquery-2.1.0.js"></script>
is not working properly. The fix is to either correct the script tag or make sure that particular file is properly located on your server at that path.
I am getting the exact same error in Firefox, so I suspect that maybe you have that file in your browser cache in Firefox (so it's getting loaded via cache), but it doesn't actually exist on the server. The Firefox reports:
"NetworkError: 404 Not Found - http://yellowtailderby.com/jquery-2.1.0.js"
My java script and jquery doesn't work on all of my pages.
It works on the home page http://www.steadfastdesignfirm.com/rgw but not when I go to any other page like http://www.steadfastdesignfirm.com/rgw/#index.php etc.
I have a javascript function that loads content from another page into a div dynamically (the div is #ajax) and only the scripts run on items within that div are not working. For example, you'll see the text resize tool when you visit the main page and it works just fine, but when you click on another main tab, it's completely disabled. I think the ajax is causing the elements to become disabled because they only load on document.ready. What other approach can I take to keep these scripts working?
Your syntax for the .load() method looks wrong. Refer to this:
http://api.jquery.com/load/
Should be something like
$('#ajax').load(url, function() {
//do hover binding
});
$('#ajax').load()(function(){
btn.js:1Uncaught TypeError: object is not a function
$(".btn").hover(function(){
$('.end-rght-h, .end-rght-v',$(this).parent()).addClass("hvr");
},
function(){
$('.end-rght-h, .end-rght-v').removeClass("hvr");
});
});
Something is breaking on that load somewhere..
Plus
Uncaught TypeError: object is not a function
doctors.jpgGET http://www.steadfastdesignfirm.com/rgw/BASE_URL/images/headers/doctors.jpg 404 (Not Found)
barazi.jpgGET http://www.steadfastdesignfirm.com/rgw/BASE_URLimages/pages/doctors/barazi.jpg 404 (Not Found)
berinstein.jpgGET http://www.steadfastdesignfirm.com/rgw/BASE_URLimages/pages/doctors/berinstein.jpg 404 (Not Found)
byrnes.jpgGET http://www.steadfastdesignfirm.com/rgw/BASE_URLimages/pages/doctors/byrnes.jpg 404 (Not Found)
deegan.jpgGET http://www.steadfastdesignfirm.com/rgw/BASE_URLimages/pages/doctors/deegan.jpg 404 (Not Found)
desai.jpgGET http://www.steadfastdesignfirm.com/rgw/BASE_URLimages/pages/doctors/desai.jpg 404 (Not Found)
Base url? Something incorrect there.. You need to debug your site big time man.
Like Research link
research.phpGET http://www.steadfastdesignfirm.com/rgw/research.php 404 (Not Found)