Question

I am trying to vertically align a picture, that is returned from the ajax but when I do that on the pictures (HTML) returned from ajax, it does not apply. Here is my code:

$.ajax({
    type: "POST",
    url: "extra.php",
    data: mystr,
    cache: false,
    success: function(html) {
        $('.mydiv').empty();
        $(".mydiv").append(html);
        middle_align();     
    }
});

here is what i am appending

echo '
<div id="box">
<img src="'.$path.$name.'.jpg"  class="loadimg" />
                </div>  ';

and here is the middle align function

function middle_align(){
     var child = $(".loadimg").height();
     var parent = $("#box").height();
 var margin = (parent - child)/2;
  $(".box").children("img").css('margin-top', margin); 
                    }

The function works well everywhere else but not on the data loaded by ajax. Kindly help.

Answer 1

try making the ajax synchronous,
async : false