development:jquery:start

Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

development:jquery:start [14/02/2020 05:12] – creat matedevelopment:jquery:start [02/03/2020 03:44] (actual) – [ejemplo] mate
Línia 28: Línia 28:
 <input type="text" id="date"> <input type="text" id="date">
 </code> </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>
 +
 +
 +
  
  • development/jquery/start.1581685956.txt.gz
  • Darrera modificació: 14/02/2020 05:12
  • per mate