SOW : Core Plugins

<!-- 
	Reponse container
-->
<div id="ajax_response_container"><!-- ajax response container --></div>

<!--

 Params

	ajax-callback-function="" 	custom JS function, instead of appending the response to a container
	data-ajax-container="#ajax_response_container" - not used if ajax-callback-function is set
	data-ajax-update-url="false" 	update URL (history push state). default : false
	
	data-error-scroll-up="true" 	scroll up to error

	data-error-toast-text="<i class='fi fi-circle-spin fi-spin float-start'></i> Please, complete all required fields!" 
	data-error-toast-delay="3000" 
	data-error-toast-position="top-center|top-left|top-right|bottom-center|bottom-left|bottom-right"

	Append server response to a container (useful for form reload)
	data-ajax-append-response="#container" 

 Callback Example
 my_callback = function(el, response) {
	// el 		= this from element.  $(this)
	// response 	= server response
 }

 Files are supported using the regular: 
 enctype="multipart/form-data"
 method="POST"

-->
<form 	class="js-ajax bs-validate" novalidate 
		action="_ajax/ajax_form_test_submit.html" 
		method="GET" 
		
		data-ajax-container="#ajax_response_container" 
		data-ajax-update-url="false" 
		data-ajax-show-loading-icon="true" 
		
		data-error-scroll-up="true" 
		data-error-toast-text="<i class='fi fi-circle-spin fi-spin float-start'></i> Please, complete all required fields!" 
		data-error-toast-delay="3000" 
		data-error-toast-position="top-center" 

		data-error-scroll-up="false" 
		data-ajax-callback-function="">

	<input required type="text" name="first_name" value="" placeholder="first name" class="form-control mb-4">
	<input type="text" name="birthdate" value="" placeholder="optional" class="form-control mb-4">

	<button type="submit" class="btn btn-primary">Submit</button>
</form>
											

<!--
This is an example of using static alerts: success or error!
	data-ajax-inline-alert-succes="#alert_success" 
	data-ajax-inline-alert-error="#alert_error" 

Alerts example, hidden by default (.hide-force or .hide are reuquired class)
<div id="alert_success" class="alert alert-success hide-force">
	Thank you! Data Sumbmited!
</div>

<div id="alert_error" class="alert alert-danger hide-force">
	Please, review your data and try again!
</div>

Are useful for simple forms, instead of using 
data-ajax-container="#ajax_response_container" 
and send the html answer from the server side.
Of course, data-ajax-container="..." can be used in combination.
-->



<div id="alert_success" class="alert alert-success hide-force">
	Thank you! Data Sumbmited!
</div>

<div id="alert_error" class="alert alert-danger hide-force">
	Please, review your data and try again!
</div>

<!--
	NOTE: WE NOW USE method="POST" for this demo.
	You can watch your console to see what is sent to the server.
-->
<form 	class="js-ajax bs-validate" novalidate 
		action="../demo.files/php/demo.ajax_request.php" 
		method="POST" 

		data-ajax-inline-alert-succes="#alert_success" 
		data-ajax-inline-alert-error="#alert_error" 

		data-ajax-update-url="false" 
		data-ajax-show-loading-icon="true" 
		data-error-scroll-up="true" 

		data-error-scroll-up="false" 
		data-ajax-callback-function="">

	<input required type="text" name="test_required" value="" placeholder="required field" class="form-control mb-4">
	<input type="text" name="test_optional" value="" placeholder="optional field" class="form-control mb-4">
	<button type="submit" class="btn btn-primary">Submit</button>
</form>
											

ANOTHER EASY ALERT CONTROL:
Ajax will control success/fail alerts according to server response:

	1. unexpected error: 		if server response is this string: {:err:unexpected:}
	2. mising mandatory:		if server response is this string: {:err:required:}
	3. success:			if server response is this string: {:success:}

	data-ajax-control-alerts="true"
	data-ajax-control-alert-succes="#contactSuccess" 
	data-ajax-control-alert-unexpected="#contactErrorUnexpected" 
	data-ajax-control-alert-mandaroty="#contactErrorMandatory" 

	<div id="contactErrorUnexpected" class="hide alert alert-danger">Unexpected Internal Error</div>
	<div id="contactErrorMandatory" class="hide alert alert-danger">Please, complete required fields!</div>
	<div id="contactSuccess" class="hide alert alert-success">Success! Thank you!</div>