October CMS: AJAX form - ajax

Question

My aim is to update a partial to show course dates when a date range is specified and submitted.
I have a function that works as expected.
user selects a start date
user selects an end date
the user clicks search
results are logged to the console
Here is the function
function onFetchDataFromServer()
{
$course = Course::findOrFail( $this->param('id') );
$start = Input::get('start_date');
$end = Input::get('end_date');
$dates = $course->coursemetas->whereBetween('date', array($start, $end));
return $dates;
}
Here is the markup
<form class="row gx-3 align-items-center" data-request="onFetchDataFromServer" data-request-success="console.log(data)"">
<div class="col-12 col-lg pxp-has-left-border">
<div class="input-group mb-3 mb-lg-0">
<span class="input-group-text"><span class="fa fa-calendar-o"></span></span>
<input type="date" class="form-control" id="startPicker" name="start_date" placeholder="Choose a start date">
</div>
</div>
<div class="col-12 col-lg pxp-has-left-border">
<div class="input-group mb-3 mb-lg-0">
<span class="input-group-text"><span class="fa fa-calendar-o"></span></span>
<input type="date" class="form-control" id="endPicker" name="end_date" placeholder="Choose an end date">
</div>
</div>
<div class="col-12 col-lg-auto">
<button type="submit">Search dates</button>
</div>
</form>
So the rather than logging the results to the console, I now would like to update a partial.
I have a partial in the view called 'course/metas'.
Can someone please help me?
Thanks in advance.

Answer 1

You can try something like this. Check the documents here.
This is for a page's PHP section:
function onFetchDataFromServer()
{
$course = Course::findOrFail( $this->param('id') );
$start = Input::get('start_date');
$end = Input::get('end_date');
$dates = $course->coursemetas->whereBetween('date', array($start, $end));
$this['dates'] = $dates;
return [
'#myDiv' => $this->renderPartial('coursemetas')
];
}
This is for component plugin:
function onFetchDataFromServer()
{
$course = Course::findOrFail( $this->param('id') );
$start = Input::get('start_date');
$end = Input::get('end_date');
$dates = $course->coursemetas->whereBetween('date', array($start, $end));
$this->page['dates'] = $dates;
return [
'#myDiv' => $this->renderPartial('#coursemetas')
];
}
Note the # sign sent with the renderPartial as this tells the framework to look inside the plugin folder for the partial. Or you can specify the partial path by component and partial name like this return $this->renderPartial('course::coursemetas');.