jQueryダイアログボックスに画像とコンテンツを入れてください

Question

アップロードしたばかりの画像が表示されるダイアログボックスを作りたいと思います。ファイルアップロードシステムは正常に機能しますが、画像をダイアログボックスに動的に配置する場合は、空のボックスだけが表示されます。

HTMLコード：

<div id="dialogbox">{I want to change this conetent here to an image}</div> 

のjQuery/Javascriptのコード：

function completeHandler(event){ 
    var data = event.target.responseText; 
    var datArray = data.split("|"); 
    if(datArray[0] == "upload_complete_msg"){ 
     hasImage = datArray[1]; 
     $(function() { 
      $("#dialogbox").dialog(); 
      $("#dialogbox").html('sadasdasd'); 
     }); 
    } else { 
     _("uploadDisplay_SP_msg_"+datArray[2]).innerHTML = datArray[0]; 
     _("triggerBtn_SP_"+datArray[2]).style.display = "block"; 
    } 

datArray[]は、PHPの検証からの応答テキストです。​​は成功した場合upload_complete_msgに等しく、datArray[1]はfilename123.jpgのような画像ファイル名と拡張子であり、darArray[2]はidです。つまり、ユーザーがイメージを正常にアップロードした場合、ダイアログボックスが表示されます。私は.html()の機能を使ってコンテンツを追加しようとしましたが、もう一度空のダイアログボックスが表示されませんでした。 $("#dialogbox").html('<img src="imgfolder/myimage.jpg">');のようにこのダイアログボックスにイメージを置くことはどうでしょうか？

Answer 1

このような体験をしてみませんか？

function completeHandler(event) { 
 
    var data = event.target.responseText; 
 
    var datArray = data.split("|"); 
 
    if (datArray[0] == "upload_complete_msg") { 
 
    hasImage = "tempUploads/"+datArray[1]; 
 
    // Create a jQuery image object, and assign the src attribute. 
 
    var imgEl = $("<img>").attr("src", hasImage); 
 
    // stick that imgEl into the dialog. 
 
    $("#dialogbox").html(imgEl); 
 
    $("#dialogbox").dialog(); 
 

 
    } else { 
 
    _("uploadDisplay_SP_msg_" + datArray[2]).innerHTML = datArray[0]; 
 
    _("triggerBtn_SP_" + datArray[2]).style.display = "block"; 
 
    } 
 
}