jquery [miguel angel torres egea]

Aquesta pàgina és només de lectura. Podeu veure'n el codi font, però no podeu canviar-la. Consulteu el vostre administrador si penseu que això és degut a algun error.
= jquery
[[https://releases.jquery.com/]]

== datepicker
=== fuentes
  * [[https://bootstrap-datepicker.readthedocs.io/en/latest/options.html]]
  * [[https://uxsolutions.github.io/bootstrap-datepicker/?#sandbox]]
  * [[https://gijgo.com/datepicker/example/bootstrap-4]]
  * [[https://stackoverflow.com/questions/25874375/multiple-dates-in-bootstrap-date-picker]]

=== ejemplo
<code html>
<script>
        $('#date').datepicker({
            uiLibrary: 'bootstrap4',
            minDate: '01/01/2020',
            maxDate: '31/12/2020',
            maxViewMode: 'months',
            multidate: 15,
            multidateSeparator: ',',
            autoclose: false,
            language: 'ca',
            datesDisabled: ['02/06/2020', '02/21/2020'],
            format: 'dd/mm/yyyy'
        });
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<input type="text" id="date">
</code>

== petición AJAX y modificación DOM
  * boostrat
    * custom-control-input
    * toast
  * DataTable
<code javascript>
$(document)
	.ready(function () {

		$('#recorda').toast('show');

		$('#tablecontrols').DataTable({
			paging: false,
			ordering: false,
			select: true
		});

		$('.dataTables_length').addClass('bs-select');

		$('td[data-href]').on('click', function() {
			window.location = ( $(this).data("href") );
			//window.open( $(this).data("href"), "_blank" );
		});

		$("input:checkbox").on('change', function() {

			inputObject = $(this);
			clase = ( $(this).val() == "1") ? 'table-success' : 'table-danger';
			id = $(this).attr('data-ajax-id');
			field = $(this).attr('data-ajax-field');
			isChecked = $(this).is(":checked");
			isValue = (isChecked) ? 1 : 0;
			datos =  {
				'id':id,
				'field':field,
				'value':isValue
			};
			ajaxError = 0;
			
			$('#desant').toast('show');

			jQuery.ajax({
				type: 'post',
				url: '/controller/controls/update-list-checks.php',
				data: datos,
				success: function(resp) {
					$('#desant').toast('hide');
					if ( isChecked ) $(inputObject).parents('tr').addClass(clase);
					else $(inputObject).parents('tr').removeClass(clase);
					$('#desat').toast('show');
				},
				error: function(xhr,status,error) {
					$('#desant').toast('hide');
					$('#error').toast('show');
					$(inputObject).prop('checked',!isChecked);
				},
				dataType:'json'
			});
			
		});
	});
</code>
<code html>
	<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

		<div id="desant" class="toast" role="alert" aria-live="assertive" aria-atomic="true" 
		  	style="position: absolute; top: 9rem; right: 1rem;">
			<div class="toast-header">
			<span class="badge badge-warning">&nbsp;&nbsp;</span>
				<strong class="mr-auto">&nbsp;Atenció!</strong>
				<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="toast-body">
				S'estàn desant les dades...
			</div>
		</div>

		<div id="desat" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000"
		  	style="position: absolute; top: 9rem; right: 1rem;">
			<div class="toast-header">
			<span class="badge badge-success">&nbsp;&nbsp;</span>
				<strong class="mr-auto">&nbsp;Atenció!</strong>
				<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="toast-body">
				Les dades s'han desat correctament
			</div>
		</div>

						<td class="text-center align-middle">
							<div class="custom-control custom-switch mb-3">
								<input type="checkbox" data-ajax-id="<?=$element['id']?>" data-ajax-field="exclos" class="custom-control-input" id="exclos<?=$element['id']?>" name="exclos<?=$i?>" value="2" <?=($element['exclos'] == 1) ? 'checked' : ''?>>
								<label class="custom-control-label" for="exclos<?=$element['id']?>">&nbsp;</label>
							</div>
							<!--input type="checkbox" name="exclos" value="1" <?=($element['exclos'] == 1) ? 'checked' : ''?> /-->
						</td>
</code>
<code php>
<?php 
session_start();
// http://www.faqs.org/rfcs/rfc2616.html

require_once "../../../config.php";
require_once $BASE_PATH."www/model/model-controls.php";

	$codRetronDesc = array(
		0 => 'operació realitzada correctament',
		1 => 'error en els paràmetres enviats'
	);
	$fieldsPermesos = array('exclos','ressonat');

	$codRetorn = 0;

	$id = ( array_key_exists('id',$_POST) ) ? $_POST['id'] : 0;
	$field = ( array_key_exists('field',$_POST) ) ? $_POST['field'] : '';
	$value = ( array_key_exists('value',$_POST) ) ? $_POST['value'] : '';

	if ( (array_search($field,$fieldsPermesos))!== false ) {
		$data = array(
			'id' => $id,
			$field => $value
		);
		updateControl($data);
		$headerRetorn = 'HTTP/1.1 200 OK';
	} else {
		$codRetorn = 1;
		$headerRetorn = 'HTTP/1.1 406 Not Acceptable';
	}

	$arrRespuesta = array(
		"status" => $codRetorn,
		"txt" => $codRetronDesc[$codRetorn]
	);

	header($headerRetorn);
	header('Content-Type: application/json; charset=UTF-8');
	echo json_encode($arrRespuesta);

?>
</code>