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
Table of contents
jQuery is a solid JavaScript library. Among its many advantages:
You can learn more about jQuery on the official website: http://jquery.com/=
jQuery has the $()
function, and the $
namespa=
ce, which contains all the other functions.
The $()
function can be used in many ways:
$()
will execute t=
he function once the page's DOM is fully loaded. For instance: $(func=
tion(){ /* do something */ });
$()
will =
return all the HTML nodes which match the selector. For instance: $('=
ul#nav');
That set of nodes can then be assigned to any of jQuery'=
s methods. For instance, if you want to hide the navigation element returne=
d by the above selector: $('ul#nav').slideUp('fast');
When using pure HTML code as its parameter, $()
will cr=
eate the node (DOM element). That node can, again, be used with any of jQue=
ry's methods: $("<li>Sign Off</li>").appendTo("ul#nav");<=
/code>
$()
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/
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:
$.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:
jQuery offers two ways to select page elements:
$("div > ul a")
jQuery<=
/code> namespace.
These two ways can be combined.
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/
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:
$("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:
$(".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:
$(".empt= yContent").append("This is a test") .css("border", "1px solid red") .addClass("fullContent") .removeClass("emptyContent");=20
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. = td> |
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. |
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:
$("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:
if($.bro= wser.msie) { if($.browser.version =3D=3D 6) { // Your IE6 specific code. } else { // Code for any other IE browser. } }=20
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= p>
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 :
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:
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:
// 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:
public f= unction displayAjax() { $return =3D array( 'hasError' =3D> true, 'errors' =3D> 'Ceci est le message' ); die(Tools::jsonEncode($return)); }=20
Parameters:
Some options:
async
(boolean): default is truetype
: default is 'GET'cache
(boolean): default is truedata
: GET array sent to the serverdataType
: either xml
, json
, html
Some functions:
beforeSend
: triggered before the Ajax callerror
: in case of errorsuccess
: in case of successtimeout
: in case of timeoutcomplete
: triggered after the call's success or error, wha=
tever the resultYou can learn more about ajax()
here: http://a=
pi.jquery.com/jQuery.ajax/
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:
$('#resu= lt').load('ajax/test.html', function() { alert('Load was performed.'); });=20
This method enables you to call an Ajax script with an HTTP GET query. I= t is equivalent to the following Ajax call:
$.ajax({ url: url, data: data, success: success, dataType: dataType });=20
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>
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:=
// 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