JQuery reusable dialog with different content

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?

ShaneBlake · Accepted Answer · 2011-04-29 17:38:06Z

3

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" />

edited Apr 29, 2011 at 17:38

answered Apr 29, 2011 at 15:18

ShaneBlake

11.1k2 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kirill Dubovikov Over a year ago

And there is no way I can use it like this?

<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>

Jared Over a year ago

if there were multiple dialog boxes, they would all open content.htm when #baseDialogOpener was clicked.

Kirill Dubovikov Over a year ago

So the only way I can avoid this is giving them different names?

ShaneBlake Over a year ago

I would assume that different buttons would open different content, therefore the .load() would contain whichever file was required for each separate button.

ShaneBlake Over a year ago

@kernel_mode: valid html says that only one element can have an id, so your above comment would be invalid. jquery only returns the first element i such a case. i'll update my answer with a way to have different buttons open different files if that's what you're needing...

Jared · Accepted Answer · 2011-04-29 15:25:37Z

1

You can use multiple class in place of your id.

For instance, instead of:

<div id="baseDialog" title="Test Dialog" class="divClass">

Use

<div title="Test Dialog" class="divClass baseDialog">

Then you can reference it in your javascript:

Where you have

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

Try

$(".baseDialogOpener").click(function () {
        $(this).children(".baseDialog").dialog("open");
        return false;
    });

$(this) just grabs whatever was clicked, so you can have multiple classes of the same kind.

answered Apr 29, 2011 at 15:25

Jared

1,7936 gold badges33 silver badges56 bronze badges

5 Comments

Kirill Dubovikov Over a year ago

Yes, I know, but class is reserved for css.

Jared Over a year ago

javascript (jQuery) uses class and id - it's not "reserved" just for css at all. Unless you are saying that #baseDialogOpener is an already used class, to which I would strongly suggest using different naming conventions.

Kirill Dubovikov Over a year ago

By "reserved" I mean that I ness this attribute to apply styles.

Jared Over a year ago

right - you'd have to change it in your css as well. In your .css file, rename #baseDialogOpener to .baseDialogOpener and it would do the same thing.

Kirill Dubovikov Over a year ago

Oh, I just forgot that I can do like this: class="class1 class2 class3".

Collectives™ on Stack Overflow

JQuery reusable dialog with different content

2 Answers 2

5 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related