Spis treści

Korzystanie jQuery and Ajax

O jQuery

jQuery jest solidną biblioteką JavaScript. Wśród wielu zalet:

• Działa zgodnie z oczekiwaniami wielu przeglądarek internetowych.
• Jasna, zwięzła i intuicyjna architektura
• Wiele dostępnych wtyczek.

Możesz się dowiedzieć więcej o jQuery na oficjalnej stronie: http://jquery.com/

jQuery $

jQuery posiada funkcje $(), nazw, który zawierają wszystkie inne funkcje.

Funkcja $() może być użyta na wiele sposobów:

• Przy zastosowaniu funkcji jako parametr, $() będzie wykonywał funkcje gdy strony w DOM są w pełni załadowane.
  Na przykład: $(function(){ /* do something */ });
• Po przejściu ciągu zawierającego selektor CSS $()zwróci wszystkie węzły HTML, które odpowiadają selektorowi.
  Na przykład: $('ul#nav');
• Ten zestaw węzłów może być przypisany do każdej z metod jQuery. Na przykład. Jeśli chcesz ukryć elementy nawigacji zwracane przez powyższy selektor.
  Na przykład: $('ul#nav').slideUp('fast');

• Przy użyciu czystego kodu HTML jako jego parametru $() stworzy węzeł (element DOM). Ten węzeł może znowu być stosowany z dowolną metodą jQuery
  Na przykład: $("<li>Sign Off</li>").appendTo("ul#nav");

$('ul#nav').slideUp('fast'); 
jQuery('ul#nav').slideUp('fast');

Możesz dowiedzieć się więcej na temat jQuery() i $() na oficjalnej stronie: http://api.jquery.com/jQuery/

Funkcje w jQuery

jQuery's namespace $ zawiera wszystkie funkcje, które nie są dołączane do konkretnego węzła.

Wśród nich znajduje się kilka funkcji Ajax I funkcji użytkowych. Na przykład:

$.post('/handler.php', {'action': 'purchase', 'product': 434}, function(data){/* do something */} );

Można dołaczyć zdarzenia do zbioru skróconych węzłów zwróconych przez $(). Jedną z zalet korzystania z jQuery, po raz kolejny jest to, że podczas obsługi zdarzenia, pomaga on poprzez harmonizacje, tak, że nie trzeba uzględniać specyfiki każdej przeglądarki.

Aby przypisać funkcje click event, jest prosty dodatek .click(function).
W celu wygenerowania click event, można również użyć .click() z każdym parametrem. Na przykład: $('#button').click(function(){/* do something */});

Możesz się dowiedzieć więcej na temat jQuery's Ajax i funkcji użytkowych na oficjalnej stronie:

• http://api.jquery.com/category/ajax/ (na przykład, http://api.jquery.com/jQuery.post/)
• http://api.jquery.com/category/utilities/

Selektory

jQuery oferuje dwa spososby, aby wybrać elementy strony:

• Połącz selektory CSS i XPath w ciągu znaków, które są używane z funkcją $(). Na przykład: $("div > ul a")
• Użyj jednej z kilku metod, które są już dostępne w jQuery namespace.

Oba te spososby mogą być łączone

var my_jQuery_object = $("#my_image");
var my_jQuery_object = $("#menu a");
var my_jQuery_object = $("#id > .classe, #id td:last-child"); 
    
/* returns the 'td' elements within the odd 'tr'. */
var my_jQuery_object = $('tr:odd td');
    
/* returns the fourth paragraph. */
var my_jQuery_object = $("p:eq(4)");
    
/* returns the 7 first paragraphs. */
var my_jQuery_object = $("p:lt(8)");

Możesz dowiedzieć się więcej na temat selektorów jQuery's na oficjalnej stronie: http://api.jquery.com/category/selectors/

Metody i wywołania zwrotne

Cały zestaw metod dostępny w standardowym API to: manipulacja DOM, manipulacja CSS, event managment, efekty wizualne, etc.

Na przykład jeśli chcesz, aby znikneły powoli wszystkie akapity na stronie, użyj tego:

$("p").fadeOut();

Niektóre metody (takie jak fadeOut()) przyjmują inną metodę jako parametr. Taki sposób wykonany raz jest już zrobiony. To nazywamy wywołaniem zwrotnym 

Na przykład:

$(".test").fadeOut("slow",function(){ 
  $(this).fadeIn("slow"); 
});

Wszystkie metody powrotu przedmiotu  jQuery . To sprawia, że metody łańcucha są bez ograniczeń. Można nawet napisać swój kod, tak, że jest on czytany jak blok funkcyjny.

Na przykład, ten kod działa doskonale i łatwy do odczytu i aktualizacji:

$(".emptyContent").append("This is a test")
  .css("border", "1px solid red")
  .addClass("fullContent")
  .removeClass("emptyContent");

Dostępne wtyczki w PrestaShop 

To jest lista wtyczek jQuery które są dostępne w domyślnej instalacji PrestaShop:

Kilka innych narzędzi

jQuery's API jest bardzo kompletne, i spędzisz godziny na poszukiwaniu nowych możliwości.

Oto kilka funkcji, które mogą być niezwykle użyteczne podczas tworzenia tematu. 

Po pierwsze, each(), co umożliwia petli przejście przez liste elementów:

$("img").each(function(){ console.log($(this).attr("src")); });

