Jquery dialog only open once

Question

I am trying to use the jquery dialog but it seems that it only work on the first item (only the first one opens)

Here is the script:

   $(document).ready(function () {

            $("#dialog-form").dialog({
                autoOpen: false,
                height: 500,
                width: 400,
                modal: true
            });

        $("#open").click(function(){
           $("#dialog-form").dialog("open");
        });

     });

The HTML snippet:

     <c:forEach var="item" items="${menuList}">
                        <tr>
                            <td width="150px"><a href="#" id="open"><img src="imageGetter?item_id=${item.idItem}" width="100px" height="60px" /></a></td>
                            <td width="200px">${item.itemName}</td>
                            <td width=200px">${item.description}</td>
                            <td width="150px">${item.price}</td>     
                        </tr>
            </c:forEach>

   <div id="dialog-form" title="title1">

        <img src="imageGetter?item_id=${item.idItem}" width="100%" height="50%" />
        <h3>Name: ${item.itemName}</h3>
        <h3>Description: ${item.description}</h3>
        <h3>Price: ${item.price}</h3>

    </div>

What do you think is the problem?

Answer 1

it seems like you have multiple rows of table having the same id open so the dialog will open if you click the first element with the id open. you have to change id to class

try changing it to class

<a href="#" class="open">

and attach the click event on that class.

$(".open").click(function(){
           $("#dialog-form").dialog("open");
        });

Answer 2

If by "only the first one opens" you mean the dialog appears every time you click but it always has the "first ones" information in it... I would say that's because you are only creating one dialog-form, outside your foreach loop. I'm not even sure how your dialog has the appropriate values showing, as the values you are populating in the dialog are from your for loop as well, which you are not in when you are creating dialog-form.

I would solve this in the following way:

in your foreach loop, when creating the link to the dialog do this:

<td width="150px"><a href="#" id="open" data-name="${item.itemName}" data-desc="${item.description}" data-price="${item.price}"><img src="imageGetter?item_id=${item.idItem}" width="100px" height="60px" /></a></td>

then in your javascript change it up to look like this:

   $(document).ready(function () {

            $("#dialog-form").dialog({
                autoOpen: false,
                height: 500,
                width: 400,
                modal: true
            });

        $("#open").click(function(){
           var dataAttr = $(this).data();
           $('#spanDataName').html(dataAttr.name);
           $('#spanDataDes').html(dataAttr.description);
           $('#spanDataPrice').html(dataAttr.price);
           $("#dialog-form").dialog("open");
        });
   });

and when you make your dialog markup:

<div id="dialog-form" title="title1">
    <img src="imageGetter?item_id=${item.idItem}" width="100%" height="50%" />
    <h3>Name: <span id="spanDataName"></span></h3>
    <h3>Description: <span id="spanDataDesc"></span></h3>
    <h3>Price: <span id="spanDataPrice"></span></h3>
</div>