Question

I’m new to JQuery and I can’t create reusable dialog box. Here is my code

    $(function () {
    $("#baseDialog").dialog({
        autoOpen: false,
        modal: true,
        width: 520,
        show: "blind",
        hide: "explode"
    });
    $("#baseDialogOpener").click(function () {
        $("#baseDialog").dialog("open");
        return false;
    });

I use this dialog box like this:

<input id="baseDialogOpener" type="button" value="Update" />
    <div id="baseDialog" title="Test Dialog" class="divClass">
    <!-- here goes some ASP .NET MVC 2 code -->
    </div>

The problem is that I want to reuse this dialog many times in many pages but with different html content and I have no idea how to do this, because I can’t use class attribute because of styles that I need to use too. I cant use id attrubutes with the same values at the same page.
And there is no way I can use it like this? Maybe with another attribute than id (class is reserved for css)?
<input id="baseDialogOpener" type="button" value="Update" />
<div id="baseDialog" title="Test Dialog" class="divClass">
<form>...</form>
</div>
<input id="baseDialogOpener" type="button" value="Update 2" />
<div id="baseDialog" title="Test Dialog 2" class="divClass">
<form>...</form>
</div>
Looking forward to your answes.
UPDATE: I have the code above executed by using class attribute, but all dialogs appear at once when I click button. Any way to fix this?

Answer 1

The dialog box can load content from an .htm file from the server when it’s opened.

You can use something like this :

$("#baseDialogOpener").click(function () {
    $("#baseDialog").load('content.htm');
    return false;
});

UPDATE: This code shows how to have the same .click() display different contents based on the button.

$("dialogButton.").click(function () {
    $("#baseDialog").load($(this).data('content'));
    return false;
});


<input type="button" value="first" id="button1" class="dialogButton" data-content="content1.htm" />
<input type="button" value="second" id="button2" class="dialogButton" data-content="content2.htm" />