Передача значения из базы данных в jquery

Question

У меня есть список товаров от database, у каждого из которых есть 'id', 'image' и 'price' Я создаю jQuery модальный блок, чтобы при щелчке пользователем изображения 1-го продукт, цена 1-го продукта должна отображаться в диалоговом окне. Изображения одинаковы для каждого продукта. Я использую php с mysql. вот мой код.

echo "<a class='OpenDialog'><img src='pics/phone_2b.png' width='22' height='22'/></a></div>"; 


echo "<div id='dialog' title='Contact Details'> 
     <p>"; 



echo $row['price']; 
     echo "</p> 



</div>"; 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".OpenDialog").click(function() { 
      $("#dialog").dialog({ hide: { effect: "clip", duration: 200 } },{ closeOnEscape: true },{ show: { effect: "drop", duration: 100 } }, 
      {modal: true, height: 200, width: 200 }); 
      $('.ui-widget-overlay').click(function() { $("#dialog").dialog("close"); }); 
     }); 

    }); 
</script> 

Answer 1

Ваш ID (#dialog) всегда должен быть уникальным, вам просто нужно добавить идентификатор в теге в вашей продукции изображения, а затем в дивы добавить еще один идентификатор, чтобы связать его.

Работа Дурной пример: jsfiddle (То, что вы сделали)

Рабочий пример: jsfiddle

<a class='OpenDialog' id="1"><img src='http://thecybershadow.net/misc/stackoverflow.png' width='32' height='32'/></a> 

<a class='OpenDialog' id="2"><img src='http://thecybershadow.net/misc/stackoverflow.png' width='32' height='32'/></a> 

<a class='OpenDialog' id="3"><img src='http://thecybershadow.net/misc/stackoverflow.png' width='32' height='32'/></a> 

<div class='dialog' id="prod_1" title='Contact Details'> 
    <p>Price : 10euros</p> 
</div> 

<div class='dialog' id="prod_2" title='Contact Details'> 
    <p>Price : 20euros</p> 
</div> 

<div class='dialog' id="prod_3" title='Contact Details'> 
    <p>Price : 30euros</p> 
</div> 

$(document).ready(function() { 
    $(".OpenDialog").click(function (e) { 
     e.preventDefault(); 

     var id = $(this).attr('id'); 

     $("#prod_"+id).dialog({ 
      hide: { 
       effect: "clip", 
       duration: 200 
      } 
     }, { 
      closeOnEscape: true 
     }, { 
      show: { 
       effect: "drop", 
       duration: 100 
      } 
     }, { 
      modal: true, 
      height: 200, 
      width: 200 
     }); 
     $('.ui-widget-overlay').click(function() { 
      $("#dialog").dialog("close"); 
     }); 
    }); 

});