Using jquery I'm trying to load a html file(page.html) using jquery from an other subfolder(folder2\index.html) of the parent folder(project) ; but it gives the following error : "InternalError: too much recursion" .
Here is the hierarchy of the sample :
|-Project
|-folder2
| |-page.html (html to load)
|
|-folder1
|-index.html(page where the loading script is called from)
Here is the code I'm using
$( "#destination-ressource" ).load( "../folder2/page.html", function( response, status, xhr ) {
//do somthing
});
when xhr.statusText is inspected it gives the following message: "NS_ERROR_DOM_BAD_URI: Access to restricted URI denied"
I also tried to replace
"../folder2/page.html"
by
"./folder2/page.html"
but it doesn't work .
If your script are in separate file js then the relative path is from the path of that script, not from your html file
Related
I am trying to make a google extension that manipulates a video player. The problem is that the video player gets loaded with javascript and the injected javascript is unable to find the element, resulting in an error.
If you use jQuery, there is a very easy way to do this through getScript function. Just add the part of script that you need to be executed after the load and pass it as a parameter to the function.
$.getScript( "app.js" )
.done(function( script, textStatus ) {
console.log( textStatus );
//your remaining code
})
.fail(function( jqxhr, settings, exception ) {
//script fail warning if you want it
});
I am loading external content into a div element using jquery.load() without a selector. If the content loaded has embedded JS, the JS works as expected. HOWEVER, if the content includes a script tag with src=path-to-js-code the js-code is not loaded.
Am I correct in this observation and if so is there a good solution other than embedding the JS in the loaded content?
EDIT :
A few clarifications and observations:
To load the content I am using
$("#DivId").load("path/to/content.php", CallbackFunction(response, status, xhr) {
error checking and post processing code
});
Changing the load code to:
$.get("path/to/content.php", CallbackFunction(response, status, xhr) {
error checking
$("#DivId").html(response);
post processing
});
Does not seem to change the behavior (more on the behavior below)
I have not tried parsing the response to retreive the script src and then using getScript().
Now more on the behavior...
Using Firefox, it seems that the external JS is loaded but only if it has been about 2 min from the last load. I do not see an attempt in Firebug unless the refresh is about 2m after the last load of the external JS. (weird). When I was making JS code changes and hitting refresh, it was not loading my new code and thus the original question.
So i will withdraw my question in light of this clarified behavior (2m caching?).
Thanks.
Both the .load() and .html() jQuery methods utilise the .innerHTML property. This won't execute scripts added with <script> tag. Use a regular AJAX call e.g. .get() then in the callback use .append() to add your HTML string and the scripts will run once it's parsed e.g.
$.get("path/to/content.php", function(response, status, xhr) {
// error checking
$("#DivId").append(response); // Any <script> tags in the response string will execute
// post processing
});
Thing is you need to make sure you're running trusted code if it's added by .append()
I was wondering you can get the script src in the response text of $.load method with regular expressions, then use $.getScript() method to load the script, maybe something like this:
$("#DivId").load("path/to/content.php", function(response, status, xhr) {
var regexp = new RegExp('script.*?src="(.*?)"'),
execresults = regexp.exec(response);
if(execresults.length > 1)
{
// the first result is the entire match including
// the 'script..src=', so abandon it
var matches = execresults.slice(1);
$.each(matches, function(){
$.getScript(this, function(){
// do something after load script
});
});
}
});
Hope this can help
This is the easy way to load an external JS to your jQuery
$.ajax({
type: "GET",
url: "path/to/content.php",
dataType: "script"
success:CallbackFunction(response, status, xhr)
});
I am using following code to insert javascript files in template :
_.each([
"/assets/global/plugins/jquery-1.11.0.min.js",
"/assets/global/plugins/jquery-migrate-1.2.1.min.js",
"/assets/global/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js",
"/assets/global/plugins/bootstrap/js/bootstrap.min.js",
"/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js",
"/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js",
"/assets/global/plugins/jquery.blockui.min.js",
"/assets/global/plugins/jquery.cokie.min.js",
"/assets/global/plugins/uniform/jquery.uniform.min.js",
"/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js"
], function(script, ready) { jQuery.getScript(script, function (data, textStatus, jqxhr){
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Load was performed." );
})
});
I am getting following results (only one sample out of 10), all 10 files showing success messages :
(function(){var t=[].slice;!fu"[…] admin.js:63
"success" admin.js:64
200 admin.js:65
"Load was performed."
But when I see "View Generated Source" in Firefox developer tool, I can't see any inserted JavaScript files in html code. Can some one guide me what I am doing wrong and how it can be rectified.
The code works fine for me. jQuery.getScript() does not seem to change anything in the DOM, it simply runs the code virtually. Try adding a file that has console.log('test'); as its contents.
By the way, in your posted code, you are loading jQuery using jQuery's own function. For this jQuery must already be loaded. It seems that you need to rethink how you are loading your scripts.
Why do you using ajax calls?
Did you know, Meteor merges head Tags of all html files. So you can make as example a 'scripts.html' File with content:
<head>
<script src=...
</head>
Suppose I have a page such as the following
<html><head></head><body><!--STUFF-->
<script>
if(SomeBooleanVariable) {
$.getScript('js/file.js');
}
</script>
</body></html>
and my file.js file simply contains raw jQuery events with no wrapping. It is exactly as follows:
$(document).on("eventHere", "classHere", function(e) {
//Stuff
});
$(document).on("eventHere", "classHere", function(e) {
//Stuff
});
This is simply not working. When I include the contents of file.js directly into the HTML it works fine however the JS does not seem to be included properly. I have tried putting "alert(3);" at the top of file.js but it does not fire. I have tried the following:
$("head").append("<script src=\"js/file.js\" />");
$(document).append("<script src=\"js/file.js\" />");
-and-
document.write("<script src=\"js/file.js\" />");
If you want to load that .js file dynamically, change your code to this:
if(SomeBooleanVariable) {
$.getScript("ajax/test.js")
.done(function(script, textStatus) {
console.log(textStatus);
})
.fail(function(jqxhr, settings, exception) {
console.log("Triggered ajaxError handler.");
});
And see if you get any error in console
It may be, that you are, for example, using mod_rewrite and jQuery tries to load script relative to the "folder" your subpage is in. Example: you are # http://www.example.com/link-to-subpage/. In this case, jQuery will try to load http://www.example.com/link-to-subpage/js/file.js, while it resides # http://www.example.com/js/file.js. In this case, use an absolute path. So, instead of:
js/file.js
write:
/js/file.js
I'm using the Mootools History plugin to update the content of a page without requiring the page to be reloaded.
Everything works fine except for Mootools generating a 404 error (visible in the console) when an image is in the content being injected.
The content is gathered and set via a Request.HTML call as follows (simplified demo):
var request = new Request.JSON({
onSuccess: function(responseJSON, responseText) {
html = JSON.decode(responseJSON);
$('zone').set('html', html['text']);
}
});
The content is being set correctly however the .set('html', content) seems to generate a 404 error by rewriting the src attributes of images.
The urls look like this:
http://example.com/%22//files//images//ImageName.jpg/%22
Whilst the page source shows them as:
/files/images/ImageName.jpg
The 404 error refers to line 334 in the Mootools Core, though I can't see quite where that would cause the issue.
The solution is to use Request.JSON rather than Request.HTML and to access the JSON object directly rather than decoding it first.
i.e.
var request = new Request.JSON({
onSuccess: function(responseJSON, responseText) {
$('zone').set('html', responseJSON.text);
}
});
As suggested in part by #DimitarChristoff