When I click button it display image with jQuery ajax on output div 'mouse_move' only for first one but not display same on another click

Question

I am having a problem with image rendering facility on button click display image on output div only for first one but not display same on another click with changes I am doing the code for image meme so that I can write text on image and give some effects. It displays image for the first time only as i told above on click I serialize the form data. after that I passes to ajaxfunctions page by jQuery ajax call.

var data = {
    'field_name': 'formdata',
    'outer_offset_left': offset.left,
    'outer_offset_top': offset.top,
    'drag_offset_left': dragOffset.left,
    'drag_offset_top': dragOffset.top,
    'drag_offset_left2': dragOffset2.left,
    'drag_offset_top2': dragOffset2.top,
    'outer_width': outerWidth,
    'outer_height': outerHeight,
    'drag_width': dragWidth,
    'drag_height': dragHeight,
    'drag_width2': dragWidth2,
    'drag_height2': dragHeight2,
    'fontsize': font_size,
    'fontsize2': font_size2,
    'file_name_path': file_path,
    'file_background_url': outer_bg_url,
    'file_background_color': outer_bg_color,
    'drag_text': drag_text,
    'drag_text2': drag_text2,
    'font_type': font_type,
    'font_type2': font_type2,
    'shadow_val': shadow_val,
    'cap_val': cap_val
};

data = $('#my-form').serialize() + "&" + $.param(data);

$.ajax({
    type: "POST",
    dataType: "html",
    url: "source/ajax-functions.php",
    //Relative or absolute path to response.php file      
    data: data,
    success: function (data) {
        setTimeout(function () {
            $("#mouse_move").css({
                'display': 'block'
            }).html(data);
        }, 200);        
    }    
});

on ajax-functions.php i have just echo the image after update but it will show output that it generates for the first time.

echo '<img src="'.$pathToImage.'custom_Text_image.jpg" />';

but internally every thing is going fine. image is successfully updated as i want.

Answer 1

This line:

data = $('#my-form').serialize() + "&" +  $.param(data);  

will add the current form a second time to data on each run. It will only run once properly.

Assumed, data="abc"

// 1
data = $('#my-form').serialize() + "&" +  $.param(data);  
// <formadata>&abc

 // 2
data = $('#my-form').serialize() + "&" +  $.param(data);  
// <formadata>&abc<formdata>&abc

// etc.

Change:

datatosend = $('#my-form').serialize() + "&" +  $.param(data);  

$.ajax({ 
                   type: "POST",      
                   dataType: "html",      
                   url: "source/ajax-functions.php", 
                   //Relative or absolute path to response.php file      
                   data: datatosend,      
                   success: function(
...