Callback in Javascript ~ how can I trigger an event after a function is finished?

Question

I need to be able to complete running the doGET() function that will stamp out my new thumbnails BEFORE I save my blogposts. I've been tipped off that CALLBACK is what I need, but I think I'm too stupid to understand how it works :P How can I make the button click after the doGET() function is completely finished?

    $('#xmlbutton').click(function() {
    doGET();
    document.getElementById("save-post").click();  
    })



    function doGET() {

    // Get the URL of featured image

    // Fetch the right Image URL from FEATURED image and rename it to the FOUR image instances... ;)
    var src = $('#set-post-thumbnail img').attr('src');
    var src = src.slice(0, -12);
    var imgsrc = src + ".jpg";

    var img1 = src + "_thumb_one.jpg";
    var img2 = src + "_thumb_two.jpg";
    var img3 = src + "_thumb_three.jpg";

    // Put Url of Thumbnail Images in the Boxes
    document.getElementById('imageurl').value = src ;
    document.getElementById('thumb_url_1').value = '<img src="' + img1 + '">' ;
    document.getElementById('thumb_url_2').value = '<img src="' + img2 + '">' ;
    document.getElementById('thumb_url_3').value = '<img src="' + img3 + '">' ;     


    // Save the Draggable info, please!
    var im1_top = document.getElementById('image_mover_1').style.top;
    var im1_left = document.getElementById('image_mover_1').style.left;             

    document.getElementById('image1_adjust_top').value = im1_top;
    document.getElementById('image1_adjust_left').value = im1_left;

    var im2_top = document.getElementById('image_mover_2').style.top;
    var im2_left = document.getElementById('image_mover_2').style.left;             

    document.getElementById('image2_adjust_top').value = im2_top;
    document.getElementById('image2_adjust_left').value = im2_left;

    var im3_top = document.getElementById('image_mover_3').style.top;
    var im3_left = document.getElementById('image_mover_3').style.left;             

    document.getElementById('image3_adjust_top').value = im3_top;
    document.getElementById('image3_adjust_left').value = im3_left;


    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }

    xmlhttp.onreadystatechange=function() //This part is actually executed last
    {
       if (xmlhttp.readyState==4 && xmlhttp.status==200) // Was the request processed successfully?
       {
            document.getElementById("sampleDiv").innerHTML=xmlhttp.responseText;
       }
    }


    // Write the XML url string
    var baseurl = "thumbgen.php?";

    var left1 = "&left1=" + document.getElementById('image_mover_1').style.left;
    var left2 = "&left2=" + document.getElementById('image_mover_2').style.left;
    var left3 = "&left3=" + document.getElementById('image_mover_3').style.left;

    var top1 = "&top1=" + document.getElementById('image_mover_1').style.top;
    var top2 = "&top2=" + document.getElementById('image_mover_2').style.top;
    var top3 = "&top3=" + document.getElementById('image_mover_3').style.top;

    var imgwrap1 = "&imgwrap1=" + parseInt(document.getElementById('image_mover_1').getElementsByTagName('img')[0].offsetWidth);
    var imgwrap2 = "&imgwrap2=" + parseInt(document.getElementById('image_mover_2').getElementsByTagName('img')[0].offsetWidth);
    var imgwrap3 = "&imgwrap3=" + parseInt(document.getElementById('image_mover_3').getElementsByTagName('img')[0].offsetWidth);        

    var height1 = "&height1=" + document.getElementById('no_1_image').style.height;
    var height2 = "&height2=" + document.getElementById('no_2_image').style.height;
    var height3 = "&height3=" + document.getElementById('no_3_image').style.height;


    var imgurl = "&imgurl=" + $('#image_mover_1 img').attr('src');
    console.log( 'imgurl ~ ', imgurl );

    var fullurl = baseurl + left1 + left2 + left3 + top1 + top2 + top3 + height1 + height2 + height3 + imgwrap1 + imgwrap2 + imgwrap3 + imgurl;
    console.log('fullurl ~ ', fullurl );                   


    xmlhttp.open('GET', fullurl );
    xmlhttp.send();

    };

http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Sacho, Jul 20 '13 at 06:53

Shiplu Mokaddim · Answer 1 · 2013-07-20T07:00:42.057

You can add a callback parameter to your doGET function which doGET executes once a desired event occurs.

function doGET(callback){
     .....
     // Event occurs here. So call it
     callback();
}

To make it work call doGET like this.

doGET(function(){
    console.log("my event occured")
});

In your case the event is everything is finished. If it was just normal function call you could have call the callback() at the very end of doGET. But you are sending an ajax request. So it should be called when ajax is completed Unless you want it to be fired somewhere else. For this add callback() at the very end of the function in xmlhttp.onreadystatechange. Something like this,

  xmlhttp.onreadystatechange=function() //This part is actually executed last
    {
       ...
       ...
       callback();  //call your callback method

    }

score 1 · Answer 2 · answered Jul 20 '13 at 06:53

