PrestaShop 1.5
Child pages
  • Using jQuery and Ajax

Versions Compared

Old Version 5

changes.mady.by.user Xavier Borderie

Saved on

compared with

New Version 6

changes.mady.by.user Xavier Borderie

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

...

  • When using a function as its parameter, $() will execute the function once the page's DOM is fully loaded. For instance: $(function(){ /* do something */ });
  • When passing a string containing a CSS selector, $() 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

    wanted

    want to hide the navigation element returned by the above selector: $('ul#nav').slideUp('fast');

  • When using pure HTML code as its parameter, $() will create the node (DOM element). That node can, again, be used with any of jQuery's methods: $("<li>Sign Off</li>").appendTo("ul#nav");

Note

$() is merely a shortcut to the framework library-specific jQuery() function. It exists in order to accelerate coding. Many other JavaScript libraries use the same name $() for their shortcut.

If you are mixing JavaScript frameworks libraries in your theme, you might be better off by telling jQuery to free $(). Simply call $.noConflict(), and from then on, any call to jQuery will require you to use jQuery() instead of $().

...

Functions in jQuery

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

...

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

In order to association associate a function to a click event, simple add .click(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 function functions on the official website:

...

jQuery offers two ways to selection select page elements:

  • Combine CSS and XPath selectors in a string, which is used with the $() function. For instance: $("div > ul a")
  • Using one of the several methods already available in the jQuery namespace.

...

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 elements element (Rounded rounded corners / gradients / opacity / draw line, arc, etc.)

jquery.fieldselection

Use and replace the text selected within a zone.

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 container 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 some text in a zone and has stopped typing after a certain amount of time.

jquery.validate-creditcard

Validate a credit card number depending on its type.

...

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.

...

Note
titleAbout JSON

 JavaScript Object Notation is the most used format when transferring data using the Ajax technique, for two main reasons: it is considered lighter than XML, and it can very easily be used by JavaScript, as it resembles a subset of that language. You can learn more about JSON on the MDN website: following sites :

How to use Ajax in PrestaShop

...

  • 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

...

Code Block
$.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:

...