[FIXED] Ajax Request works only once

Issue

I am working on cart class of codeigniter. I want to update cart when user changes qty of item.

I have jquery file like this

$(function() {   
    $('#bookings_form_customer select').on('change', function(ev) {

        var rowid = $(this).attr('class');
        var qty = $(this).val();

        var postData_updatecart = {
            rowid : rowid,
            qty : qty
        };

        //posting data to update cart

        $.ajax({
            url : base_url + 'bookings/update_booking_cart',
            cache : false,
            type : 'post',
            data : postData_updatecart,
            beforeSend : function() {
                $('#cart_content').html('Updating...');
            },
            success : function(html) {  
                $('#cart_content').html(html);
            }
        });
    });

});

I am requesting to controller below to update the cart.

class Bookings extends NQF_Controller {

     public function update_booking_cart() {
            $rowid = $this -> input -> post('rowid');
            $qty = $this -> input -> post('qty');
            $data = array('rowid' => $rowid, 'qty' => $qty);
            $this -> cart -> update($data);

            $this -> load -> view('shop/cart');
    }

}

My Shop/cart file looks like this

<div class="cart_form">
<?php echo form_open(base_url().'index.php/bookings/customerdetails', array('class' => 'bookings_form_customer', 'id' => 'bookings_form_customer')); ?>

<table cellpadding="6" cellspacing="1" style="width:100%" border="0">

<tr>
  <th style="text-align:left">Item Description</th>
  <th style="text-align:left">QTY</th>
  <th style="text-align:right">Item Price</th>
  <th style="text-align:right">Sub-Total</th>
</tr>

<?php $i = 1; ?>

<?php foreach ($this->cart->contents() as $items): ?>

    <?php echo form_hidden($i.'[rowid]', $items['rowid']); ?>

    <tr>
      <td>

        <?php echo $items['name']; ?>

            <?php if ($this->cart->has_options($items['rowid']) == TRUE): ?>

                <p>
                    <?php foreach ($this->cart->product_options($items['rowid']) as $option_name => $option_value): ?>

                        <strong><?php echo $option_name; ?>:</strong> <?php echo $option_value; ?><br />

                    <?php endforeach; ?>
                </p>

            <?php endif; ?>

      </td>
      <td>



            <select name="<?php echo $i.'[qty]'; ?>" class="<?php echo $items['rowid']; ?>">

            <?php
            for($tt=0; $tt<=10; $tt++)
            {
            ?>


            <option value="<?php echo $tt; ?>" <?php if($tt==$items['qty']) echo 'selected="selected"'; ?>><?php echo $tt; ?></option>

            <?php   
            }
            ?>
        </select>

      </td>



      <td style="text-align:right"><?php echo $this->cart->format_number($items['price']); ?></td>
      <td style="text-align:right">$<?php echo $this->cart->format_number($items['subtotal']); ?></td>
    </tr>

<?php $i++; ?>

<?php endforeach; ?>

<?php

      if($this -> session -> userdata('booking_pickup')=='courier')
      {
        ?>

        <tr>

            <td>Pick Up Fees</td>
            <td></td>
            <td style="text-align:right">HK $20</td>
            <td></td>


        </tr>
        <?php
      }
      ?>
<?php

      if($this -> session -> userdata('booking_return')=='courier')
      {
        ?>

        <tr>

            <td>Drop Off Fees</td>
            <td></td>
            <td style="text-align:right">HK $20</td>
            <td></td>


        </tr>
        <?php
      }
      ?>


<tr>
  <td colspan="2"> </td>
  <td class="right"><strong>Total</strong></td>
  <td class="right">$<?php echo $this->cart->format_number($this->cart->total()); ?></td>
</tr>

</table>

<p><?php echo form_submit('update_cart', 'Update your Cart'); ?></p>

</form>
</div>

When I changed select option (that contains qty of product), The AJAX request is sent and it works. But, It works only for the first time, it doesnt work from second time onwards.

When I delete ajax request call and place alert instead, it works everytime. That means there is problem on ajax part only. I am stuck since day before yesterday. Please help.

Solution

try something like this

$(function() {   
    $(document).on( "change", "#bookings_form_customer select", function(ev) {
        // your code goes here
    }); 
});

That because you are replacing your element on which you have applied change jquery event.

so new element coming from ajax doesn't have change event so it doesn't work.

so try above code which will bind change event on dynamiccally create element

EDITED

$(function() {   
    $('#cart_content').on( "change", "#bookings_form_customer select", function(ev) {
        // your code goes here
    }); 
});

you can minimize your selection to one surrounding your element @Jack

Answered By - rajesh kakawat