Reopenable JQuery-ui dialogs for dynamically generated content

Question

I have a page with a variable number of items (generated by Django, if that makes a difference), each of which with an open-able/close-able help dialog made with JQuery-ui. Currently, however, I cannot figure out how to open ONLY the correct help dialog when I click the corresponding button. With what I have right now (only referencing the class in my script), it opens every help dialog when you click any help button. What I am doing now is creating all the dialogs on the page load and then displaying only on a click. I think it would make sense to display the correct dialog based on IDs, but I have no idea how to incorporate that into the script.

HTML: (example based off dynamically generated content)

<li>
    <div class="help_expander"></div>
    <p class="toggled_helptext"><!--Text for the dialog--></p>
    <!--Actual content of the item-->
</li>
<li>
    <div class="help_expander"></div>
    <p class="toggled_helptext"><!--Text for the dialog--></p>
    <!--Actual content of the item-->
</li>

javascript:

$(document).ready(function() {
    $("input[type=submit], input[type=button]").button();

    $(".toggled_helptext").dialog({
        autoOpen: false,
        title: "Help"
    });

    $(".help_expander").click(function() {
        $(".toggled_helptext").dialog('open');
        return false;
    });
});

You have the same classes. if you only need one then add another class to each like, firstHelp or secondHelp — nickanor
– nickanor, Commented Jul 25, 2014 at 15:29
The problem is that there are an arbitrary number of the items, so I can't just have separate hand-rolled classes and a ton of repeated javascript. I'm looking for a way to automate it. — Julia Ebert
– Julia Ebert, Commented Jul 25, 2014 at 15:36

Ramzan Zafar · Accepted Answer · 2014-07-25 15:50:57Z

0

use delegate method on dynamicallay created contents as follow

$("body").on("click",".help_expander",function() {
        $(".toggled_helptext").dialog('open');
        return false;
    });

Updated

$("body").on("click",".help_expander",function() {
        $(this).find(".toggled_helptext").dialog('open');
        return false;
    });

or

$("body").on("click",".help_expander",function() {
        $(this).children(".toggled_helptext").dialog('open');
        return false;
    });

edited Jul 25, 2014 at 15:50

answered Jul 25, 2014 at 15:35

Ramzan Zafar

1,6002 gold badges17 silver badges19 bronze badges

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

4 Comments

Julia Ebert Over a year ago

This seems to do the exact same thing. I tried it and it still opens all of the dialogs.

Ramzan Zafar Over a year ago

as the class is same for all the helptext

Ramzan Zafar Over a year ago

can you have those helptext id based?

Julia Ebert Over a year ago

Now neither of those seem to be opening any of the dialogs... I can make the helptexts have unique ids, but I don't know how to incorporate that into the script. I did just find this similar question, but am not having any success getting the top-rated answer there to work, either.

Collectives™ on Stack Overflow

Reopenable JQuery-ui dialogs for dynamically generated content

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related