Difference between revisions of "JQuery:Tips"
From Aino Wiki
(→Dopo il rendering della pagina) |
(No difference)
|
Latest revision as of 09:21, 12 March 2019
Lavorare sugli object
Trasformazioni in stringa
JSON.stringify trasforma un oggetto generico in stringa.
Indipendentemente dal tipo visualizza contenuto e struttura della variabile 'data' contenente un JSON:
function WEBAPI_Test(strTestoInput) { try { $.ajax({ type: 'POST', url: 'Prova-Post1?testoInput=' + strTestoInput, dataType: 'json', success: function (data) { try { var strOut = JSON.stringify(data); // <--- Trasforma in Json in stringa alert("Oggetto ricevuto:\n" + strOut); } catch (e) { alert(e.message); } }, error: function (xhr) { alert('Si è verificato un errore:\nStatus ' + xhr.status + '\nMessage: ' + xhr.statusText); } }); } catch (e) { alert(e); } return; }
DOM
Ricerca e valorizzazione
La ricerca si fa con $('#idDelTAG')
Per il testo nei DIV usare: .text() che non funziona in elementi di form inputs o scripts.
To set or get the text value of input or textarea elements, use the .val() method. To get the value of a script element, use the .html() method
Valorizzare e ricercare su un campo nascosto. Segue HTML:
<!-- Campo nascosto col PageId --> <input type="hidden" name="hddPageId" id="hddPageId" />
JQuery
// Assegnazione campo nascosto var strResponseData = 'PageId_xxxx'; $('#hddPageId').val(strResponseData); //Prelievo del contenuto del campo nascosto: alert($('#hddPageId').val());
Testo e/o HTML nei DIV
<div id="Content"> </div>
JQuery
$('<p>Text</p>').appendTo('#Content');
Nascondere e Visualizzare
Sintassi:
$(selector).hide([speed] [,callback]);
$(selector).show([speed] [,callback]);
$("button").click(function(){ $("p").hide(1000); }); $("#show").click(function(){ $("p").show(); });
Con i DIV
Cambiando lo stile.
HTML
<div id="DivCommunications" style="visibility: hidden; background-color:cornsilk"> <p>Messaggi</p> <div id="DivMessageText"></div> <p>Errori:</p> <div id="DivErrorText"></div> </div>
Javascript:
$('#DivCommunications').css({'visibility' : 'visible'});
Verifiche
CheckBox
Verifica se è stato ceccato
if ($('form #' + checkBoxIdName).is(':checked')) { //Si cambia Stile in bold selChkFeatValueInContent $('form #' + spanCheckIdName).addClass("selChkFeatValueInContent"); }
Cambiare attributi
Cambiare classe
//Si cambia Stile in bold selChkFeatValueInContent $('form #' + spanCheckIdName).addClass("selChkFeatValueInContent");
Oggetti JSON
Proprietà oggetto da Ajax
Accesso alle proprietà di un oggetto restituito da una chiamata Ajax
$.ajax({ .. dataType: 'json' // using json, jquery will make parse for you });
Dopo la callback $ajax supponendo di ricevere il seguente oggetto JSON
[{"name":"myName" ,"address": "myAddress" }]
Per accedere alle property, si suppone comunque di accedere ad un array di elementi:
data[0].name; data[0].address; // L'accesso ad una Proprietà potrebbe anche essere fatto come segue: Object["property"] // in some case
Eventi
Dopo il rendering della pagina
JQuery:
$(document).ready(function(){ // your code });
JavaScript
document.addEventListener('DOMContentLoaded', function() { // your code here }, false);
Varie
Ritardare animazione
... bho $.delay(3000); ... bho
Cambiare il puntatore
//DEFAULT document.body.style.cursor = 'default'; // CLESSIDARA document.body.style.cursor = 'wait';
Mappa e Link
HTML | CSS | JavaScript
Parole chiave:
