SOW : Core Plugins

SOW = Step Of Web (Smarty author).
SOW plugins are part of Smarty Core, written from scratch!

SOW : Ajax Select

Self populate and/or populate another select by ajax. Unlimited chains/cascading supported!
Callbacks also supported, including a global default callback overwritable by params.

Requirements: server must return the data in json format.
View json format


/* 
	:: Plugin File
	src/js/sow.core/sow.ajax_select.js

	:: Plugin Init
*/	$.SOW.core.ajax_select.init('select.js-ajax');


/* 
	:: Plugin Options|Defaults

*/	$.SOW.core.ajax_select.init('select.js-ajax'. {
		method 				: 'GET',
		contentType 			: '', // jQuery, optional
		dataType 			: '', // jQuery, optional
		headers 			: '', // jQuery, optional
		crossDomain 			: '', // jQuery, optional
		data_params 			: {ajax:'true'}, // jQuery ajax, default params to be sent

		/* 
			callback_example = function(el, value, label) {
				// el 				= target element 	$(this)
				// value 			= selected value 	(string)
				// label 			= selected label 	(string)
			}
		*/
		callback_function 		: ''
});

									

/* 
	:: Overwriting the defaults:
*/
	data-ajax-method="GET" 
	data-ajax-callback-function="callback_example" 
									

Debug Test

Debug test only! Real examples are below.
Open your console to see the params sent to the server!

Regular Select


<select class="form-control mb-3 js-ajax" 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-control" 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>
											
Read about data-ajax-params

Using Bootstrap Select Vendor


<select class="form-control js-ajax bs-select" data-ajax-target="#county_list2">
	<option value="0">Select Contry...</option>
	<option value="1">United States</option>
	<option value="2">Romania</option>
</select>

<select id="county_list2" class="form-control bs-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>
											
Read about data-ajax-params

Ajax : Self Populate on Load A simple way to load options via ajax!


<select class="form-control bs-select js-ajax" 
	data-ajax-url-self-populate="_ajax/json_country.json"
	data-ajax-method="GET" 
	data-ajax-params="['action','get_county_list']['param2','value2']">
</select>
											
Read about data-ajax-params

Ajax : Self Populate Load options via ajax and show/hide containers.
Container : 1
Container : 2

<select class="form-control bs-select mb-3 js-ajax" 
	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="hide-force">
	Container : 1
</div>

<div id="container__2" class="hide-force">
	Container : 2
</div>
											
Read about data-ajax-params

Ajax : Related Selects Self populate and then populate another!

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!

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" Of course, a single class can be used instead of IDs, like ".relatedSelects"

Debug is on for this demo, so requests are in the console.


<select class="form-control bs-select mb-3 js-ajax" 
		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="form-control bs-select js-ajax" disabled=""
	data-ajax-url="_ajax/select_ajax.php" 
	data-ajax-method="GET" 
	data-ajax-params="['action','get_county_list']['paramX','valueX']"
>
	<option value="">Select Country First</option>
</select>
											
Read about data-ajax-params

Using Callback


<select class="form-control bs-select js-ajax 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="form-control bs-select js-ajax" 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>
											
Read about data-ajax-params

Show / Hide Containers A switcher, no ajax requests involved!

Container 1
Container 2

<select class="form-control bs-select mb-3 js-ajax">
	<option value="">Select Option...</option>
	<option value="1" data-show-container="#container_1">Container 1</option>
	<option value="2" data-show-container="#container_2">Container 2</option>
</select>

<div id="container_1" class="hide-force">
	Container 1
</div>

<div id="container_2" class="hide-force">
	Container 2
</div>
											

Form Populate

Select to populate the form below
<!--
This will populate the form (inputs, etc) from ajax!
ID's are important - should match the JSON!
The plugin will autodetect element type (input, select, etc)
-->
<select class="form-control bs-select mb-3 js-ajax" 
	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>


<!-- Container -->
<div id="form_populate_example" class="mt-5 p-3 bg-light rounded">

	<!-- input -->
	<div class="form-label-group mb-3">
		<input placeholder="First Name" id="first_name" type="text" value="" class="form-control">
		<label for="first_name">First Name</label>
	</div>

	<!-- input -->
	<div class="form-label-group mb-3">
		<input placeholder="Last Name" id="last_name" type="text" value="" class="form-control">
		<label for="last_name">Last Name</label>
	</div>

	<!-- checkbox -->
	<label class="form-checkbox form-checkbox-primary">
		<input type="checkbox" name="checkbox" id="test_agree">
		<i></i> I agree
	</label>

	<!-- radio -->
	<div class="mb-3">
		<label class="form-radio form-radio-primary form-radio-bordered">
			<input type="radio" name="radio" id="radio_1" checked>
			<i></i> Radio 1
		</label>

		<label class="form-radio form-radio-primary form-radio-bordered">
			<input type="radio" name="radio" id="radio_2">
			<i></i> Radio 2
		</label>

	</div>

	<!-- textarea -->
	<div class="form-label-group mb-3">
		<textarea placeholder="Textarea" id="my_description" class="form-control" rows="2"></textarea>
		<label for="my_description">Description</label>
	</div>

	<!-- select -->
	<select class="form-control mb-3" id="country_id">
		<option value="0">Select Country...</option>
		<option value="1">United States</option>
		<option value="2">Romania</option>
	</select>

</div>
											
Read about data-ajax-params