SOW : Ajax select
SOW plugins are part of Smarty Core, written from scratch!
src/js/sow.core/sow.ajax_select.js
Overview
Self populate and/or populate another select by ajax. Unlimited chains/cascading supported!
Callbacks also supported, including a global default callback overwritable using params.
select.js-ajax class is required!
Requirements: server must return the data in json format.
View json format
Ajax select Basic
<select class="js-ajax form-select mb-3" data-ajax-target="#county_list">
<option value="0">Select Contry...</option>
<option value="1">United States</option>
<option value="2">Romania</option>
</select>
<select id="county_list" class="form-select" disabled=""
data-ajax-url="_ajax/select_ajax.php"
data-ajax-method="GET"
data-ajax-params="['action','get_county_list']['param2','value2']">
<option value="">Select Country First</option>
</select>
Ajax select Self populate
Self populate on page load!
<select class="js-ajax form-select"
data-ajax-url-self-populate="_ajax/json_country.json"
data-ajax-method="GET"
data-ajax-params="['action','get_county_list']['param2','value2']">
</select>
Ajax select Container switch
Self populate on page load and show|hide containers according to selected option.
<select class="js-ajax form-select mb-3"
data-ajax-url-self-populate="_ajax/json_select_show_container.json"
data-ajax-method="GET"
data-ajax-params="['action','get_county_list']['param2','value2']">
</select>
<div id="container__1" class="d-none">Container : 1</div>
<div id="container__2" class="d-none">Container : 2</div>
[
{
"label": "Select Option...",
"value": "",
"selected": true
},{
"label": "Container 1",
"value": "1",
"selected": false,
"show_container": "#container__1"
},{
"label": "Container 2",
"value": "2",
"selected": false,
"show_container": "#container__2"
}
]
Ajax select Related
Self populate on page load, then populate another(s)!
1. The first select is loading data via ajax/json using the attribute: data-ajax-url-self-populate="..."
2. If there is a default selected option on load (see json), then the second select is triggered to load its own data via ajax/json (data-ajax-url="..." attribute) according to the selected value of the first select. The same logic is when options of the first select are changed!
It is possible to relate multiple selects (cascading) or using a master select related to many others adding multiple IDs separated by comma:
data-ajax-target="#secondSelect, #thirdSelect, #fourthSelect" (or a single class instead of multiple IDs, like ".relatedSelects").
Debug is on for this demo, so requests are in the console.
<select class="js-ajax form-select mb-3"
data-ajax-method="GET"
data-ajax-target="#secondSelect"
data-ajax-url-self-populate="_ajax/json_country.json"
data-ajax-params="['action','get_county_list']['param2','value2']">
</select>
<select id="secondSelect" class="js-ajax form-select" disabled=""
data-ajax-url="_ajax/select_ajax.php"
data-ajax-method="GET"
data-ajax-params="['action','get_county_list']['param2','value2']">
<option value="">Select Country First</option>
</select>
Ajax select Callback
<select class="js-ajax form-select mb-3"
data-ajax-target="#county_list_cb"
data-ajax-callback-function="callback_example1">
<option value="0">Select Contry...</option>
<option value="1">United States</option>
<option value="2">Romania</option>
</select>
<select id="county_list_cb" class="js-ajax form-select" disabled=""
data-ajax-url="_ajax/select_ajax.php"
data-ajax-method="GET"
data-ajax-callback-function="callback_example2"
data-ajax-params="['action','get_county_list']['param2','value2']">
<option value="">Select Country First</option>
</select>
<script>
callback_example1 = function(el, value, label) {
// el = element $(this)
// value = selected value (string)
// label = selected label (string)
$.SOW.core.toast.show('danger', '', 'Label: ' + label + '<br> Value: ' + value, 'top-center', 4000, true);
}
callback_example2 = function(el, value, label) {
// el = element $(this)
// value = selected value (string)
// label = selected label (string)
$.SOW.core.toast.show('danger', '', 'Label: ' + label + '<br> Value: ' + value, 'top-center', 4000, true);
}
</script>
Select Container switch
<select class="js-ajax form-select mb-3">
<option value="">Select Option...</option>
<option value="1" data-show-container="#container__swich_1">Container 1</option>
<option value="2" data-show-container="#container__swich_2">Container 2</option>
</select>
<div id="container__swich_1" class="d-none">Container 1</div>
<div id="container__swich_2" class="d-none">Container 2</div>
Form populate
Select to populate the form below
<select class="js-ajax form-select mb-4"
data-form-target="#form_populate_example"
data-ajax-url="_ajax/json_select_form_populate.json"
data-ajax-params="['action','form_populate']['param2','value2']">
<option value="">Select Option...</option>
<option value="1">Lorem Ipsum</option>
</select>
<div id="form_populate_example" class="p-3 bg-light rounded">
<div class="form-floating mb-3">
<input placeholder="First Name" id="first_name" type="text" value="" class="form-control">
<label for="first_name">First Name</label>
</div>
<div class="form-floating mb-3">
<input placeholder="Last Name" id="last_name" type="text" value="" class="form-control">
<label for="last_name">Last Name</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input form-check-input-primary" type="checkbox" value="" id="test_agree" checked>
<label class="form-check-label" for="test_agree">
I agree
</label>
</div>
<div class="mb-3">
<div class="form-check form-check-inline">
<input class="form-check-input form-check-input-primary" type="radio" name="inlineRadioOptions" id="radio_1" value="1">
<label class="form-check-label" for="radio_1">Radio 1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input form-check-input-primary" type="radio" name="inlineRadioOptions" id="radio_2" value="2">
<label class="form-check-label" for="radio_2">Radio 1</label>
</div>
</div>
<div class="form-floating mb-3">
<textarea placeholder="Textarea" id="my_description" class="form-control" rows="2"></textarea>
<label for="my_description">Description</label>
</div>
<select class="form-select mb-3" id="country_id">
<option value="0">Select Country...</option>
<option value="1">United States</option>
<option value="2">Romania</option>
</select>
</div>
[
{
"first_name": "John",
"last_name": "Doe",
"test_agree": 1,
"radio_2": 1,
"my_description": "Lorem ipsum dolor sit amet...",
"country_id": 2
}
]