How to display javascript variable in a dialog box?

Question

I have a search form that can display a list of persons matching the searching filters. Once the search results are displayed, I want a link (id=names_list) that, when clicked, displays a dialog box displaying the list of the persons names.

I don't understand why this code is not working :

 <a id="names_list" href="#">Names list</a>

    {% for person in persons %}
       <a class="name_for_mylist">{{ person | name }}</a>
    {% endfor %}

    <script>        
            $(document).ready(function()    
            {
                $("#names_list").click(function(event){
                    event.preventDefault();
                    var list = "";
                    $(".name_for_mylist").each(function(){
                        list += $(this).html() + "; ";
                    });
                    var box=list.dialog({ title: "Names list" });
                    box.show();
                });
            });
    </script>

Thanks a lot for your help!

The jQuery UI .dialog() function has to be applied to an HTML element in the DOM, not a string. — Pointy
– Pointy, Commented Aug 26, 2012 at 15:14
thanks for the reply, so how to pass this list variable into my dialog content? — Reveclair
– Reveclair, Commented Aug 26, 2012 at 15:22

xdazz · Accepted Answer · 2012-08-26 15:19:57Z

1

list is a string, and it doesn't have the method .dialog.

You should do like below:

$(document).ready(function () {
    $("#names_list").click(function (event) {
        event.preventDefault();
        var list = "";
        $(".name_for_mylist").each(function () {
            list += $(this).html() + "; ";
        });
        $('<div>').html(list).appendTo('body').dialog({
            title: "Names list"
        });
    });
});

answered Aug 26, 2012 at 15:19

xdazz

161k38 gold badges255 silver badges278 bronze badges

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

Comments

Shreedhar · Accepted Answer · 2012-08-26 15:14:41Z

0

var liste = "";
$(".name_for_mylist").each(function(){
  list += $(this).html() + "; ";
});

u declared liste variable and you are adding $(this).html() to list variable.

try changing list+= $(this).html()+ ';'; to liste+= $(this).html()+ ';';

answered Aug 26, 2012 at 15:14

Shreedhar

5,6903 gold badges24 silver badges27 bronze badges

1 Comment

Pointy Over a year ago

The typo was fixed very shortly after the question was posted.

Julian · Accepted Answer · 2012-08-26 15:24:41Z

0

change this

var box=list.dialog({ title: "Names list" });

to this

var box=$(list).dialog({ title: "Names list" });

You can put damn near anything in the jquery wrapper.

~~About half way through your javascript,~~

~~var liste = "";~~

~~Extra "e" at the end of "list"~~

edited Aug 26, 2012 at 15:24

answered Aug 26, 2012 at 15:15

Julian

5002 silver badges11 bronze badges

1 Comment

Reveclair Over a year ago

Yes sorry but it was just absent-mindedness on my part when writing the code on stack overflow :(

Collectives™ on Stack Overflow

How to display javascript variable in a dialog box?

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related