How to get data into the Jquery dialog box?

问题

I am trying to create a JQuery dialog box that will contain the information of a specific item.

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");
    });

 });

When this image is clicked this should show the item information:

<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>
  </tr>
</c:forEach>

Here is the div that should be stored into the dialog box

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

回答1:

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="#" class="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>

来源：https://stackoverflow.com/questions/21078091/how-to-get-data-into-the-jquery-dialog-box

标签

jquery

jsp

dialog