如何获取数据到Jquery对话框？ [英] How to get data into the Jquery dialog box?

问题描述

我正在尝试创建一个JQuery对话框，该对话框将包含特定项目的信息。

这是脚本：

  $（document）.ready（function（）{
 
 $（＃dialog-form）。 $ b autoOpen：false，
 height：500，
 width：400，
 modal：true 
}）; 
 
 $（＃open ）.click（function（）{
 $（＃dialog-form）。对话框（open）; 
}）; 
 
}）; 
  

点击此图片时，应显示项目信息：

 < c：forEach var =itemitems =$ {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> 
  

这是应该存储在对话框中的div

 < div id =dialog-formtitle =title1> 
< img src =imageGetter？item_id = $ {item.idItem}width =100％height =50％/> 
< h3>名称：$ {item.itemName}< / h3> 
< h3>说明：$ {item.description}< / h3> 
< h3>价格：$ {item.price}< / h3> 
< / div> 
  

解决方案

我将以下列方式解决： p>

在您的foreach循环中，当创建链接到对话框时，请执行以下操作：

 < td width =150px>< a href =＃class =opendata-name =$ {item.itemName}data-desc =$ {item.description} -price =$ {item.price}>< img src =imageGetter？item_id = $ {item.idItem}width =100pxheight =60px/>< / a> / TD> 
  

然后在你的javascript改变它看起来像这样：

  $（document）.ready（function（）{
 
 $（＃dialog-form）对话框（{
 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）。 ; 
}）; 
}）; 
  

当您设置对话框标记时：

 < div id =dialog-formtitle =title1> 
< img src =imageGetter？item_id = $ {item.idItem}width =100％height =50％/> 
< h3>名称：< span id =spanDataName>< / span>< / h3> 
< h3>说明：< span id =spanDataDesc>< / span>< / h3> 
< h3>价格：< span id =spanDataPrice>< / span>< / h3> 
< / div> 
  

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>

解决方案

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>

这篇关于如何获取数据到Jquery对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！