Merge pull request #11 from CottaCush/features/dependent-dropdown-asset

Features/dependent-drop-down-asset

src/Assets/DependentDropdownAsset.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace CottaCush\Yii2\Assets;
+
+/**
+ * Class DependentDropdownAsset
+ * @package CottaCush\Yii2\Assets
+ * @author Kehinde Ladipo <ladipokenny@gmail.com>
+ */
+class DependentDropdownAsset extends LocalAssetBundle
+{
+    public $js = [
+        'js/dependent-dropdown.js'
+    ];
+    public $css = [
+        'css/dependent-dropdown.css'
+    ];
+
+    public $depends = [
+        'yii\web\JqueryAsset'
+    ];
+}

src/public-assets/js/dependent-dropdown.js

@@ -0,0 +1,47 @@
+/**
+ * @file
+ * @author Kehinde Ladipo <ladipokenny@gmail.com>
+ *
+ * Make an API request to get the dependent of a parent <select>. The API should return the full <select> element.
+ *
+ * A parent <select> looks like the following:
+ *
+ *     <select data-dependent-dropdown data-url="https://example.com/api/endpoint">
+ *       ...
+ *     </select>
+ *
+ * The `data-dependent-dropdown` attribute signifies that this is a parent drop-down and attaches this functionality
+ * The `data-url` attribute carries the endpoint for the url
+ *
+ */
+$(function () {
+
+    /**
+     * Clears and reloads the child drop-down for a parent drop-down
+     * @event change
+     */
+    $(document).on('change', 'select[data-dependent-dropdown]', function () {
+        var $element = $(this);
+        // Remove a dependent drop-down child if it already exists
+        $element.next('.dependent-dropdown-child').remove();
+
+        $.ajax({
+            type: 'POST',
+            url: $element.data('url'),
+            data: { 'parent_id': $element.val() },
+            beforeSend: function() {
+                $element.addClass('dependent-dropdown-loading');
+            },
+            success: function(response) {
+                $element.after('<div class="dependent-dropdown-child"></div>');
+                $element.next('.dependent-dropdown-child').append(response.data);
+            },
+            error: function(xhr) {
+                console.log(xhr.status + ': ' + xhr.message);
+            },
+            complete: function() {
+                $element.removeClass('dependent-dropdown-loading');
+            }
+        });
+    });
+});

src/public-assets/less/dependent-dropdown.less

@@ -0,0 +1,9 @@
+.dependent-dropdown-loading{
+  background: url('../img/loading.gif') right 20px center no-repeat;
+  cursor: wait;
+  opacity: 0.6;
+}
+
+.dependent-dropdown-child{
+  margin-top: 10px;
+}