javascript - Transfer each details in one pop up table on click -

javascript - Transfer each details in one pop up table on click -

i have button (add bag) transfer detail of product in pop table.

however, far code have able transfer 1 detail of product pop table.

since have many list of products, have transfer detail of product in 1 pop table.

how create pop table filled info based on product clicked customer?

this fiddle: http://jsfiddle.net/alkasih/whjc0tta/1/

this html code show list of product (in illustration show 2 list of products)

<ul id="yourlist" style="display:inline-block; overflow:hidden;"> <li> <img src="indonu-image/hitam.jpg"/> <p class="content-p"><span class="product-name">forbiden rice</span></br> <span class="content-pp"><span class="content-info">good rice</span></br><span class="price-info">200.000</span> </span></p> <div class="spanish"> <span> <a href="javascript:void(0)" onclick="document.getelementbyid('light').style.display='block'; document.getelementbyid('fade').style.display='block'">add bag</a></span> <span>buy</span> </div> </li> <li> <img src="indonu-image/hitam.jpg"/> <p class="content-p"><span class="product-name">not forbiden rice</span></br> <span class="content-pp">good rice</br>200.000 </span></p> <div class="spanish"> <span> <a href="javascript:void(0)" onclick="document.getelementbyid('light').style.display='block'; document.getelementbyid('fade').style.display='block'">add bag</a></span> <span>buy</span> </div> </li> </ul> <!--pop div--> <div id="light" class="white_content"> <div id="headerlightbox"> berikut kami tampilkan bon belanja anda hari ini. pastikan seluruh spesifikasi sesuai dengan kebutuhan anda. </div> <table id="tableinformation" cellspacing="0"> <tr id="headertableinformation"> <td>product name</td> <td>description</td> <td>price</td> </tr> <tr id="contenttableinformation"> <td id="productname-content"></td> <td id="description-content"></td> <td id="pricecontent"></td> </tr> </table> <div id="buttonwrapper"> <p id="processblocked"> <a href = "javascript:void(0)" onclick ="document.getelementbyid('secondlight').style.display='block'; document.getelementbyid('light').style.display='none'; document.getelementbyid('fade').style.display='block'">processed</a></p> <p id="closeblocked"> <a href = "javascript:void(0)" onclick ="document.getelementbyid('light').style.display='none'; document.getelementbyid('fade').style.display='none'">cancel</a></p> <p id="expired">pesanan anda akan expired pada tanggal: </p> </div> </div>

and here javascript trasnfer details of 1 product pop table:

$('#productname-content').html($('.product-name').val()); $('#productname-content').html($('.product-name').html()); $('#description-content').html($('.content-info').val()); $('#description-content').html($('.content-info').html()); $('#pricecontent').html('rp. ' + $('.price-info').html());

so you've got number of things address, foremost, jquery not bound "add bag" buttons. happening that, before click buttons, jquery has copied first product's details lightbox view. , clicking "add bag" button isn't doing other showing lightbox pre-populated details.

so need set jquery code actual copying of product details click event bound "add bag" buttons. then, should remove inline javascript showing/hiding lightbox , move jquery section. third, product info html not consistent -- create sure each product has same classed spans wrapped around each type of detail, otherwise jquery won't able grab it. here's cleaned html:

<ul id="yourlist" style="display:inline-block; overflow:hidden;"> <li> <img src="indonu-image/hitam.jpg" /> <p class="content-p"><span class="product-name">forbiden rice</span> </br> <span class="content-pp"><span class="content-info">product one</span> </br><span class="price-info">200.000</span> </span> </p> <div class="spanish"> <span> <a href="#">add bag</a></span> <span>buy</span> </div> </li> <li> <img src="indonu-image/hitam.jpg" /> <p class="content-p"><span class="product-name">not forbiden rice</span> </br> <span class="content-pp"><span class="content-info">product two</span></span> </br><span class="price-info">200.000 </span> </p> <div class="spanish"> <span> <a href="#">add bag</a></span> <span>buy</span> </div> </li> </ul> <!--pop div--> <div id="light" class="white_content"> <div id="headerlightbox">berikut kami tampilkan bon belanja anda hari ini. pastikan seluruh spesifikasi sesuai dengan kebutuhan anda.</div> <table id="tableinformation" cellspacing="0"> <tr id="headertableinformation"> <td>product name</td> <td>description</td> <td>price</td> </tr> <tr id="contenttableinformation"> <td id="productname-content"></td> <td id="description-content"></td> <td id="pricecontent"></td> </tr> </table> <div id="buttonwrapper"> <p id="processblocked"> <a href="#">processed</a> </p> <p id="closeblocked"> <a href="#">cancel</a> </p> <p id="expired">pesanan anda akan expired pada tanggal:</p> </div> </div>

and jquery:

$(".spanish").on('click', 'a', function (e) { // product details container var $product_container = $(this).closest('.spanish').prev('.content-p'); var $product_name = $product_container.find('.product-name').text(); var $product_info = $product_container.find('.content-info').text(); var $product_price = $product_container.find('.price-info').text(); $('#productname-content').text($product_name); $('#description-content').text($product_info); $('#pricecontent').text($product_price); $('#fade').fadeout(); $('#light').fadein(); e.preventdefault(); }); $('#processblocked a').on('click', function (e) { $('#secondlight').fadein(); $('#light').fadeout(); $('#fade').fadein(); e.preventdefault(); }); $('#closeblocked a').on('click', function (e) { $('#light').fadeout(); $('#fade').fadein(); e.preventdefault(); });

fiddle: http://jsfiddle.net/whjc0tta/6/

javascript jquery html