如何將數據導入Jquery對話框？

Question

我正在嘗試創建一個將包含特定項目信息的JQuery對話框。

下面是腳本：

$(document).ready(function() { 

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

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

}); 

當這種圖像被點擊本應顯示的項目信息：

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

這裏是一個應該被存儲到對話框中的格

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

Answer 1

我會用以下方式解決這個問題：

在你的foreach循環，創建鏈接對話框時，做到這一點：

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

然後，在JavaScript改變它看起來像這樣：

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

，當你讓你的對話標記：

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