Ajax Request works only once

Question

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.

rajesh kakawat · Accepted Answer · 2013-12-26T04:48:14.220

4

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

edited Dec 26 '13 at 04:48

answered Dec 25 '13 at 06:24

rajesh kakawat

10,826
1
21
40

1

Assuming that `#cart_content` is the surrounding element, it would be better to delegate the click event from there instead of `document`. – Ja͢ck Dec 26 '13 at 03:04

score 0 · Answer 2 · answered Dec 25 '13 at 11:47

change your jquery codes to

$(function() {   
    $('#bookings_form_customer').on('change', 'select', 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);
        }
    });
});

and that should solve it

score 0 · Answer 3 · answered Aug 01 '21 at 14:25

$(document).ready(function(){
$(document).on( 'click',"#itemQuantity",function(){
    var $element = $(this).closest('#result');
    var productPrice = $element.find("#productPrice").val();
    var itemQuantity = $element.find("#itemQuantity").val();
    var productId    = $element.find("#productId").val();
    event.preventDefault();
    location.reload(true);
    $.ajax({
        url: "shopping_cart.php",
        data: 
          {Price:productPrice,Quantity:itemQuantity,productID:productId},
        method: 'POST',
        success: function (data){
            $("#result").html(data);
        }
    })
});

});

-

Tou can insert the second parameter in .on function the button that want to get the result and use closest to search for specific element.

The location.reload(true) method reloads the page from the cache and force it to reload the page, and use event.preventDefault()

Rehan Parvez · Answer 4 · 2013-12-26T13:36:02.963

-1

Okay this problem occur due to the post back, jQuery doesnot work after post back

There's two method you have call your function on the page load or any event you can also use this code

  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(funtionPost);

put your code in this function as well which is not work

  function funtionPost()
   {
   }

I Hope this will work

edited Dec 26 '13 at 13:36

answered Dec 25 '13 at 06:23

Rehan Parvez

143
2
17

Ajax Request works only once

4 Answers4

Linked