I want to use a function on my html page but the content is delivered via ajax, how do I first load the script and then apply the function ? It won't work if I include the script in my <head> . Also how can I use the jQuery .find() and and apply a function or modify the css for content that has been delivered after the page has loaded ?
LABjs(http://labjs.com/) has an awesome interface for that. Here's an example code.
<!-- In the head -->
<script src="lab.js"></script>
<!-- In the body -->
<script>
$LAB
.script("yourscript.js")
.wait(function(){
yourfunction();
});
</script>
In the above example, the yourfunction(); will only be called after the script yourscript.js has been loaded.
Edit: After an ajax call using the .load method, this is how your body script might look like.
<script>
$('taggetelmselector').load(your_url, data, function(){
$LAB
.script("yourscript.js")
.wait(function(){
yourfunction();
});
});
</script>
See http://api.jquery.com/load-event/
jQuery has this functionality built in to the getScript function.
$.getScript('yourscript.js', yourfunction);
Related
so, I have a script like this
<script>
$(document).ready(function() {
$('#lista').load('gifs/1.php').fadeTo( "slow" , 1);
});
</script>
<script src="arqs/main.js"></script>
<ul id="lista"></ul>
main.js:
$(document).ready(function() {
var DOMarr=$('#lista li').map(function(){return this;});
var clip = new ZeroClipboard(DOMarr);
})
the problem is, zeroclipboard is not "injecting" the flash file when I use .load(), if I use php include it works normally but when I switch to load it does that :(
does someone knows a workaround?
I'll need to use load to switch the list, and I'd like zeroclipboard to allow copying from the new list
.load is an asychronous call so .ready may be executed before. Make sure the list is loaded before doing the ZeroClipboard call.
I have this jQuery script in my web page:
<script>
$(function() {
function callAjax(){
$('#lastlogins').load("ur.php");
}
setInterval(callAjax, 1000 );
});
</script>
But, in container lastlogins, there isn't shown file ur.php, it is just empty. I have created div like that:
<div id="lastlogins">
</div>
I don't see any wrong on your code. Only problem would be with your ur.php file. Just try to access your file directly and see, if that works.
In the meanwhile, refer my sample code.
<script>
$(function() {
function callAjax(){
$('#lastlogins').load("/SivaCharan/EGxWL/show");
}
setInterval(callAjax, 1000 );
});
</script>
<div id="lastlogins">
</div>
Refer my LIVE DEMO
After a quick review of the .load function, there can only be one possibility... your PHP file is not returning anything useful. Run it directly in a browser and make sure it returns valid HTML.
Your jQuery function is correct as is.
I have a main (index) page which loads pages dynamically and places them inside it's div but the Javascript within those pages doesn't execute. Specifically this part
<script type="text/javascript">
$(document).ready(function(){
$('#regForm').submit(function(e) {
register();
e.preventDefault();
});
});
</script>
You will have to use getScript like this:
$('#foo').load('bar.html', function(){
$.getScript("js/fileName.js");
// call a function from fileName.js
});
You will have to put your JS code in that file and call that via getScript and then you can call functions from it as shown above.
Write your javascript in the index.php or write at the bottom of loaded page without document.ready
This is in reality a cross-browser issue: When <div>s are dynamically filled with HTML containing <script> tags, these scripts may or may not run - and this behaviour is different not only between browsers, but also between browser versions.
The only workaround I know of is to extract your JS, send it seperately and execute it after the <div> content has been set.
Consider the following code:
<script src="js/backgroundChanger.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.Themes').click(function(){
$('#dcontent').load('printThumbs.php');
});
});
</script>
The first script is for background changing logic and the second script gives list of thumbnails of the themes. The problem is that the first script doesn't work beacause of the second. If I don't use this AJAX technique everything works fine. Working code:
<script src="js/backgroundChanger.js" type="text/javascript"></script>
<div id="dcontent">
<?php include('printThumbs.php'); printThemesThumbs();?>
</div>
The background changing logic looks like:
$(function() {
$('.themes li a img').click(function() {//code
});
Any help will be greatly appreciated.
in your first snippet of the code you defined a click function on .Theme and in the third snippet of the code .theme, is this correct?, i mean both classes seems to be different try to use the same class name return by your php function.
You're calling $(document).ready() twice, as $() is an alias, and the second definition is overwriting the first. First you are setting the document ready callback to
function() {
$('.themes li a img').click(function() {//code
}
and then overwriting it with
function() {
$('.Themes').click(function(){
$('#dcontent').load('printThumbs.php');
});
}
you have to add your second code in a callback function. you can't bind something if it is not already in the dom. if you want to make changes to the printThumbs output you need to add a callback...
<script>
$(document).ready(function() {//this is also a callback function when document is ready
$('.Themes').click(function(){//this can be understand as a call back too... code is fired after a click
$('#dcontent').load('printThumbs.php',function(){/*your callback code here...this code will be fired after you've loaded printThumbs*/}
});
});
</script>
if you want to do some jquery or other client side stuff on the respons of an ajax call (html,xml, json or whatever) you have to specify a callback function. to make things less complicated you have to look at the callback function just as the on document ready function with the difference that the callback is applied to the respons of your ajax call. if the code is not in a callback function you can't manipulate the respons because it is not injected in the dom/it simply does not exists in your browser when the document is ready.
I'm not brilliant with AJAX but could somebody please write me a quick code for switching a DIV tag with an external page.
For example:
<script type="text/javascript">
// Fun Stuff Here //
</script>
<div id="random">HIDDEN</div>
It would be AWESOME if the content could fade-in when it's loaded.
Ok, I have this so far (but it doesn't seem to be working):
<ul>
<li>ss3</li>
<li>ss4</li>
</ul>
<script type="text/javascript">
$(function(){
$("a.load").click(function (e) {
e.preventDefault();
$("#folioWrap").load($(this).attr("href"));
});
});
</script>
<div id="folioWrap"></div>
You may want to try this JavaScript AJAX loader jQuery plugin that can load page elements content via AJAX and it alters all the links in such way that when you click on the links of the AJAX loaded content, the new page element content is also loaded via AJAX.
I suppose you can hack it to add any fade transition effects when the new page element is loaded.