CODEWITHSUNDEEP
javascriptphpjqueryhtmldialog
squancy
squancy

Reputation: 565

Put image and content into jQuery dialog box

I want to make a dialog box where the user can see the image that he/she has just uploaded. The file uploading systems works fine but when I want to put the image into the dialog box dynamically only an empty box appears.

HTML Code:

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

jQuery/Javascript Code:

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";
    }

The datArray[] is a response text from the PHP validation. datArray[0] is equal to upload_complete_msg if it succeeded, datArray[1] is the image file name and extension like filename123.jpg and darArray[2] is just an id. So as I said if the user has successfully uploaded the image a dialog box should appear. I tried to add more content with the .html() function but it didn't show me anything again just an empty dialog box. How would it be possible to put an image into this dialog box like $("#dialogbox").html('<img src="imgfolder/myimage.jpg">');?

Upvotes: 1

Views: 41

Answers (1)

Snowmonkey
Snowmonkey

Reputation: 3761

Try something like this?

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";
  }
}

Upvotes: 1

Related Questions