Child pages
  • Korzystanie z jQuery i Ajax

Versions Compared

Key

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

...

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

...

Plugin file name

...

Dostępne wtyczki w PrestaShop 

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

Nazwa wtyczki

Opis wtyczki

jquery.colorpickerPhotoshop-

style color selectorSelektor stylu kolorów PrestaShop.

jquery.cookie-plugin

Read, write and delete cookiesOdczytuje, zapisuje i usuwa pliki cookie.

jquery.dimensionsManage

an element's dimensionsZarządza elementami wymiarów.

jquery.easingManage

the speed of an animationZarządza prędkością elementów.

jquery.excanvas

Change the canvas of an element (rounded corners / gradients / opacity / draw line, arc, etc.)Zmienia obszar elementu roboczego (zaokrąglone narożniki/gradienty/krycia/rysowanie lini, łuku itp.).

jquery.fieldselectionUse and replace the text selected within a zone

Wykorzystuje i zastępuje tekst w wybranej strefie.

jquery.flip

Flip an Odwraca element.

jquery.flotCreate

graphs presenting data as curves, bars, etcTworzy wykres prezentacji danych, takich jak krzywe, bary, itp.

jquery.highlightAdd

syntax colorizationDodaje składnie koloryzacji.

jquery.hoverIntent

Add a prediction effect on JavaScript's Dodaje efekt przewidywania na JavaScript hover event.

jquery.idTabs

Manage tabsZarządza kartami.

jquery.ifxtransferAnimate an element with a transfer from one container to another

Animuje elementem podczas przenoszenia z jednego pojemnika do drugiego.

jquery.jqminmax

Add Dodaje min-width, max-width, min-height and i max-height on all browsersna wszystkich przeglądarkach.

jquery.pngFix

Manage transparency in Zarządza przejrzystością w IE 5.5 and i IE 6.

jquery.scrollToMake the page or element scroll to a certain position

Dodaje strony lub przewijanie elementu do określonej pozycji.

jquery.serialScrollMake a series of element scroll to a certain position.

Wprowadza szereg.elementów przewijania do określonej pozycji.

jquery.tabledndDrag and drop a table's rows

Przeciąga i upuszcza wiersze tabeli.

jquery.typewatchExecute a function when the user has typed some text in a zone and has stopped typing after a certain amount of time

Wykonuje funkcje kiedy użytkownik wpisał jakiś tekst w strefie i przestał pisać po pewnym czasie.

jquery.validate-creditcard

Validate a credit card number depending on its type.

...

Weryfikuje numer karty kredytowej w zależności od jego typu.

Kilka innych narzędzi

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 elementsjest 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:

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

SecondPo drugie, browser, which is an object that helps you know which browser you are working withjest obiektem, który pozwala dowiedzieć się, która przeglądarka pracuje z:

Code Block
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

The term Termin "Ajax" is really an acronym for jest naprawdę skrótem od Asynchronous JavaScript and i 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:

...

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: 

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 following sites :jest najczęściej stosowanym formatem podczas przesyłania danych przy użyciu techniki Ajax, z dwóch głównych powodów, uważa sie, że jest lżejszy niż XML, a to może być bardzo ątwe wykorzystane przez JavaScript gdyż przypomina podzbiór tego języka. Możesz dowiedzieć się więcej o JSON na następujących stronach.

How to use Ajax in PrestaShop

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

...

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

For instance, if your code triggers a URL like suchNa przykład, Jeśli kod wyzwala URL, takie jak http://...&ajax&action=updatelist
...the controller will then execute the regulator następnie wykona displayAjaxUpdateList() method if it exists. If it doesn't exist, it will execute the  jeśli metoda istnieje. Jeśli nie istnieje, to wykona  displayAjax() method metodą (by defaultdomyślną).

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 Dlatego on musi zawierać kod który weźmie pod uwagę wezwanie Ajax. Oto jak można napisać prostą kwerendę za pomocą Ajax jQuery:

Code Block
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 Oto jak skrypt  ajax.php script would work będzie działać:

Code Block
// 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 Jak widzisz w przykładzie powyższy kod, PrestaShop  Tools zawiera obiekt  jsonEncode(), a method that makes it easy to turn a PHP array into a JSON objectto metoda, która sprawia, że łatwo przekształcić tablicę PHP do obiektu JSON:

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

Metody jQuery's

...

Ajax 

jQuery.ajax(url [,

...

ustawienia ] )

ParametersParametry:

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

...

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

Niektóre opcje:

async (boolean):

...

domyslną jest true

  • type: default is domyślnym jest 'GET'
  • cache (booleanlogiczna): default is domyślną jest true
  • data: GET array sent to the servertablica wysyłana do serwera
  • dataType: either zarówno xml, json, script or  albo html

Some functionsNiektóre funkcje:

  • beforeSend: triggered before the Ajax callwyzwalane przed wywołaniem Ajax
  • error: in case of errorw przypadku błędu
  • success: in case of successw przypadku powodzenia
  • timeout: in case of timeoutw przypadku przekroczenia czasu 
  • complete: triggered after the call's success or error, whatever the result

...

  • 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) ] )

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

For instanceMetoda 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 :

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

...

Alternatywny: 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: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:  

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:

...

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) {});

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

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

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

Here is an example with functions calls depending on the query's resultOto przykład z połaczenia funkcji w zależności od wyniku kwerendy:

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