버튼을 클릭하면 출력 div 'mouse_move'에 첫 번째 이미지 만 표시되고 다른 이미지는 동일하게 표시되지 않습니다.

Question

버튼의 이미지 렌더링 기능에 문제가 있습니다. 첫 번째 이미지의 출력 div에서 이미지를 표시하는 데 문제가 있습니다. 하나지만 변경 사항이있는 다른 클릭에는 동일하게 표시되지 않습니다. 이미지에 텍스트를 쓰고 일부 효과를 줄 수 있도록 이미지 밈에 대한 코드를 수행하고 있습니다. 폼 데이터를 직렬화하는 것을 클릭하면 위에서 설명한대로 이미지가 처음으로 표시됩니다. 그 후 jQuery ajax 호출로 ajaxfunctions 페이지로 전달합니다.

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 저는 업데이트 후 이미지를 에코했지만 처음 생성되는 출력을 보여줍니다.

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

하지만 내부적으로 모든 것이 잘 진행됩니다. 이미지는 내가 원하는대로 성공적으로 업데이트됩니다.

Answer 1

이 줄 :

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

각 실행에 data에 현재의 형태를 두 번 추가합니다. 그것은 한 번 제대로 실행됩니다. 추측 된

, data="abc"

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

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

// etc. 

변경 :

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(
...