jQuery + PHP Dynamically Created Content

Question

I am working on an ecommerce site and the products are being dynamically generated with foreach loop, within each product there are product options, when the product option is selected I my intended behaviour is for the price to update.

I have this working, however jQuery is updating every instance of the price on the page and the select option only works for the first item generated. How do I add/bind the jQuery to the object/every product and have the price change on individual basis?

<?php 
  foreach($items as $item):
    <?php echo $the_name ?>

    <select id="choose">
      foreach($selection as $select):
        <option value="$some_var" data-value="$the_price">$some_var</option>
      endforeach;
    </select>

    <div id="price"><?php echo $the_price ?></div>
  endforeach;
?>

<script type="text/javascript">
  jQuery('#choose').change(function (event) {
    jQuery('#price').html(jQuery('#choose option:selected').data('value'));
  }).change();
</script>

Working Code

After playing about for a while, and taking into consideration the other comments below, this code works.

<script type="text/javascript">
  jQuery('.choose').change(function (event) {
    var $t = jQuery(this);
    var price = $t.find('option:selected').data('value');
    $t.parents('form').find('.price').html(price);
  }).change();
</script>

Don't use the same "id" attribute on multiple elements. Use "class" instead. — hindmost
– hindmost, Commented Jan 26, 2014 at 18:55
Is the price a total sum of all .choose values, or just the value of the changed selectbox? Also, what version of jQuery are you using? — tftd
– tftd, Commented Jan 26, 2014 at 19:02

Stephen · Accepted Answer · 2014-01-26 19:05:50Z

1

ID's are unique. Because 'choose' is in a loop, you've got multiple choose ID's, which isn't helping things. Same with the 'price'. So, let's change it a bit:

<?php 
    foreach($items as $item):
        <?php echo $the_name ?>
        <select class="choose">
            foreach($selection as $select):
            <option value="$some_var" data-value="$the_price">$some_var</option>
            endforeach;
        </select>
        <div class="price"><?php echo $the_price ?></div>
    endforeach;
?>
<script type="text/javascript">
    jQuery('.choose').change(function (event) {
        jQuery(this).next().html(jQuery(this).data('value'));
    }).change();
</script>

Explanation:

Since you can have more than one choose, you then need to do a bit of DOM navigation to get the price that is relative to the select. So, whenever a select box is changed it will look for the next element in the DOM tree that is a sibling , which if your code snippet is complete will be the price element, and then update the html to that value. One thought though - you may want to use text instead of html, unless you have HTML in your prices. Also, when you're inside an event (unless you've done something special to rebind the scope), in jQuery this will refer to the element that the event fired on. So, jQuery(this) will return a jQuery reference to the element that was changed.

edited Jan 26, 2014 at 19:05

answered Jan 26, 2014 at 18:57

Stephen

5,4501 gold badge24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stephen Over a year ago

According to what the OP gave, it should just be the value of the changed selection box.

tftd Over a year ago

Ahh.. sorry, I though I was commenting on the OP's question... ignore my comment

iamgraeme Over a year ago

Thanks for the answer, very thourugh and helped me understand the manipulation of the DOM

Martin149 · Accepted Answer · 2014-01-26 18:54:50Z

0

<?php 

      foreach($items as $item):

      <?php echo $the_name ?>

      <select class="choose">
         foreach($selection as $select):

         <option value="$some_var" data-value="$the_price">$some_var</option>

         endforeach;
       </select>

       <div class="price"><?php echo $the_price ?></div>

      endforeach;



    ?>
    <script type="text/javascript">
       jQuery('.choose').change(function (event) {
         jQuery$(this).parent().next(".price").html(jQuery('#choose option:selected').data('value'));
       }).change();
    </script>

answered Jan 26, 2014 at 18:54

Martin149

234 bronze badges

Collectives™ on Stack Overflow

jQuery + PHP Dynamically Created Content

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related