Question

I have implemented the image upload code using jquery php in my php web site. See my code

$(document).ready(function() {
    // start upload
    $('#subtUpload').click(function() {  
        $("#preview").html('');
        $("#preview").html('<img src="../images/loader.gif" alt="Uploading...."/>');
        $("#hotelImageUp").val(1);
        $("#frmHotel").ajaxForm({
            target: '#preview'
        }).submit();
    });
});

Uploading is start when a user click on the upload button $('#subtUpload'). It’s working fine. After uploading the image I want to call another function to display all the images from database using jquery Ajax. I know this see

if($.cookie('hotelId')) {
    var cookieHotel=$.cookie('hotelId');
    var form_data = {
        photos:  1
    };
    $.ajax({
        type: "POST",
        url: "displayHotelImage.php",
        data: form_data,
        success: function(response) { 
            $("#listHotelImg").html('');
            $("#listHotelImg").html(response);
        }
    });
};

But where I will write this function. I have wrote this within the

$("#frmHotel").ajaxForm({
    target: '#preview'

    // my code to display images
}).submit();

But it’s not working

My objective is to display all the images from database after uploading the image

Does anyone know?

Answer 1

If you are using http://malsup.com/jquery/form this plugin(as i see from functions but i can be wrong) you can call success after target e.g

  $("#frmHotel").ajaxForm({
        target: '#preview',
        success:    function() { 


        //image loading codes will be here


     }

so this will execute image loading codes after ajaxForm is successfully executed.