So I basically have a load that loads the file to an id and when that load is done I want to load another file to an id which is inside the first load.
Does it sound a bit weird?
We can add a bit of code to describe it easier.
function interestsList() {
$('.interests_editlist').fadeIn(500).load('/snippets/interests_edit.php');
}
That is how it looks right now. I want to add this line
$('#interests_list').load('/snippets/interests_list.php');
but if I just add it, it doesn't load. The reason might be that it tries to load before the load above is done. That is a problem because #interests_list is loaded with the first load.
How do I make the second load to start loading when the first one is finished?
load() method accept a complete callback:
function interestsList() {
$('.interests_editlist').fadeIn(500)
.load('/snippets/interests_edit.php', function () {
$('#interests_list').load('/snippets/interests_list.php');
});
}
you can use .load() callback to know when load is complete
try this:
function interestsList() {
$('.interests_editlist').fadeIn(500).load('/snippets/interests_edit.php', function() {
//callback function when the first load is complete
$('#interests_list').load('/snippets/interests_list.php');
});
}
Related
index.html page :
I am loading the new.html page using ajax load method and then tried to change the content of the div#rr but it did not work!
any solution ?
why your code $('#rr').html('modfied'); is not working because you are calling the change before jquery ajax.load() method is able to load the content from your new.html and as result your id #rr is not found. So, instead of calling the modify code after the load statement call the modifying statement in your load()'s complete()
as:
$('#btn').on('click', function () {
$('.container').load('new.html', function () {
$('#rr').html('modfied');
});
});
and please go through the jquery documentation for more info on how to use the functions Jquery Documentation for Load() funciton.
Try to call the function inside the ajax call function.
$('.container').load('new.html',function(){
$('#rr').html('modified')
});
next time please do not put image for code.
I have a javascript function, "loadFramework()" that modifies an HTML document. Specifically, it repeatedly runs the jQuery command $("#element-id").load("document/name.html"), which injects the HTML in document/name.html directly into the element with #element-id.
Originally, I ran loadFramework() in a script in the document's header. However, since then I've realized that the function fails if the page has not loaded yet, since it relies on there being an element with #element-id.
I can't figure out how to get this function to run when it should. A simple solution seemed to be setting it to be the document.onload function:
document.onload = function() {
loadFramework();
}
But in this case it never seems to run at all.
How do I make sure a header function runs only after the document has loaded?
You should use window.onload if you are looking for a vanilla JS option
window.onload = function() {
loadFramework();
}
Jquery load takes additional argument "complete". You can run the javascript there. So the code would be:
$("#element-id").load("document/name.html", function(){
loadFramework();
});
You can also use $(document).ready(function{loadFramework()}) inside the html you are loading.
If you want to execute the loadFramework() method after "document/name.html" is loaded, I would suggest the following code.
$(function() {
$("#element-id").load("document/name.html", function(){
loadFramework();
});
});
Am currently using head.js to defer loading of js files for my website. Am using colorbox in my project. The problem is that at times, the colorbox doesnt fully load (it opens the colorbox in a new page rather than in a dialog), but when i do several refreshes, it finally loads.
I guess it might be that the page content that is meant to open the colorbox dialog gets loaded even before colorbox js files are fully loaded by head.js. Is this the actual cause?
I would want to have colorbox display correctly each time without need for a refresh.
How do I keep the colorbox page code to execute only after head.js finishes loading all its dependent files?
thanks. nikk
Put your colorbox html code in a div.
<div id="colorBoxDiv" style="display:none;">
</div>
In the last line of head.js, add this code:
$("#colorBoxDiv").html($("#colorBoxDiv").html()).show();
head.js had a lot of different options how to do that. you can run callback function when needed files loaded, or use test feature api call.
For example:
// queue scripts and fire a callback when loading is finished
head.load("file1.js", "file2.js", function() {
// do something
});
// same as above, but pass files in as an Array
head.load(["file1.js", "file2.js"], function() {
// do something
});
// you can also give scripts a name (label)
head.load({ label1: "file1.js" }, { label2: "file2.js" }, function() {
// do something
});
// same as above, but pass files in as an Array
head.load([{ label1: "file1.js" }, { label2: "file2.js" }], function() {
// do something
});
// Labels are usually used in conjuntion with: head.ready()
head.ready("label1", function() {
// do something
});
// Actually if no label is supplied, internally the filename is used for the label
head.ready("file1.js", function() {
// do something
});
More in documentation
I am running a bit of code once the page load so in the footer i have got:
$(function(){
//code to run on page load
});
But then i need to stop that code to run on a
.click()
I was thinking of having a custom function which runs on page load and then be able to disabale that function on a click.
How to create a custom function which i can turn it off on a click?
A simple way would be to add a flag/preference variable to your page, which dictates which logic can be executed and when.
Whenever code is then executed, just check the preference, i.e.
function myfunction () {
....
if (code_may_run) {
....
code_may_run = false;
}
....
}
I have ONE external JavaScript file containing jQuery, Cufon, fonts, and the replace functions. I need this file to be loaded twice once on page load and again 3 seconds after page load. Is this possible?
Don't load it twice. Wrap what you have in it into a function, then call the function once when it loads, and once more after three seconds. For example, you might have something like this in your JavaScript file:
doSomeProcessing();
doSomeMoreProcessing();
Change it like this:
function myJavaScriptFile() {
doSomeProcessing();
doSomeMoreProcessing();
}
setTimeout(myJavaScriptFile, 3000);
myJavaScriptFile();
I don't think you need to load it twice. How about the following?
setTimeout(function(){Cufon.refresh();},3000);
disclaimer: I know nothing about Cufon and gleaned my knowlege from here
setTimeout(jQuery.getScript( url, [ success(data, textStatus) ] )),3000);
http://api.jquery.com/jQuery.getScript/