Alex Rivera | Logout

jQuery Dialog Box

Asked 2008-12-14T16:34:13.253
35

Im trying to do a dialog box with jquery. In this dialog box Im going to have terms and conditions. The problem is that the dialog box is only displayed for the FIRST TIME.

This is the code.

JavaScript:

function showTOC()
{
    $("#TOC").dialog({ 
        modal: true, 
        overlay: { 
            opacity: 0.7, 
            background: "black" 
        } 
    })
}

HTML (a href):

<a class="TOClink" href="javascript:showTOC();">View Terms & Conditions</a>

<div id="example" title="Terms & Conditions">1..2..</div>

The problem I think is that when you close the dialog box the DIV is destroyed from the html code therfore it can never be displayed again on screen.

Can you please help!

Thanks

javascript jquery jquery-ui dialog
Edit
Report

2 Answers

15

I had the same problem and was looking for a way to solve it which brought me here. After reviewing the suggestion made from RaeLehman it led me to the solution. Here's my implementation.

In my $(document).ready event I initialize my dialog with the autoOpen set to false. I also chose to bind a click event to an element, like a button, which will open my dialog. 

$(document).ready(function(){

    // Initialize my dialog
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
        "OK":function() { // do something },
        "Cancel": function() { $(this).dialog("close"); }
    }
    });

    // Bind to the click event for my button and execute my function
    $("#x-button").click(function(){
        Foo.DoSomething();
    });
});

Next, I make sure that the function is defined and that is where I implement the dialog open method.

var Foo = {
    DoSomething: function(){
        $("#dialog").dialog("open");
    }
}

By the way, I tested this in IE7 and Firefox and it works fine. Hope this helps!

answered 2009-05-27T08:20:23.037
1

RaeLehman's solution works if you only want to generate the dialog's content once (or only modify it using javascript). If you actually want to regenerate the dialog each time (e.g., using a view model class and Razor), then you can close all dialogs with $(".ui-dialog-titlebar-close").click(); and leave autoOpen set to its default value of true.

answered 2011-03-28T21:00:11.737

Your Answer