View source for JQuery:Tips

=Lavorare sugli object=
==Trasformazioni in stringa==
<code>JSON.stringify</code> trasforma un oggetto generico in stringa.<br />
Indipendentemente dal tipo visualizza contenuto e struttura della variabile 'data' contenente un JSON:
<syntaxhighlight lang="javascript">
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;
}
</syntaxhighlight>
=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. <br />
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<br />

Valorizzare e ricercare su un campo nascosto. Segue HTML:
<syntaxhighlight lang="html5">
<!-- Campo nascosto col PageId -->
<input type="hidden" name="hddPageId" id="hddPageId" />
</syntaxhighlight>
JQuery
<syntaxhighlight lang="javascript">
// Assegnazione campo nascosto
var strResponseData = 'PageId_xxxx';
$('#hddPageId').val(strResponseData);

//Prelievo del contenuto del campo nascosto:
alert($('#hddPageId').val());
</syntaxhighlight>
===Testo e/o HTML nei DIV===
<syntaxhighlight lang="html5">
<div id="Content">
</div> 
</syntaxhighlight>
JQuery
<syntaxhighlight lang="javascript">
$('<p>Text</p>').appendTo('#Content');
</syntaxhighlight>

==Nascondere e Visualizzare==
Sintassi:<br />
''$(selector).hide([speed] [,callback]);''<br />
''$(selector).show([speed] [,callback]);''
<syntaxhighlight lang="javascript">
$("button").click(function(){
    $("p").hide(1000);
});

$("#show").click(function(){
    $("p").show();
});
</syntaxhighlight>
===Con i DIV===
Cambiando lo stile.<br />
HTML
<syntaxhighlight lang="html5">
<div id="DivCommunications" style="visibility: hidden; background-color:cornsilk">
    <p>Messaggi</p>
    <div id="DivMessageText"></div>
    <p>Errori:</p>
    <div id="DivErrorText"></div>
</div>
</syntaxhighlight>
Javascript:
<syntaxhighlight lang="javascript">
$('#DivCommunications').css({'visibility' : 'visible'});
</syntaxhighlight>
==Verifiche==
===CheckBox===
Verifica se è stato ceccato
<syntaxhighlight lang="javascript">
if ($('form #' + checkBoxIdName).is(':checked')) {
   //Si cambia Stile in bold       selChkFeatValueInContent
   $('form #' + spanCheckIdName).addClass("selChkFeatValueInContent");
}
</syntaxhighlight>
==Cambiare attributi==
===Cambiare classe===
<syntaxhighlight lang="javascript">
   //Si cambia Stile in bold       selChkFeatValueInContent
   $('form #' + spanCheckIdName).addClass("selChkFeatValueInContent");
</syntaxhighlight>

=Oggetti JSON=
==Proprietà oggetto da Ajax==
Accesso alle proprietà di un oggetto restituito da una chiamata Ajax
<syntaxhighlight lang="javascript">
$.ajax({
  ..
  dataType: 'json' // using json, jquery will make parse for  you
});
</syntaxhighlight>
Dopo la callback $ajax supponendo di ricevere il seguente oggetto JSON
<pre>
[{"name":"myName" ,"address": "myAddress" }]
</pre>
Per accedere alle property, si suppone comunque di accedere ad un array di elementi:
<syntaxhighlight lang="javascript">
data[0].name;
data[0].address;
// L'accesso ad una Proprietà potrebbe anche essere fatto come segue:
Object["property"] // in some case
</syntaxhighlight>
=Eventi=
==Dopo il rendering della pagina==
JQuery:
<syntaxhighlight lang="javascript">
$(document).ready(function(){
// your code
});
</syntaxhighlight>
JavaScript
<syntaxhighlight lang="javascript">
document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);
</syntaxhighlight>

=Varie=
==Ritardare animazione==
<syntaxhighlight lang="javascript">
... bho
$.delay(3000);
... bho
</syntaxhighlight>

==Cambiare il puntatore==
<syntaxhighlight lang="javascript">
//DEFAULT
document.body.style.cursor = 'default';
// CLESSIDARA
document.body.style.cursor = 'wait';
</syntaxhighlight>

=Mappa e Link=

----
[[JQuery]]

----
[[HTML]] | [[CSS]] | [[JavaScript]]

----
'''Parole chiave''':