Question

I would like to toggle the JQuery Dialog using a button.

To replace the text in the dialog I use .replaceWith()

The problem is, that the text isn’t replaced, and the dialog shows up, even when I have set

<div id="dialog-confirm" title="Can you confirm?" style="display: none;"> 

Here is the code

(function() {
    $( "#dialog:ui-dialog" ).dialog( "destroy" );

    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Okay": function() {
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
});

function showhide(iname) {
    var item = document.getElementById(iname).style;
    if (item.display == 'none') {
    item.display = '';
    } else {
    item.display = 'none';
    }
}

$('div.dialog-text').replaceWith( "<b>New text goes here</b>" );

and can be tried out live at

http://jsfiddle.net/littlesandra88/XxVtU/

Also, if there is a better way, please let me know =)

Answer 1

If you (for some reason) want to use replace the text using .replaceWith() method, you should make use of the callbacks (in this case the “create” or “open” callback”) that are available in jQueryUI.

I’ve added an updated version of your own code doing what I thought you were trying to do.

http://jsfiddle.net/XxVtU/7/