Po drugie, browser, jest obiektem, który pozwala dowiedzieć się, która przeglądarka pracuje z:

if($.browser.msie) {
  if($.browser.version == 6) {
    // Your IE6 specific code.
  } else {
    // Code for any other IE browser.
  }
}

Wykonywanie połączeń Ajax z jQuery

O Ajax

Termin "Ajax" jest naprawdę skrótem od Asynchronous JavaScript i XML. Opisuje użycie JavaScript  do załadowania nowej zawartości do bieżącej strony bez konieczności przeładowania całęj. Proces ten nazywany jest ansynchronicznym, ponieważ gdy żadanie Ajax zostało wysłane do serwera webowego, przeglądarka nie musi czekać na odpowiedź w celu wykonania innych zadań. Przesyłana treść nie musi być sformatowana w XML, można użyć JSON, HTML, lub zwykły tekst.

W efekcie użycie Ajax sprawia, że mozliwe jest zbudowanie bardzo dynamicznych stron internetowych 

Możesz się dowiedzieć więcej na temat techniki Ajax na nastepującej stronie: 

• Wikipedia: https://pl.wikipedia.org/wiki/AJAX
• Mozilla Developer Network: https://developer.mozilla.org/en/docs/AJAX

Jak użyć Ajax w PrestaShop 

Domyśłne kontrolery PrestaShop uzywają standardowej pełnej strony- procesu przeładowania.

Jeśli PrestaShop wykryje parametr "ajax" w GET albo POST zapytania, kontroler ajax obiektu jest przełączony na true: $this->ajax = true;.

Na przykład, Jeśli kod wyzwala URL, takie jak : http://...&ajax&action=updatelist
...regulator następnie wykona displayAjaxUpdateList() jeśli metoda istnieje. Jeśli nie istnieje, to wykona  displayAjax() metodą (domyślną).

Dlatego on musi zawierać kod który weźmie pod uwagę wezwanie Ajax. Oto jak można napisać prostą kwerendę za pomocą Ajax jQuery:

var query = $.ajax({
  type: 'POST',
  url: baseDir + 'modules/mymodule/ajax.php',
  data: 'method=myMethod&id_data=' + $('#id_data').val(),
  dataType: 'json',
  success: function(json) {
    // ....
  }
});

Oto jak skrypt  ajax.php będzie działać:

// Located in /modules/mymodule/ajax.php
require_once(dirname(__FILE__).'../../../config/config.inc.php');
require_once(dirname(__FILE__).'../../../init.php');
switch (Tools::getValue('method')) {
  case 'myMethod' :
    die( Tools::jsonEncode( array('result'=>'my_value'));
    break;
  default:
    exit;
}
exit;

Jak widzisz w przykładzie powyższy kod, PrestaShop  Tools zawiera obiekt  jsonEncode(), to metoda, która sprawia, że łatwo przekształcić tablicę PHP do obiektu JSON:

public function displayAjax() {
  $return = array(
    'hasError' => true,
    'errors' => 'Ceci est le message'
  );
  die(Tools::jsonEncode($return));
}

Metody jQuery's Ajax 

jQuery.ajax(url [, ustawienia ] )

Parametry:

• url: URL do której należy wysłać zapytanie
• ustwienia: opcje i funkcje

Niektóre opcje:

async (boolean): domyslną jest true

• type: domyślnym jest 'GET'
• cache (logiczna): domyślną jest true
• data: GET tablica wysyłana do serwera
• dataType: zarówno xml, json, script albo html

Niektóre funkcje:

• beforeSend: wyzwalane przed wywołaniem Ajax
• error: w przypadku błędu
• success: w przypadku powodzenia
• timeout: w przypadku przekroczenia czasu 
• complete: wyzwalane po sukcesie zawołania, bez względu na wynik.

Możesz się dowiedzieć więcej o  ajax()tutaj: http://api.jquery.com/jQuery.ajax/

Alternatywny: jQuery.load(url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

Metoda ta stosowana jest do bezpośredniego załadowania wyniku HTML do wywołania Ajax, w obrębie elemenetu na bieżącej stronie. 

Na przykład :

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

Alternatywny: jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

Metoda ta pozwala na połączenie się z zapytaniem Ajax ze skryptem HTTP GET. Jest to równoznaczne z następującym połączeniem Ajax:  

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Wartości zwracane na wywołanie Ajax jQuery 

Wszystkie te metody jQuery zwracają obiekt  jqHXR, który jest przedłużeniem obiektu  XMLHTTPRequest.  Obiekt ten umożliwia wywołanie różnych funkcji w zależności od wyniku połączenia:

• Powodzenie: jqXHR.done(function(data, textStatus, jqXHR) {});

• Błąd: jqXHR.fail(function(jqXHR, textStatus, errorThrown) {});

• Powodzenie albo Błąd: jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown){ });

• Powodzenie i Błąd: jqXHR.then(function(data, textStatus, jqXHR) {}, function(jqXHR, textStatus, errorThrown) {});

Oto przykład z połaczenia funkcji w zależności od wyniku kwerendy:

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.get("example.php", function() {
  alert("success");
})
.done(function() { alert("second success"); })
.fail(function() { alert("error"); })
.always(function() { alert("finished"); });

// perform other work here ...
// Set another completion function for the request above
jqxhr.always(function(){ alert("second finished"); });