Call function after ajax load?

Question

I have an ajax function that triggers when I click it.

$(document).ready(function(){

    $.ajaxSetup({cache:false});
    $(".post-link").click(function(){
        var post_link = $(this).attr("href");
        $("#main-content").fadeIn(500);
        $("#single-post-container").html('<img src="image.png">');
        $("#single-post-container").load(post_link);
                        return false;
    });          
});

But AFTER I've triggered it, I would like to call a new function. A function for a slideshow in jQuery. I've google alot and I see that if you put new functions in the "success: " section in ajax it will work.. But mine does not have an success section? I understand if I make you laugh, I'm as amateur as it gets! Haha. But Please, if you need more info, let me know.

Thanks!

(The function I'm trying to add is this:)

$(function(){


var width = 600;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;


var $slider = $("#slider");
var $slideContainer = $(".slides");
var $slides = $(".slide");
var $toggleRight = $("#right");
var $toggleLeft = $("#left");


$toggleRight.click(function(){
    $slideContainer.animate({'margin-left': '-='+width}, animationSpeed,     function(){
        currentSlide++;
        if (currentSlide === $slides.length) {
            currentSlide = 1;
            $slideContainer.css('margin-left', 0);
        }
    });
});

$toggleLeft.click(function(){
    if (currentSlide === 1) {
        currentSlide = $slides.length;
        $slideContainer.css({'margin-left': '-'+width*($slides.length-1)+'px'});
        $slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function() {
            currentSlide--;
        });
    } else {
        $slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function(){
            currentSlide--;
        });
    }
});




});

Answer 1

The problem is that load is asynchronous. The function call returns before the AJAX request is complete. If you have code that needs to be executed after the request is complete, you need to use the complete/success callback.

More Info

you can do like this.

$(document).ready(function(){

$.ajaxSetup({cache:false});
$(".post-link").click(function(){
    var post_link = $(this).attr("href");
    $("#main-content").fadeIn(500);
    $("#single-post-container").html('<img src="image.png">');
    $("#single-post-container").load(post_link, function( response, status, xhr ) {
   if(status=="success"){

     var width = 600;
     var animationSpeed = 1000;
     var pause = 3000;
     var currentSlide = 1;


     var $slider = $("#slider");
     var $slideContainer = $(".slides");
     var $slides = $(".slide");
     var $toggleRight = $("#right");
     var $toggleLeft = $("#left");


    $toggleRight.click(function(){
    $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
    currentSlide++;
    if (currentSlide === $slides.length) {
        currentSlide = 1;
        $slideContainer.css('margin-left', 0);
    }
});
});

   $toggleLeft.click(function(){
if (currentSlide === 1) {
    currentSlide = $slides.length;
    $slideContainer.css({'margin-left': '-'+width*($slides.length-1)+'px'});
    $slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function() {
        currentSlide--;
    });
} else {
    $slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function(){
        currentSlide--;
    });
        }
     });

     }
      if ( status == "error" ) {
        var msg = "Sorry but there was an error: ";
        $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
      }
                    return false;
   });          
});

Answer 2

You can call your new function in callback function of .load. For ex:

$("#single-post-container").load(post_link,function(){
    //Call new function here
});

Callback Function

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

Alongside you can check whether load was success or failed using status parameter from the callback function as below:

$("#single-post-container").load(post_link,function( response, status, xhr ) {
  if (status == "error" ) {
    var msg = "Sorry but there was an error: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
  else
  {
     //Call new function
  }
});

Answer 3

as mentioned in the documentation: "When a successful response is detected (i.e. when textStatus is "success" or "notmodified")"

$(document).ready(function(){

    $.ajaxSetup({cache:false});
    $(".post-link").click(function(){
        var post_link = $(this).attr("href");
        $("#main-content").fadeIn(500);
        $("#single-post-container").html('<img src="image.png">');
        $("#single-post-container").load(post_link, 
         function (responseText, textStatus, XMLHttpRequest) {
            if (textStatus == "success") {
              // all good!
            }
            if (textStatus == "error") {
              // oh noes!
            });
                            return false;
         });          
 });