I have a date picker that when the form is submitted, i'd like the available dates to show up below.
So far i've been successful getting the ajax request to work but don't know how to format it in my view to display it with a bootstrap styled table.
How do i get the html to show up in my view in a way that i can format it with bootstrap table styling. Should i load another view on success? if so, how do i do so.
Any help would be appreciated. Thanks.
My view with the date picker
@extends('layouts.default')
@section('content')
<h1>Check party availabilty</h1>
<!-- Form -->
{!! Form::open(array('action' => 'PartiesController@checkDate', 'id'=>'form')) !!}
<!--{!! Form::open(array('url' => '/parties/available')) !!}-->
<div clas="form-group">
<label>Choose Date:</label>
<input id="dates" class="form-control" type="date" name="pdate" id="date">
</div>
<div class="form-group">
{!! Form::submit('pdate', ['class' => 'btn btn-primary form-control']) !!}
</div>
{!! Form::close() !!}
<div class="result"></div>
<script>
//when form is submitted
$("form").submit(function(){
//declare the url to post. same as in form action.
var url = $(this).attr('action');
// serialize all form date.
var data = $(this).serialize();
// Start $.ajax() method
$.ajax({
// The URL for the request. variable set above
url: url,
// The data to send (will be converted to a query string). variable set above
data: data,
// Whether this is a POST or GET request
type: "POST",
// The type of data we expect back. can be json, html, text, etc...
dataType : "html",
// Code to run if the request succeeds;
// the response is passed to the function
success: function( msg ) {
$(".result").html(msg);
},
// Code to run if the request fails; the raw request and
// status codes are passed to the function
error: function( xhr, status, errorThrown ) {
alert( "Sorry, there was a problem!" );
console.log( "Error: " + errorThrown );
console.log( "Status: " + status );
console.dir( xhr );
},
// Code to run regardless of success or failure
complete: function( xhr, status ) {
//alert( "The request is complete!" );
}
});
return false;
});
</script>
@stop
my controller
public function checkDate()
{
//get selected date from input
$dateSelected = Request::input('pdate');
$check = DB::select("
SELECT startTime FROM parties_time_slots
WHERE id IN
(SELECT timeslots_id
FROM parties
where date = '$dateSelected'
GROUP BY timeslots_id
HAVING COUNT(*) < 2)
OR
id not in
(SELECT timeslots_id from parties
where date = '$dateSelected')
");
if (Request::ajax())
{
return $check;
}
else
{
return 'no ajax';
}
}