Frontend helper
Tabbli has its own integrated frontend framework which can be used for simplifying an implementation of the most common features on the site's frontend.
Installation
Tabbli provides a special helper library tabbli.js
which is including by default to the site pages if you did not overload default base.html
template. Otherwise, you need to add it manually.
Because tabbli.js
requires jQuery
than you should add something like that if you didn't do it before:
Preload an URL to the DOM element
Use class __action--ajax-load
to initiate loading a content from the URL which specified by data-src
attribute into the DOM element when page will be ready:
Form submission via Ajax
Lets see at the example of "Add to cart" button implementation which could be familiar for some e-commerce or marketplace solutions:
Use class __action--ajax-submit
when you want to submit this form via Ajax. Attribute data-post-signal
is required to force updating the cart block when new product has been added to cart. This feature will be described later.
Reload block content when something happens
In this example we use both __action--ajax-load
class for preload the block content after page loading and __action--ajax-load-for-signal
to initiate the block reloading when the signal is raised. Attribute data-signal
is used for specify the signal.
How it works. After successful form submission, from the previous example, via Ajax the signal update-cart
(see data-post-signal
attribute for the form
) is raised. Then PCart is looking for the element with class __action--ajax-load-for-signal
with the corresponding value of data-signal
attribute and use the value of data-src
for loading the content.
You can create a few different elements for a single signal. For example, you can also add a container for modal popup:
More complex example of the Ajax form
Sometimes you need to some additional actions with Ajax forms for making a more mature behavior. For example, if you have a modal popup component with a form inside and want to update the popup content after the form submission. But with Bootstrap it could be a bit tricky because it adds a div block for fade the page background outside the .modal
container. It means that if you want reload a modal container with a new content we also should delete that block before. In such cases you can use data-post-remove-element
attribute.
If you have more than one submit buttons for the form, and need to implement different behavior for different ones on the backend, you should use data-allow-ajax
attribute. In other case, due some limitation of the browser API, the request will not contain the button name.
If you want to use Ajax form submission for some buttons and normal submission for another ones, use the data-disable-ajax
attribute.
Send signal via JS
Use send_signal
method:
Load different content via Ajax depends the content of another element
Use class __action--ajax-load-for-event
with attributes data-event
and data-target
for initiate loading a content inside the element after an event raised by another element.
Attribute data-src-eval
allows to use JavaScript expression instead a simple string with data-src
. It useful if you need to load different content in different cases.
Send ajax form without form tag
If you need to submit form data via ajax but do not able to use HTML form syntax you can use function TABBLI.ajax_send
. It uses two arguments. First one it the data object. And the second one is additional attributes. For example, if we need to add a product to the wishlist we can do next:
Last updated