Message-ID: <609262678.379340.1711722971682.JavaMail.root@confluence-doc2-production> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_379339_2106456339.1711722971676" ------=_Part_379339_2106456339.1711722971676 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html Using jQuery and Ajax

Using jQuery and Ajax

Table of contents

=20 =20

Using jQuery and Ajax

About jQuery

jQuery is a solid JavaScript library. Among its many advantages:

You can learn more about jQuery on the official website: http://jquery.com/=

jQuery's $

jQuery has the $() function, and the $ namespa= ce, which contains all the other functions.

The $() function can be used in many ways:

$() is merely a shortcut to the library-specific jQue= ry() function. It exists in order to accelerate coding. Many other J= avaScript libraries use $() for their shortcut.

If you are mixing JavaScript libraries in your theme, you might be bette= r off by telling jQuery to free $(). Simply call $.noCon= flict(), and from then on, any call to jQuery will require you to us= e jQuery() instead of $().

You can learn more about jQuery() and $() on t= he official website: http://api.jquery.com/jQuery/

Functions in jQuery

jQuery's $ namespace contains all the functions that are no= t attached to a specific node.

Among these are a few Ajax and utilitarian functions. For instance:

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

You can attach events to a set of nodes returned by $(). On= e of the advantages of using jQuery, once again, is that when handling even= ts, it helps you by harmonizing so that you do not have to cater for each b= rowser specifics.

In order to associate a function to a click event, simple add .cli= ck(function).

In order to generate a click event, you can also use .click() with any parameter. For instance: $('#button').click(function(){/*= do something */});

You can learn more about jQuery's Ajax and utilitarian functions on the = official website:

Selectors

jQuery offers two ways to select page elements:

These two ways can be combined.

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

You can learn more about jQuery's selectors on the official website: http://api.jquery.com/category/selectors/

Methods and callbacks

A whole set of methods are available in the standard API: DOM manipulati= on, CSS manipulation, event management, visual effects, etc.

For instance, if you wish to have all the paragraphs in a page slowly di= sappears, use this:

=20
$("p").f=
adeOut();
=20

Some methods (such as the fadeOut() one) accept another met= hod as a parameter. Such a method will be executed once the first one is do= ne. That is called a callback.

For instance:

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

All of jQuery's methods return a jQuery object. This makes = it possible to chain methods, with no limit. You can even write your code s= o that it reads just like a function block.

For instance, this code works perfectly well, and is easy to read and to= update:

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

Available plugin= s in PrestaShop

Here is a list of the jQuery plugins that are available in a default ins= tallation of PrestaShop:

Plugin file name

Plugin description

jquery.colorpicker

Photoshop-style color selector.

jquery.cookie-plugin

Read, write and delete cookies.

jquery.dimensions

Manage an element's dimensions.

jquery.easing

Manage the speed of an animation.

jquery.excanvas

Change the canvas of an element (rounded corn= ers / gradients / opacity / draw line, arc, etc.)

jquery.fieldselection

Use and replace the text selected within a zo= ne.

jquery.flip

Flip an element.

jquery.flot

Create graphs presenting data as curves, bars= , etc.

jquery.highlight

Add syntax colorization.

jquery.hoverIntent

Add a prediction effect on JavaScript's hover= event.

jquery.idTabs

Manage tabs.

jquery.ifxtransfer

Animate an element with a transfer from one c= ontainer to another.

jquery.jqminmax

Add min-width, max-width, min-height and max-= height on all browsers.

jquery.pngFix

Manage transparency in IE 5.5 and IE 6.

jquery.scrollTo

Make the page or element scroll to a certain = position.

jquery.serialScroll

Make a series of element scroll to a certain = position.

jquery.tablednd

Drag and drop a table's rows.

jquery.typewatch

Execute a function when the user has typed so= me text in a zone and has stopped typing after a certain amount of time.

jquery.validate-creditcard

Validate a credit card number depending on it= s type.

A couple other function= s

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

Here is a couple of function that can be tremendously useful when creati= ng a theme.

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

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

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

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

Making Ajax calls w= ith 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 p= age without having to reload the whole page. The process is called asynchro= nous because once the Ajax request has been sent to the web server, the bro= wser 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 JS= ON, 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:

About JSON

 JavaScript Object Notation is the most used format when transferri= ng data using the Ajax technique, for two main reasons: it is considered li= ghter than XML, and it can very easily be used by JavaScript, as it resembl= es a subset of that language. You can learn more about JSON on the followin= g sites :

How to use Ajax in P= restaShop

By default, PrestaShop's controllers use the standard full-page-reload p= rocess.

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

For instance, if your code triggers a URL like such: http://...&ajax&= amp;action=3Dupdatelist
...the controller will then execut= e 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:

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

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

=20
// Locat=
ed 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'=3D>'my_value'));
    break;
  default:
    exit;
}
exit;
=20

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

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

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, wha= tever the result

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

Alternative: jQuery.load(url [, d= ata ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

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

For instance:

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

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

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

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

Return values o= n 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:<= /p>

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

=20
// Assig=
n handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr =3D $.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"); });
=20
------=_Part_379339_2106456339.1711722971676--