OctoberCMS: Ajax Handler

Question

I have created a plugin using Builder.

There are 2 Models:

• Provider
• Location

I am trying to create 3 independent filters on the frontend so users can filter the list of providers by name & their location.

This is my Provider Model

<?php namespace JacobFeeley\Matrix\Models;

use Model;

/**
 * Model
 */
class Provider extends Model
{
    use \October\Rain\Database\Traits\Validation;

    use \October\Rain\Database\Traits\SoftDelete;

    protected $dates = ['deleted_at'];


    /**
     * @var string The database table used by the model.
     */
    public $table = 'jacobfeeley_matrix_providers';

    /**
     * @var array Validation rules
     */
    public $rules = [
    ];

    public $jsonable = [
        'contacts',
        'courses'
    ];

    public $belongsTo = [
        'location' => 'JacobFeeley\Matrix\Models\Location'
    ];

    public function scopeApplyTitle($query, $title)
    {
        return $query->where('title', $title);
    }

    public function scopeApplyLocation($query, $location)
    {
        return $query->where('location', $location);
    }

}

My Location Model

<?php namespace JacobFeeley\Matrix\Models;

use Model;

/**
* Model
*/
class Location extends Model
{
      use \October\Rain\Database\Traits\Validation;

      use \October\Rain\Database\Traits\SoftDelete;

      protected $dates = ['deleted_at'];


      /**
       * @var string The database table used by the model.
       */
      public $table = 'jacobfeeley_matrix_locations';

      /**
       * @var array Validation rules
       */
      public $rules = [
      ];

      public $hasMany = [
          'providers' => 'JacobFeeley\Matrix\Models\Providers',
          'courses' => 'JacobFeeley\Matrix\Models\Courses'
      ];

      public function scopeApplyTitle($query, $title)
      {
          return $query->where('title', $title);
      }

      public function scopeApplyProvider($query, $provider)
      {
          return $query->where('provider', $provider);
      }

    }
}

I can now use this as an example to get all the Providers in London:

Provider::applyLocation('London')->get();

What I don't know how to do is to populate 2 frontend dropdowns

• The first with all the proivders
• The second with all the locations

Here is my Component

<form>

    <div class="form-group row">

        <div class="form-group col-md-4">
            <select data-request="" class="form-control s2">
                <option selected disabled>Select Provider</option>

            </select>
        </div>

        <div class="form-group col-md-4">
            <select data-request="" class="form-control s2">
                <option selected disabled>Select Location</option>

            </select>
        </div>

        <div class="form-group col-md-4">
            <select data-request="" class="form-control s2">
                <option selected>Select Course</option>

            </select>
        </div>

    </div>

</form>

I would appreciate if anyone could help me out with the code

Answer 1

Your form should look like this:

<form>

    <div class="form-group row">

        <div id="providers" class="form-group col-md-4">
            {% partial "@providers" %}
        </div>

        <div id="locations" class="form-group col-md-4">
            {% partial "@locations" %}
        </div>

        <div class="form-group col-md-4">
            <select data-request="" class="form-control s2">
                <option selected>Select Course</option>

            </select>
        </div>

    </div>

</form>

The providers.htm partials:

<select data-request="onSelectProvider" class="form-control s2">
    <option selected disabled>Select Provider</option>
{% for provider in providers %}
    <option value="{{ provider.id }}">{{ provider.name }}</option>
{% endfor %}
</select>

And locations.htm:

<select data-request="onSelectLocation" class="form-control s2">
    <option selected disabled>Select Location</option>
{% for location in locations %}
    <option value="{{ locations.id }}">{{ locations.name }}</option>
{% endfor %}
</select>

Of course, you'll need to adapt the field names in the referenced models since I don't have the details of your implementation.