How to reload script after ajax call? - javascript

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()});
});

Related

Adding selectmenu on select that's calling functions

I have a script that loads html content to a div and applies jquery tabs at the same time. However, I want to get JQuery Selectmenu on my select at the same time.
I'm having trouble figuring out how to nest these.
I'll be continuing looking at the API Docs, and tutorials, stackoverflow etc.
BUT, In the meantime, I thought someone could help expedite the process.
This is my script as is:
$(function() {
var work = $( "#display" );
$( "#selector" ).change(function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
This script works just like i want it to, but It doesn't get styled with my theme because it's not a selectmenu
I want my select to use selectmenu:
$(function() {
$( "#selector" ).selectmenu();
});
Attempt 1:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu(
$( "#selector" ).change(function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
);
});
});
});
Attempt 2:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu({
change: function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
});
Attempt 3:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu({
change: function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
});
Attempt 4:
This attempt loads the selectmenu theme, but kills functionality
$(function() {
$( "#selector" ).selectmenu();
});
$(function() {
var work = $( "#display" );
$( "#selector" ).change(function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
Attempt 5:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu ({
selectmenuchange: function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
}
});
});
So, i went back to the Jquery Documentation and found the correct syntax to make this work. I also learned a little more about how to use the console tab in developer tools view to track down syntax errors.
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu ({
change: function( event, data ){
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
}
});
});

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.

Why does jQuery triggers load event for dynamically loaded css files, but not for javascript files?

Consider the following codes:
Load JS
$( "<script src=\"test.js\"><\/script>" ).on( "load",
function() {
console.log( "JS LOADED" );
}
).appendTo( $( "head" ) );
Load CSS
$( "<link rel=\"stylesheet\" href=\"test.css\" />" ).on( "load",
function() {
console.log( "CSS LOADED" );
}
).appendTo( $( "head" ) );
Can someone please explain me why the load event will not trigger for the js file. And what should be done to make it work ?

Calling a jQuery function multiple times

So, I have this function in jQuery:
$(function(){
$( ".unfocused" ).click(function ClickHeader () {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
});
It works perfectly when a header is clicked the first time, but when I try to click another unfocused header, the function doesn't work anymore. Is it because it runs on document .ready?
Thanks for your help!
Change it like this:
$( document ).on("click", ".unfocused", function() {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
This basically registers the event on the document. When you click a header, the event bubbles up to the document. There, the given selector is validated and the function is executed if needed.
Here is a jsfiddle using the delegate operation for handling the event like you need.
http://jsfiddle.net/MN9Zt/2/
$("body").delegate(".unfocused", "click", function() {
$(this).addClass("focused");
$(this).removeClass("unfocused");
$(".header").not(this).addClass("unfocused");
$(".header").not(this).removeClass("focused");
});

jQuery click event not firing after a different click event has been used

I am completely lost here, I have no idea as to why this is happening.
I have the following code in a .js file:
$( document ).ready(function() {
showMessage();
$( '#message' ).slideDown( 'fast' );
//Hide Message//
$( '#m_close' ).click(function( event ) {
$( '#message' ).slideUp( 'fast' );
});
//---//
$( '#m_button' ).click(function( event ) {
showMessage();
$( '#message' ).slideDown( 'fast' );
});
});
Now, the message div is created and slides down perfectly fine when the page first loads. When I press #m_close, the div slides up perfectly. However, if I press #m_button, the message slides down with all the right info, but pressing #m_close does absolutely nothing. I get no errors in the dev console, nothing seems to go wrong, it just refuses to work. I added a slideDown to the #m_close so that it would close then reopen, and it does that, and the #m_close will work infinitely, until #m_button is pressed.
What is going on?
EDIT: my HTML per request:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="includes/style.1.css" rel="stylesheet" type="text/css" />
<script src="includes/jquery.js"></script>
</head>
<body>
<div id="message">
</div>
<button id="m_button">Message</button>
<script src="includes/functions.js"></script>
</body>
Looks like the message is loaded dynamically and the m_close might be added to the message element using showMessage() method.
so try
$( document ).ready(function() {
showMessage();
$( '#message' ).slideDown( 'fast' );
//Hide Message//
$( '#message' ).on('click', '#m_close', function( event ) {
$( '#message' ).slideUp( 'fast' );
});
//---//
$( '#m_button' ).click(function( event ) {
showMessage();
$( '#message' ).slideDown( 'fast' );
});
});
when you use click to register a click event handler, it register the handler to only those elements that exists in the dom at that moment. when you call showMessage again teh existing m_close is removed and a new one is created so the click handler is no more attached to the new element. The solution here is to use event delegation as shown above

Categories

Resources