jQuery - odc. 2

W tematyce jQuery kolejne podsumowanie podstaw. Tym razem są to obsługa zdarzeń oraz komunikacja sieciowa za pomocą AJAX.

Interesujące są zwłaszcza IMHO funkcje live() i delegate() pozwalające przypinać do zdarzeń dany handler, także dla obiektów tworzonych później dynamicznie w przeszłości. Dodatkowo warto tu wymienić funkcję toggle() przypinającą funkcje w zależności od liczby kliknięć.

Obsługa zdarzeń

tradycyjnie

• myButton.addEventListener(‘click’, function() {}, false);  - większość przeglądarek
• myButton.attachEvent(‘onclick’, function() {}); - IE

cross-browser

• click()
• change()  //np. input, textarea - po utracie focusa, select
• blur()
• focus()
• dblclick()
• mousedown()
• mouseup()
• mouseover()
• keydown()
• keypress()
• …

$(‘#target’).dblclick(function() {

alert(‘message’);

});

Wyzwolenie zdarzenia click dla innego elementu:

$(‘#otherID’).click(function() {

$(‘#myID’).click();

});

<select id=”statesSelect”>

<option value=”A”>A</option>

<option value=”B” selected=”true”>B</option>

</select>

$(‘#statesSelect’).change(function() {

alert($(this).val());

});

$(‘#myDiv’).mouseenter(function() {

$(this).toggleClass(‘Highlight’);

$(this).css(‘cursor’, ‘pointer’);

})

.mouseleave(function() {

$(this).toggleClass(‘Highlight’);

});

.mouseup(function(e) {

alert($(e.target).attr(‘id’));

$(this).text(‘X: ‘ + e.pageX);

});

.bind() - użyteczne przy dynamicznie ustalanych zdarzeniach lub przy większej ich liczbie

$(‘#myDiv’).bind(‘click’, function() { … });

$(‘#myDiv’).bind(‘mouseenter mouseleave mouseup’,

function() {     

      $(this).toggleClass(‘entered’);

      if(e.type == ‘mouseup’)

             $(this).text(‘X: ‘ + e.pageX);

}

);

.unbind() - usuwa wszystko lub dla wskazanego rodzaju zdarzenia

$(‘#test’).click(handler);   $(‘#test’).unbind();

$(‘#test’).unbind(‘click’);

.live(), .delegate() - pozwalają na przypinanie handlerów dla elementów selektora, także tych stworzonych później, w przyszłości

.live() - domyślnie bubbling do obiektu document

$(‘.myClass’).live(‘click’, someFunction);

$(‘.myClass’).die(‘click’, someFunction);  //zaprzestanie live

.delegate() - od jQuery 1.4, zastępuje live(), bubbling w ramach kontekstu selektora

$(‘#Divs’).delegate(‘.myClass’, ‘click’, someFunction);

.undelegate() - zatrzymanie delegate()

dodawanie

var phonesDiv = $(‘#PhonesDiv’);

<div id=”PhonesDiv”>

<div>

         <select/>

</div>

<div>

         <input type=”text”/>

</div>

<div>

$(‘input’, phonesDiv).live(‘keypress’, function (e) {

//alert(e.keyCode);

if (e.keyCode < 48 || e.keyCode > 57) {

      e.stopPropagation();

      return false;

}

});

phonesDiv.delegate(‘input’,‘keypress’, function (e) { … });

klikanie:

var phoneSelDiv = $(‘div:eq(0)’, phonesDiv).clone(); //pierwszy <div> z obszaru #PhonesDiv

var phoneTbDiv = $(‘div:eq(1)’, phonesDiv).clone(); //drugi <div> z obszaru #PhonesDiv

$(‘select’, phoneSelDiv).val(‘’);

$(‘input’, phoneTbDiv).val(‘’);

phonesDiv.append(‘<div style=”clear: both;” />’)

                    .append(phoneSelDiv)

               .append(phoneTbDiv);

Zdarzenia Hover

$(selektor).hover(handlerIn, handlerOut);

handlerIn - mouseenter, handlerOut - mouseleave

$(selector).hover(handlerInOut) - ten sam handler dla mouseenter i mouseleave

$(selector).toggle(handler1, handler2); - toggle przy klikaniu

$(selector).toggle(handler1, handler2, handler3); - trzecia funkcja do czwartego kliknięcia

 

AJAX

• odświeżanie fragmentów strony
• cross-browser
• GET i POST
• JSON, XML, HTML, scripts
• webserwisy, REST, …

 

• $(selector).load() - ładuje dane HTML z serwera
• $.get() / $.post() - pobranie/wysłanie “surowych” danych
• $.getJSON() - get/post ze zwracanym JSON
• $.ajax() - core

Ładowanie HTML z serwera

Załadowanie strony i dodanie do jej do wnętrza div:

$(selector).load(url, data, callback);

$(‘#myDiv’).load(‘page.html’);

$(‘#myDiv’).load(‘page.html #filter’);  - zawężone wyniki ze strony, cache

$(‘#myDiv’).load(‘page.aspx’, {PageSize: 20});  - przekazanie danych do strony, POST bez cache

$(‘#myDiv’).load(‘page.html’,

function(response, status, xhr) {

       if (status == “error”) {

              alert(xhr.statusText);

       }

});  - z callbackiem

GET

$.get(url, data, callback, datatype);

$.get(‘page.html’, function(data) {

       $(‘#myDiv’).html(data);

});

$.get(‘page.aspx’, {id: 5}, function(data) {

alert(data.FirstName);

}, ‘json’);

http://james.padolsey.com/jquery/

$.getJSON(url, data, callback);

$.getJSON(‘page.aspx’, {id: 1},

function(data) {

      alert(data.FirstName + ‘  ‘ + data.LastName);

});

POST

$.post(url, data, callback, datatype);

$.post(‘page.aspx’, {PageSize: 20},

function(data) {

        $(‘#myDiv’).html(data);

}

);

Komunikacja z webserwisem WCF z endpointem AJAX:

$.post(‘CustomerService.svc/GetCustomers’,

null, function(data) {

var c = data.d[0];

alert(c.FirstName + ‘  ‘ + c.LastName);

}, ‘json’);

ajax() - większa kontrola nad zapytaniami

• contentType
• data
• dataType
• error
• success
• type (GET/POST)

$.ajax({

url: ‘../ProductService.svc/AddProduct’,

data: product,

dataType: ‘json’,

success: function(data, status, xhr) {

        alert(“Status ” + data.d.Status + ‘\n’ + data.d.Message);

},

error: function(xhr, status, error) {

        alert(“Error: “ + status);

}

});

http://www.json.org/json2.js

var product = ‘product=’ + JSON.stringify({ … });