Ad

How To Use Route For Dependent Relationship In Octobercms?

- 1 answer

I am currently working on a front-end form using ajax data request. In my code i have this in the php block that gets displayed in a partial when a category in select-box is selected to show subcategories.

function onChangeCat()
{
$this['subs'] = Cat::whereHas('parent', function ($query) use($cats){

 $query->where('cats','=', $cats );

})->pluck('cat_title', 'id'); 

I am trying to connect it to a route so that when a user clicks on a category, related subcategories get displayed in the second select-box.

This is my route file with #id of category select-box as parameter

Route::get('ajax/{cats}' , function () {

//
 return json_encode();
});

How do i connect the codes in php block and routes to work so that only related subcategories of category is displayed?

Ad

Answer

To pass current element value to Ajax Handler you need to give it name - attribute and add data-request="onChange" handler. all other stuff will be handled by October CMS Ajax Api

<select name="country" data-request="onChange">
    <option id="1">A</option>
    <option id="2">B</option>
    <option id="3">C</option>
    <option id="4">D</option>
</select>

In your Ajax handler

function onChange() {
    $id = post('country'); // as we name it `country` for select
    // ^ - this will be your selected value [id]
    return ['data' => 'some data'];
}

Further process data [ IF its needed ] Other wise you can just use data-request-update="calcresult: '#result'" with returning Html Markup

<script>
function myFunction(data) {
    console.log(data)
}
</script>


<select 
   name="first" 
   data-request="onChange" 
   data-request-success="myFunction(data)">
...
</select>

Up on success-full request this will call myFunction with return data in our case it will be {'data':'some data'} JSON Object, whatever you return from the Ajax-Handler.

if any doubt please comment.

Ad
source: stackoverflow.com
Ad