Funciones jQuery
//Ambas líneas son equivalentes
jQuery('div').remove();
$('div').remove();
// jQuery: Esconder, ocultar
$('div').hide(); //Esconde el div
$('div').show(); //Muestra el div
// Encadenando métodos
$('div').addClas('error').fadeIn();
// jQuery: Selectors
$('input'); // selección de un tag
$('.error'); // selección de una clase
$('#frmAgregar'); // selección de un id
$('#frmAgregar input.error'); // podemos mezclarlos
$('div:animated'); // elementos siendo animados
$('input[type="text"]'); //atributos de un tag
$('input[type!="text"]'); //atributos de un tag (neg.)
$('input[name*="dob"]'); //el atributo contiene 'dob'
$('input[name^="dob"]'); //el atributo termina en'dob'
$('input[name$="dob"]'); //el atributo termina en'dob'
$('input:checkbox '); // $('input[type="checkbox"]');
$('input:checked '); // elementos marcados
$('ul.nav > li'); // selector hijo (inmediato)
$("div:contains('John')"); // contiene (innerHtml)
$("tr:even") // pares (empienza en 0)
$("tr:odd") // impares (empienza en 0)
$("tr:first"); // primera fila
$("tr:last"); // primera fila
$("ul li:nth-child(2)"); // segundo hijo
// jQuery: Attributes
$("div").addClass('selected'); // agrega la clase
$("div").removeClass('selected'); // quita la clase
$("div").hasClass('sel');//tiene clase sel? (booleano)
$("div").attr('id'); // obtiene el atributo
$("div").attr('id','nav'); // setea el atributo
$("div").removeAttr('id'); // quita el atributo
$("div").html(); // obtiene el html
$("div").html("Hi"); // setea el html
$("input#txtEdad").val(); // obtiene el valor
// jQuery: Traversing
$("div").add("a"); // agrega elementos al selector
$("li").each(callback); // Itera la seleccion
$("ul").first(); // devuelve el primero
$("li.quinto").next(); // devuelve el siguiente
$("li.sexto").prev(); // devuelve el anterior
$("a#toc").parent(); // devuelve el padre
$("a#toc").parents(); // devuelve los padres
$("a#toc").sibilings(); // devuelve los hermanos
// jQuery: AJAX
$.ajax({
url: 'ajax-load-wimarbueno.php',
type: 'get',//GET, POST
cache: false,
dataType: 'html',//html, jsonp
beforeSend: function() {
$('#ajax-cont').html('
');
},
success: function(response) {
$('#ajax-cont').html('');
$('#ajax-cont').fadeOut("slow").html(response).fadeIn("slow");
},
error: function(jqXHR, exception) {
if (jqXHR.status === 0) {
$('#ajax-cont').html('Not connect. Verify Network.');
} else if (jqXHR.status == 400) {
$('#ajax-cont').html('Server understood the request but request content was invalid. [400].');
} else if (jqXHR.status == 401) {
$('#ajax-cont').html('Unauthorised access. [401].');
} else if (jqXHR.status == 403) {
$('#ajax-cont').html('Forbidden resouce can"t be accessed. [403].');
} else if (jqXHR.status == 404) {
$('#ajax-cont').html('Requested page not found. [404].' + jqXHR.status );
} else if (jqXHR.status == 500) {
$('#ajax-cont').html('Internal Server Error. [500].');
} else if (jqXHR.status == 503) {
$('#ajax-cont').html('Service Unavailable. [503]');
} else if (exception === 'parsererror') {
$('#ajax-cont').html('Requested JSON parse failed.');
} else if (exception === 'timeout') {
$('#ajax-cont').html('Time out error.');
} else if (exception === 'abort') {
$('#ajax-cont').html('Ajax request aborted.');
} else {
$('#ajax-cont').html('Uncaught Error. ' + jqXHR.responseText);
}
}
}); //fin ajax
// jQuery: Serializar un formulario
$("form").on("submit", function(event) {
event.preventDefault();
console.log($(this).serialize());
});
01.- PHP - JSON -Si en PHP respondes con mensaje en JSON algo como:
$mysqli = new mysqli("localhost", "wilzonmj", "wilzon_mj", "php_basededatos");
$mysqli->set_charset('UTF8');
.
.
.
$result = $mysqli->query($sqlReport);
if ($mysqli->affected_rows > 0) {
echo json_encode(array(
"success" => true,
"fileName" => $nombreDelArchivo,
"count" => $mysqli->affected_rows,
"messagge" => '<div style="text-align:center;">Se exportó correctamente' . $mysqli->affected_rows . ' registros en el archivo con el nombre:' . $nombreDelArchivo . '. <br /><a href="exported-csv/' . $nombreDelArchivo . '">Click aquí para descargar</a></div>'
));
} else {
echo json_encode(array(
"success" => false,
"fileName" => $dateToday,
"messagge" => 'Sentimos el servidor está demasiado ocupado para ejecutar esta orden.'
));
}
a
En JS se recuperaria de esta manera:
$.ajax({
url: opciones.ruta_php,
type: 'get',
data: {
id: '18',
categoria: '1'
},
cache: false,
dataType: 'html',
beforeSend: function() {
$('.ajax-msg').html("<div class='loading'></div>");
},
success: function(response) {
$('.ajax-msg').html('');
var arrayReporte = JSON.parse(response);//con estor esuperamos el JSON
alert(arrayReporte.fileName)
$('.message').fadeOut("slow").html(arrayReporte.messagge).fadeIn('slow');
},
error: function(jqXHR, exception, error) {
var err = exception + ", " + error;
console.log("Error: " + err);
$('.ajax-msg').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> No se pue ejecutar.</div>')
}
}); //fin ajax
