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");

Available plugins in PrestaShop

Here is a list of the jQuery plugins that are available in a default installation of PrestaShop:

A couple of other tools

jQuery's API is incredibly complete, and you will spend hours finding new possibilities.

Here is a couple of function that can be tremendously useful when creating a theme.

First, each(), which makes it possible to loop through a list of elements:

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

Second, browser, which is an object that helps you know which browser you are working with:

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

Making Ajax calls with jQuery

About Ajax

The term "Ajax" is really an acronym for Asynchronous JavaScript and XML. It describes the use of JavaScript to load new content into the current page without having to reload the whole page. The process is called asynchronous because once the Ajax request has been sent to the web server, the browser does not have to wait for the answer in order to perform other tasks. The transferred content does not have to be formatted in XML: it can use JSON, HTML or plain text.

In effect, using Ajax makes it possible to build very dynamic websites

You can learn about the Ajax technique on the following sites:

• Wikipedia: http://en.wikipedia.org/wiki/Ajax_%28programming%29
• Mozilla Developer Network: https://developer.mozilla.org/en/docs/AJAX

How to use Ajax in PrestaShop

By default, PrestaShop's controllers use the standard full-page-reload process.

Once PrestaShop detects the "ajax" parameter in a GET or POST query, the controller's ajax property is switched to true: $this->ajax = true;.

For instance, if your code triggers a URL like such: http://...&ajax&action=updatelist
...the controller will then execute the displayAjaxUpdateList() method if it exists. If it doesn't exist, it will execute the displayAjax() method (by default).

You therefore have to include the code that will take the Ajax call into account. Here is how you would write a simple Ajax query using 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) {
    // ....
  }
});

And here is how the ajax.php script would work:

// 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;

As you can see in the code sample above, PrestaShop's Tools object contains jsonEncode(), a method that makes it easy to turn a PHP array into a JSON object:

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

jQuery's Ajax methods

jQuery.ajax(url [, settings ] )

Parameters:

• url: the URL to which the query should be sent
• settings: options and functions

Some options:

• async (boolean): default is true
• type: default is 'GET'
• cache (boolean): default is true
• data: GET array sent to the server
• dataType: either xml, json, script or html

Some functions:

• beforeSend: triggered before the Ajax call
• error: in case of error
• success: in case of success
• timeout: in case of timeout
• complete: triggered after the call's success or error, whatever the result

You can learn more about ajax() here: http://api.jquery.com/jQuery.ajax/

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

This method is used to directly load the HTML result to an Ajax call, right within an element on the current page.

For instance:

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

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

This method enables you to call an Ajax script with an HTTP GET query. It is equivalent to the following Ajax call:

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

Return values on a jQuery Ajax call

All these jQuery methods return a jqHXR object, which is an extension of the XMLHTTPRequest object. That object makes it possible to trigger various functions depending on the result of the call:

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

• Error: jqXHR.fail(function(jqXHR, textStatus, errorThrown) {});

• Success or Error: jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown){ });

• Success AND Error: jqXHR.then(function(data, textStatus, jqXHR) {}, function(jqXHR, textStatus, errorThrown) {});

Here is an example with functions calls depending on the query's result:

// 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"); });