You are making an asynchronous AJAX call in you doGEt() method, thats why the click is fired earlier than the the method completes.

you can make a call back method like.

    $('#xmlbutton').click(function() {
    doGET(function(){
        document.getElementById("save-post").click();  
    });
    })



 function doGET(CallBack) {

    /*----your code ----*/


    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }

    xmlhttp.onreadystatechange=function() //This part is actually executed last
    {
       if (xmlhttp.readyState==4 && xmlhttp.status==200) // Was the request processed successfully?
       {
            document.getElementById("sampleDiv").innerHTML=xmlhttp.responseText;
            if(CallBack) CallBack(); //call your callback method
       }
    }

 /*----your code ----*/

    xmlhttp.open('GET', fullurl );
    xmlhttp.send();

    };

i guess this is what you wanted..

score 1 · Answer 3 · answered Jul 20 '13 at 06:54

Callbacks in javascript are really just function references that you pass and execute them at some point in the code.

Here is a snippet/sample implementation of a callback for your scenario:

$('#xmlbutton').click(function() {
    doGET(afterGET); // pass afterGET (the callback) to doGET 
    document.getElementById("save-post").click();  
});


// doGet now accepts a single parameter: the reference to the function that is called back.
function doGET(theCallback) { // notice "theCallback" is a variable/reference here, do not use ()

    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }

    xmlhttp.onreadystatechange=function() { //This part is actually executed last
        if (xmlhttp.readyState==4 && xmlhttp.status==200) { // Was the request processed successfully?
            document.getElementById("sampleDiv").innerHTML=xmlhttp.responseText;
            theCallback(xmlhttp.responseText); // execute the callback, in this example it is a reference to afterGET, use () to execute
        }
    }

    xmlhttp.open('GET', fullurl );
    xmlhttp.send();

};

// the function definition for the callback (what you want to do when it is done)
function afterGET(text) {
    console.log('complete.',text);
}

I enhanced this example to include passing an informative argument to the callback. You don't really need this; think of it as a bonus.

score 1 · Accepted Answer · answered Jul 20 '13 at 07:02

Oboy, looks a little messy, so I changed it a bit :

$('#xmlbutton').on('click', function() {
    doGET().always(function() {
        $("#save-post").trigger('click');  
    });
});

function doGET() {
    var src  = $('#set-post-thumbnail img').attr('src').slice(0, -12) + ".jpg",
        img1 = src + "_thumb_one.jpg",
        img2 = src + "_thumb_two.jpg",
        img3 = src + "_thumb_three.jpg",
        im1  = $('#image_mover_1').position(),
        im2  = $('#image_mover_2').position(),
        im3  = $('#image_mover_3').position();

    $('#imageurl').val(src);
    $('#thumb_url_1').val('<img src="' + img1 + '">');
    $('#thumb_url_2').val('<img src="' + img2 + '">');
    $('#thumb_url_3').val('<img src="' + img3 + '">');     
    $('#image1_adjust_top').val(im1.top);
    $('#image1_adjust_left').val(im1.left);
    $('#image2_adjust_top').val(im2.top);
    $('#image2_adjust_left').val(im2.left);
    $('#image3_adjust_top').val(im3.top);
    $('#image3_adjust_left').val(im3.left);

    var data = {
        left1   : im1.left, top1: im1.top,
        left2   : im2.left, top2: im2.top,
        left3   : im3.left, top3: im3.top,
        imgwrap1: $('img', '#image_mover_1').get(0).offsetWidth,
        imgwrap2: $('img', '#image_mover_2').get(0).offsetWidth,
        imgwrap3: $('img', '#image_mover_3').get(0).offsetWidth,
        height1 : $('#no_1_image').height(),
        height2 : $('#no_2_image').height(),
        height3 : $('#no_3_image').height(),
        imgurl  : $('#image_mover_1 img').attr('src')
    }

    return $.ajax({
        url : 'thumbgen.php',
        data: data
    }).done(function(data) {
        $('#sampleDiv').html(data);
    });
}

Wow! Thanks bro! I'm kind of new in the game, so it's cool to see how you cleaned the code :) — 2famous.TV, Jul 20 '13 at 07:06
@2famous.TV do you know why the clean up and why it works? If not it'll not help you in future. You'll end up asking for help again. — Shiplu Mokaddim, Jul 20 '13 at 07:08
@shiplu.mokadd.im Of course. I learn so much every day, and I spend hours of googling and testing before I come here and ask for help. Over the last year I've learnt mostly PHP as I've focused on creating an optimized user experience of my website. Now I'm working on the editor, where I allow myself to play with javascripts. It's pretty heavy and amateurish, but as soon as I get it to work completely, I will look into how I can clean up the text and make it efficient. So, yes, I learnt a lot by posting this question, and I'd like to thank those who helped me. Thanks! — 2famous.TV, Jul 20 '13 at 08:32

Callback in Javascript ~ how can I trigger an event after a function is finished?

4 Answers4