I have a simple html code fragment

<div style="display:none;" id="link_to_list"></div>
 <a href="#" onclick="save_onclick()">
     Back to List
 </a>

And a simple jquery function for handling clicking.

function save_onclick() {
    $( "#link_to_list" ).dialog({
        title:'Are you sure you don\'t want to save?',
        resizable: false,
        height:140,

        modal: true,
        buttons: {
            Ok: function() {
                window.location.href = "findUsers";
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
}

When I first click, it works, but div "link_to_list" erase and i can't call it again. How can i get around this?

I have a simple html code fragment

<div style="display:none;" id="link_to_list"></div>
 <a href="#" onclick="save_onclick()">
     Back to List
 </a>

And a simple jquery function for handling clicking.

function save_onclick() {
    $( "#link_to_list" ).dialog({
        title:'Are you sure you don\'t want to save?',
        resizable: false,
        height:140,

        modal: true,
        buttons: {
            Ok: function() {
                window.location.href = "findUsers";
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
}

When I first click, it works, but div "link_to_list" erase and i can't call it again. How can i get around this?

• javascript
• jquery
• html
• jquery-ui
• jquery-ui-dialog

• there's nothing even in that <div> tag...put the </div> after </a> so the link is inside the <div> – Trevor Arjeski Commented Mar 25, 2011 at 14:04
• @TrevorMA: the div is styled to be invisible. Put the link inside it and the link is invisible too. – Surreal Dreams Commented Mar 25, 2011 at 14:05
• @TrevorMA I don't think he wants to do that - the <div> is used as a dialog ... – Pointy Commented Mar 25, 2011 at 14:05
• 3 Question: why put an onclick attribute on a link when you are using jQuery? The whole point of jQuery is to remove the need for this and keep javascript in javascript! Also, change "close" to hide. Close will close, hide should just display: none; it – Alex Commented Mar 25, 2011 at 14:08
• $( this ).dialog("close") is correct. That will close the dialog, it isn't supposed to destroy it as $(this).dialog("destroy") would. According to jqueryui docs – Mark Commented Mar 25, 2011 at 14:10

3 Answers 3

I think the problem may be that on the second click you'd be trying to re-initialize the dialog, which (again, if I'm recalling correctly) won't work. Instead, you could set up the dialog first and then have the click handler just open the dialog.

$( "#link_to_list" ).dialog({
    title:'Are you sure you don\'t want to save?',
    resizable: false,
    height:140,
    autoOpen: false,

    modal: true,
    buttons: {
        Ok: function() {
            window.location.href = "findUsers";
            $( this ).dialog( "close" );
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
});

function save_onclick() {
  $('#link_to_list').dialog('open');
}

$(this).dialog("destroy")

Remove the dialog functionality pletely. This will return the element back to its pre-init state.

$(this).dialog("close")

Close the dialog

http://jqueryui./demos/dialog/

Mark's answer works however it does not work if you close with the x button. dont use destroy. set autoOpen to false, make call to dialog then open in a separate call

    $( "#dialog" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode"
    });

    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
        return false;
    });

http://jqueryui./demos/dialog/#animated