How to show Ajax response in a PHP while loop

Question

I have the following input box in PHP while loop:

echo '<ul>';
  while ( $data = $supplier->result->fetch_assoc()) {
    $sid          =  (int) $data['sid'];
    $supplierName = output($data['supplierName']);
    $vid          = output($data['vid']);

    echo "
    <li>
      <input type='checkbox' name='sid[]' data-sid='$sid' value='{$sid}|$vid' class='supplierClass'> $supplierName
      <div class='allVehicle'></div>
    </li>
    ";  
  }
echo '</ul>';

Now when I click on a checkbox it's calling another PHP page using jQuery/Ajax, but the result is not showing.

jQuery/Ajax Code:

$('.supplierClass').change(function() {    
   var sids = [];
   $('.supplierClass:checked').each(function(i,v) {
       sids.push($(v).val());
    });
    $.ajax({
      url         :   'process/get-vehicle.php',
      type        :   'POST',
      dataType    :   'html',
      data        :   {
        sid   :  sids,
      },
      beforeSend  :   function () {
          $(this).next('.allVehicle').html('Please wait...');
      },
      success     :   function ( result ) {
          $(this).next('.allVehicle').html(result);
      }
   });  
});

I think the problem is on this line but not sure.

beforeSend  :   function () {
    $(this).next('.allVehicle').html('Please wait...');
},
success     :   function ( result ) {
    $(this).next('.allVehicle').html(result);
}

You want do `$('.supplierClass').change(function() { var sids = [];var that = this;…`. Or `('.supplierClass:checked').each(function(i,v) { sids.push($(v).val());var that = this`. And `$(that).next('.allVehicle').html(result);`. Depending on which `this` you mean. The `this` you use is the one from the `$.ajax()` `function`. — deEr., May 27 '18 at 09:07
You want to cache it. Because at the place you are using it, it is — not — the `value` you think it is. It is `window`. — deEr., May 27 '18 at 09:11
@AjAX. Well, it's working but having some issue. When I click on multiple checkboxes it's showing the data but when I uncheck any checkbox then the data is still showing to the corresponding div. it's should not be. — Shibbir, May 27 '18 at 09:14
You want to do it manually. [Like `$('li input:not(:checked)').next().empty()`.](https://stackoverflow.com/a/8465833/2569323) — deEr., May 27 '18 at 09:18
Try it in the `change()` `function`. And this is just an example. To lead you the way. — deEr., May 27 '18 at 09:20

score 0 · Answer 1 · answered May 27 '18 at 10:59

Change it like that, if works!

beforeSend  :   function () {
  $('.allVehicle').next().html('Please wait...');
},
success     :   function ( result ) {
  $('.allVehicle').next().html(result);
 //$('.allVehicle').next().text(result); if not workout as html then test it by passing text in it.
}

And if not done then https://api.jquery.com/next/ have a visit here.

How to show Ajax response in a PHP while loop

1 Answers1