Using .replaceWith() on dialog box. What's wrong?

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

The text replacement seems to be working in Chrome 11, Firefox 4 and IE 9. The dialog appears because you're initializing the dialog plugin in the document ready event handler and jQuery UI sets new styles (including display ) to the dialog. If you want it to be hidden, either hide it afterwards or initialize it only when you need it.

With it being a modal dialog, the clicking the link to hide it will never work because of the overlay, so you're probably wanting to only ever initialize the dialog box when you need to show it. To that effect, I moved your initialization code from the ready handler to the showhide function:

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

http://jsfiddle.net/XxVtU/8/

---

As TJ Crowder mentioned in the comments, there's also autoOpen: false , which can be applied during initialization. I modified your fiddle to demonstrate this .

Answer 2

what you are doing in you code is saying,

when the page finishs loading display a dialog box

give your <a> tag an id, and
you need to add a handler in your initialzation code. Also, you were using anonymous functions, function () { } ,in your document ready call; which is fine, but it can get kind of cluttery after a while..

For Example:

 function init() 
    {
        $("#my_a_tag_id").click(showDialog);
    }

function showDialog() {
    $( "#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" );
            }
        }
    });
}

$(document).ready(init);

Answer 3

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/

Answer 4

take a look at this;

$(document).ready(function(){
 $("#showhide").click(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" );
                }
            }
        });});$('div.dialog-text').replaceWith( "<b>New text goes here</b>" );});