JQuery:Tips

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

---

JQuery

---

HTML | CSS | JavaScript

---

Parole chiave: