CODEWITHSUNDEEP
javascriptjquerydialogjquery-ui-dialog
Hulud
Hulud

Reputation: 35

JQuery UI dialog reload original content

I'm loading a dialog from a div

<div id="dialog-message" title="Send Message" style="display: none;">
<form id ="form_message">
<textarea name="message_field" id="message_field" rows="8" cols="62" class="ui-widget-content ui-corner-all" style="resize: none;"></textarea>
</form>

creating the dialog inside the $(document).ready(function() and opening it using a link. On submit of the dialog i change the content of the dialog with the return message, and the user can close the window.

// dialog create
$("#dialog-message").dialog({
autoOpen: false,
resizable: false, width: 520, height: 320,
modal: true,
buttons: {"Send": { text: "Send", id: "btn_send", click: function () {},
close: function() {if($('#form_message').length) {$(this).find('form')[0].reset();} }
});

//link to open dialog
$('#dialog_link').click(function(){$("#dialog-message").data("msg_data", {msg_from: 14, msg_to: 15}).dialog("open"); return false; });

//operations made on submit dialog
$('#btn_send').hide();
$('#dialog-message').html(data.error);

The problem i have is that once you open the dialog again, the return message remains, and it's not loading the original div content. how can i achive this? i tried to destroy the dialog on the close event, but then the dialog doesn't reopen at all.

Upvotes: 2

Views: 2720

Answers (1)

Mr.Manhattan
Mr.Manhattan

Reputation: 5504

just save the message field's content before you change it....like this: 

var message_field_html = "";

function openDialog(){ //or whatever function calls your dialog
    if(message_field_html != ""){
        $('#dialog-message').html(message_field_html);
    }
    //do things
}

function changeDilogText(){ //or whatever function changes the text
    message_field_html = $('#dialog-message').html()
    $('#dialog-message').html(data.error);
}

[edit] edited code to mach your question

Upvotes: 2

Related Questions