jQuery after load complete event - javascript

I'm using .load() and .show() to dynamically load some HTML.
//load the html
$('#mydiv').load('some_url');
// Display
$('#mydiv').show();
But here I need to call a JavaScript function that only exist in the dynamic content, how can I tell if the .load() is complete ?

Use the callback for .load:
$('#mydiv').load('some_url', function() {
// This gets executed when the content is loaded
$(this).show();
});

The load function get a callback function for complete
('#mydiv').load('some_url', function() {
alert( "Load completed." );
});
http://api.jquery.com/load/

$( "#mydiv" ).load( "url", function() {
alert( "Load was performed." );
});
reference load

$('#mydiv').load('some_url', function(responseText, textStatus, XMLHttpRequest){
console.log("Content Loaded!");
});
Look at this

Related

Switching between window.ready and window.ajaxComplete if data-attribute exist

If HTML has:
data-load-file
or
data-load-content
then use:
document.ajaxComplete
else
document.ready
At the moment I'm using two separate files to achieve this
$( document ).ready(function() {
//Small bit of code that loads files in
//5 lines of codes
});
//if data-load-file or data-load-content exist
//use $( document ).ajaxComplete(function() {
//else use $( document ).ready(function() {
$( document ).ajaxComplete(function() {
// or
$( document ).ready(function() {
//Lots and Lots of code that can be executed
//Lots and Lots of code that can be executed
//Lots and Lots of code that can be executed
//1000s of lines of code
});
<div data-load-file="menu-footers.html"></div>
You need both if script is in head and a simple if() to determine if such element exists..
function lotsOfCode(){
//Lots and Lots of code that can be executed
}
function smallBitOfCode(){
//Small bit of code that loads files in
}
// on page load determine which to execute
$(function(){// same as `$( document ).ready`
if ($('[data-load-file]').length || $('[data-load-content]').length){
$( document).ajaxComplete(lotsOfCode);
} else {
smallBitofCode();
}
});
Make sure any ajax is also inside $(function(){ }) and is called after the above code.
You can use $.holdReady() to prevent .ready() handler from being called, .is() to check is an element exists in document
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$.holdReady(true);
onload = function() {
if ($("[data-load-file],[data-load-content]").is("*")) {
$.holdReady(false);
} else {
// will be called
$(document).ajaxComplete(function() {
// do stuff
alert("ajax complete")
})
$.ajax()
}
// will not be called
$(document).ready(function() {
// do stuff
alert("ready")
})
}
</script>
<body data-do-not-load-file="" data-do-not-load-content="">do not load file
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$.holdReady(true);
onload = function() {
if ($("[data-load-file],[data-load-content]").is("*")) {
$.holdReady(false);
} else {
// will not be called
$(document).ajaxComplete(function() {
// do stuff
alert("ajax complete")
})
$.ajax()
}
// will be called
$(document).ready(function() {
// do stuff
alert("ready")
})
}
</script>
<body data-do-not-load-file="" data-load-content="">load file
</body>

How to reload script after ajax call?

I'm using infinite scroll and social share buttons after loading more results aren't appearing. I need to reload the script for the buttons to appear? I'm using the add to any plugin and they script is <script type="text/javascript" src="http://static.addtoany.com/menu/page.js"> </script> How do i reload this script so that the buttons appear? I added this code but only the facebook and twitter buttons appeared after ajax loaded new results not the google plus and pinterest...
jQuery('body').trigger( 'post-load');
How do i solve this?
You can use the .ajaxComplete(function().
$( document ).ajaxComplete(function() {
$( ".log" ).text( "Triggered ajaxComplete handler." );
});
See more here.
Or you can use the jQuery.GetScript()
$.getScript( "ajax/test.js" )
.done(function( script, textStatus ) {
console.log( textStatus );
})
.fail(function( jqxhr, settings, exception ) {
$( "div.log" ).text( "Triggered ajaxError handler." );
});
See more here.
$( document ).ajaxComplete(function() {
a2a.dom.ready(function(){a2a.init_all();a()});
});
or
$( document ).ajaxComplete(function() {
if(document.body){a2a.init();a()} a2a.dom.ready(function(){a2a.init_all();a()});
});

External javascript doesnt work when called using jquery's getScript()

I'm loading a page using jQuery's .load() function. The page I'm loading links to an external javascript file. So i try to execute that by calling getScript().
This is the code for loading the page:
<script>
$j(document).ready(function() {
$j( "#scriptin" ).load("home.html");
$j("#index").click(function(e) {
e.preventDefault(); // if desired...
$j( "#scriptin" ).load("home.html");
});
$j("#artists").click(function(e) {
e.preventDefault(); // if desired...
$j( "#scriptin" ).load( "artists.html" );
$.getScript("pix.js");
});
$j("#concert").click(function(e) {
e.preventDefault(); // if desired...
$j( "#scriptin" ).load( "storminateacup.html" );
$.getScript("stormload.js");
});
});
Now when the concert link is clicked, as you can see in the code I load storminateacup.html and after that i call the external script stormload.js
This is stormload.js
$( "#scriptintwo" ).load( "latest.html" );
});
$("#artists").click(function(e) {
e.preventDefault(); // if desired...
$( "#scriptintwo" ).load( "artists.html" );
});
$("#latest").click(function(e) {
e.preventDefault(); // if desired...
$( "#scriptintwo" ).load( "latest.html" );
});
$("#videos").click(function(e) {
e.preventDefault(); // if desired...
$( "#scriptintwo" ).load( "videos.html" );
This script doesn't seem to run. When i wrap it around a $document.ready() and open the link directly (i.e without using.load()) it works perfectly. But when i load it without document.ready nothing happens and when i load it with document.ready() only one of the clicks work.

$.get within a .click function

Not really sure where I'm going wrong with this one. I have a button element that when clicked, I want the following script below to be triggered. No issues seemingly in Chrome when I click the button but the file isn't fetched.
Am I missing something silly in my .click?
<script>
$( "button" ).click(function() {
$.get("testimg.php", function() {
alert("Success!");
});
});
</script>
Your code seems right. You need to make sure 2 things:
testimg.php (with m) file exists in the same directory.
The <button> is in the DOM when the script runs. I recommend using $(document).ready() event:
<script>
$(document).ready(function(){
$( "button" ).click(function() {
$.get("testimg.php", function() {
alert("Success!");
});
});
});
</script>
Working jsFiddle
Worth making it a jQuery.ajax call so you can trace errors.
$(function () {
$("button").click(function(e) {
e.preventDefault();
$.ajax({
url: "testimg.php",
success: function () {
alert("Success!");
},
error: function(x,y,z) {
alert(z);
}
});
});
});

How do I do this in JQuery? (get the HTML returned from AJAX-GET and turn it into an object)

$.ajax({
method:"get",
url:"/wall",
data:"ajax=1",
beforeSend:function(){},
success:function(html){
$("#grid_mason").append(html); //Add the next boxes to the Grid.
$(this).masonry({ appendedContent: $( html ), animate:false, resizeable:false });
});
}
});
http://desandro.com/demo/masonry/docs/appending.html
I'm using that Masonry plugin, and it kind of talks about appending.
If you have the masonry applied to #grid_mason then try changing the code from
$("#grid_mason").append(html);
$(thiz).masonry({ appendedContent: $( html ), animate:false, resizeable:false });
To this
$("#grid_mason").append(html)
.masonry({ appendedContent: $( html ), animate:false, resizeable:false });
Not sure I can suggest anything else without seeing more of the code.
I thinks you need to refactor your code as:
var thiz = this;
$.ajax({
method:"get",
url:"/wall",
data:"ajax=1",
beforeSend:function(){},
success:function(html){
$("#grid_mason").append(html); //Add the next boxes to the Grid.
$(thiz).masonry({
appendedContent: $( html ),
animate:false,
resizeable:false});
});
}
});

Categories

Resources