I have a dilemma - my javascript code needs to be executed when the DOM is ready. However, at the same time I need to be able to hook up to the load event of another script. So hypothetically speaking I need something like this:
ExecuteOrDelayUntilScriptLoaded(getData, "sp.js");
function getData() {
(document.ready(function() {
//my code to get data from sharepoint list.
}));
}
Only the latter does not seem to work.
Please suggest!
Why not to do it like this?
$(document).ready(function() {
ExecuteOrDelayUntilScriptLoaded(function getData(){
//your code to get data from sharepoint list.
}, "sp.js");
});
Try
$(document).ready(function() {
$.getScript('sp.js', function() {
//your code to get data from sharepoint list.
});
});
For even more control over script loading, try a script loader like the simple and lightweight yepnope.js or the more complex LABjs.
If you are using jQuery, MooTools, or any other library - there is a standard function you can hook into, which checks if the DOM and your assets are loaded.
For example, in jQuery:
http://api.jquery.com/ready/
Related
I have Jquery function that executes AJAX query to server.
How can I call this after load page in the specified url page? May I bind this to element HTML, I mean:
<div id="graph" onload="function()"></div>
jQuery handles the HTML file with a variable called document.
Document has two popular event states
load when the page has been loaded
ready when the page has been loaded and all other decorations to the HTML have been applied.
jQuery provides hooks for these states.
To run javascript code after each of the events listed above, you have to put the function within the appropriate event scope.
For loading, this would be…
$(document).load(function() {
// javascript code you want to execute
})
After the page has been ready, but not yet rendered, you can apply some other javascript code using
$(document).ready(function() {
// javascript code you want to execute
})
One way using jQuery:
$(document).ready( function() {
//do whatever you need, you can check if some element exists and then, call your function
if($("#graph").length > 0)
callfunction();
});
No jQuery, only vanilla js:
window.onload = function() {
if(document.getElementById("graph"))
callfunction();
}
I have 2 external html pages loaded by this code:
<div id="header-div"></div>
<div id="footer-div"></div>
my js file contains this:
$(function () {
$("#header-div").load("/AfekDent/header.html");
$("#footer-div").load("/AfekDent/footer.html");
});
I want to run a function when specific element in the header file is created -
what trigger can i use for it?
It's ok the trigger will occur when all elements will be loaded.
thanks!
Add a callback to your load() call.
$(function () {
$("#header-div").load("/AfekDent/header.html", function() {
console.log('My header was loaded!');
});
});
You can use a callback on the #header-div, which will execute the code after the entire header has loaded.
$("#header-div").load("AfekDent/header.html", function() {
someFunction();
});
However, if you want to execute code after a specific element in the header loads, try something like:
$("#specific-element").on("load", function() {
someOtherFunction();
});
If you want to learn more about the difference between load and on("load"), look at this question or read the jQuery documentation for load and on().
For simplicity, I'd recommend executing code with $(document).ready(function() {yetAnotherFunction();});, but it depends on your specific case.
I need to learn how to initialize scripts. I have google it but dont dont really understand it.
Right now I have a toggle-script that is in a div, that entire div gets loaded in to another page. The toggle scripts work, but not when its loaded in.
$(".class").click(function () {
$(this).toggleClass("add_class");
});
If somebody have time, can you explain to me how to initialize this script?
Thanks.
You should put this script inside a document.ready call.
Eg.
$(document).ready(function() {
//Put your code here
});
If I misunderstood your question and what you actually mean is:
How do you execute the script after you load it in through an AJAX call.
Then see this question: executing script after jQuery Ajax Call
Are you calling it after the elements are loaded on the page?
You should be using on() with jQuery 1.7+
$(document).on("click", ".class", function () {
$(this).toggleClass("add_class");
});
If you want to keep your syntax, you would have to do it either after the elements are rendered, or do it on document.ready.
I figure you're using jquery.ajax to fetch the div?
If so, you should be able to add the listeners in the success-function of the jquery.ajax call:
$('#result').load('ajax/test.html', function() {
$("#result .class").click(function () {
$(this).toggleClass("add_class");
});
});
simple and best
$(function(){
//your code here...
$(".class").click(function () {
$(this).toggleClass("add_class");
});
});
I'm working in a Joomla environment but I think this is not the source of the problem.
I have a view which renders subviews (containing JavaScript code like <script type="text/javascript></script>) with AJAX. Problem is : the JavaScript code is ignored. I guess that's because it isn't in the document when it is loaded.
Here's the JavaScript code contained in one of the subview :
<script type="text/javascript">
window.addEvent('domready', function() {
$('annuler').addEvent('click', function() {
var a = new Ajax(
'{$url}',
{
method: 'get',
update: $('update')
}
).request();
});
});
</script>
Another basic example, if I load a subview with the following code in it, it won't work either :
<script type="text/javascript">
function test()
{
alert('ok');
}
</script>
<a id="annuler" onclick="test()">Annuler</a>
I'm getting the following error message : "test is not defined"
I can't find a solution to that problem so I'm starting to think that it is not a good way to use JavaScript...and, yes, I'm kind of new to event based JavaScript (with frameworks and so on).
I finally managed to put all the subviews and the JavaScript code into the same page. I'm using the CSS display property to hide/show a subview (<div>) (instead of loading it with Ajax).
Place the code you want to run in a function and call the function from an on ready block
EDIT:
Example:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
Found here: http://www.learningjquery.com/2006/09/introducing-document-ready
I'd like to conditionally load a set of javascript functions (which involve jQuery) on a given page.
The situation is that our site has a bunch of stuff that happens on $(document).ready (mostly fancy menu setup and a couple of CSS class manipulations), but one or two pages need more setup. It's enough code (and specific enough) that I don't want to just toss it into the main file, but rather just load it on those specific pages.
It seems that I can't do this by just loading a new file specific.js into those pages that contains
(function () {
$(something).click(function () { Stuff(happens); });
something(Else);
...
} ());
In the above example, something(Else); works fine, but .click and .bind don't seem to do anything. What I ended up doing is
function specificStuff () {
$(something).click(function () { Stuff(happens); });
something(Else);
...
};
and adding if(specificStuff) specificStuff(); to the main js file. It works, but it seems like there should be a better way of accomplishing this (ideally one that would keep all the changes in specific.js and not touch the general settings).
Is there a canonical way of conditionally loading js code to run in document.ready?
You can call $(document).ready(); multiple times in a web page/script file. Just wrap your jquery bindings as such in your specific.js file:
$(document).ready(function(){
$(something).click(function () { Stuff(happens); });
something(Else);});
You can load the page specific Javascript in the html of those pages, each script with its own document.ready function.
try removing the () when passing a function to document.ready:
(function () {
$(something).click(function () { Stuff(happens); });
something(Else);
...
} **()**);
with the (), it will execute right away and not wait for the document to be ready.
You can call the jquery document ready function as many times as you need. I think your issue is with how you've set up your function. If you're trying to call the ready function, it should be like this:
$(function () {
$(something).click(function () { Stuff(happens); });
something(Else);
...
});
Also, if the something elements are created by your main.js file, you should include it before your specific.js file.