I need to be able to plete 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 pletely 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();
};
I need to be able to plete 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 pletely 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();
};
- stackoverflow./questions/14220321/… – Sacho Commented Jul 20, 2013 at 6:53
4 Answers
Reset to default 3You 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 pleted 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
}
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);
});
}
You are making an asynchronous AJAX call in you doGEt() method, thats why the click is fired earlier than the the method pletes.
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..
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('plete.',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.