Aronaman
2 months ago

ajax date range

Posted 2 months ago by Aronaman

hello, guys, I am working on two data fields and get the available room without refresh page using ajax, but I encounter this problem.

   <strong>Start date:</strong>

           <div class="input-group date" data-provide="datepicker">
              <input type="text" name="check_in" class="form-control">
              <div class="input-group-addon">
                  <span class="glyphicon glyphicon-th"></span>
              </div>
          </div>

        </div>

        <div class="form-group">

            <strong>End date:</strong>

            <div class="input-group date" data-provide="datepicker">
              <input type="text" name="check_out" class="form-control">
              <div class="input-group-addon">
                  <span class="glyphicon glyphicon-th"></span>
              </div>
          </div>

        </div>

      

      <div class="form-group">

        <div class="form-group">
             <strong>Quantity:</strong>
              <select  name="quantity" >   
                  @for($i=1; $i<=$roomQuantity; $i++)
                  <option  >{{$i}}</option>
                  @endfor
              </select>
        </div>

but i want the quantity change as the data changes, so i update the code like this

<label>Check Out:</label>



<div class="input-group date" data-provide="datepicker">
    <input id="check_out" name="check_out" type="text" class="form-control">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
</div>

<button type="button" name="filter" id="filter" class="btn btn-info btn-sm">Check Availabilty</button>

 <br>

<div class="form-group">
    <strong>Quantity:</strong>
<select  name="availableQuantity" id="availableQuantity" >   

</select>
</div>

@section('javascript')

 var _token = $('input[name="_token"]').val();

 availableQuantity();

 function availableQuantity(check_in = '', check_out = '')
 {
  $.ajax({
   url:"{{ route('available-quantity') }}",
   method:"POST",
   data:{check_in:check_in, check_out:check_out, _token:_token},
   dataType:"json",
   success:function(data)
   {
    var output = text(roomQuantity-data.quantity);
    // $('#availableQuantity').text(data.length);
    for(var count = 0; count <= output; count++)
    {
     $('#availableQuantity option[value=' + output+ ']').prop('Selected',true);
     // output += 'data[count]';
    //  output += '<td>' + data[count].post_title + '</td>';
    //  output += '<td>' + data[count].post_description + '</td>';
    //  output += '<td>' + data[count].date + '</td></tr>';
    // }
    // $('tbody').html(output);
   }
  })
 }

 $('#filter').click(function(){
  var check_in = $('#check_in').val();
  var check_out = $('#check_out').val();
  if(check_in != '' &&  check_out != '')
  {
   fetch_data(check_in, check_out);
  }
  else
  {
   alert('Both Date is required');
  }
 });

on ApiController

  public function availableQuantity(Request $request, Room $room)
    {

       if($request->ajax())
         {
            $roomQuantity=$room->quantity;

          if($request->check_in != '' && $request->check_out != '')
          {
            $status_id = BookStatus::where('name', 'Booked')->firstOrFail()->id;


            $data = $room->whereNotIn('id',App\Booking::select('id')->with('bookable')->where(function ($query) {
            $query->when(request(['check_in','check_out']), function($q){
                  return $q->where('bookable.check_out','=<', request('check_in'))
                               ->where('bookable.check_in','>=',request('check_out'))
                               ->where('bookable.book_status_id',$status_id);

                     });
            }))->get();

           } //end of if (request->request)
           else
           {
            //
           }
            return response()->json($data, $roomQuantity);

         
        } //end of if (request->ajax) 
    }

web

//ajax-availability 
Route::post('api/available-quantity','[email protected]')->name('available-quantity');

any help i am new to ajax , thanks

Please sign in or create an account to participate in this conversation.