Javascript

            <a class="js-confirm" data-msg="<?= _('Are you sure?') ?>" href=""><?= _('Confirmation link') ?></a>
        

            <a class="js-remote" data-to="load-content-remote" href="/pages/kumbia/manual/sociable"><?= _('Remote link')?></a>
<div id="load-content-remote"></div>
        

            <a class="js-remote-confirm" data-to="load-content-remote-2" data-msg="<?= _('Are you sure?') ?>" href="/pages/kumbia/manual/sociable"><?= _('Remote link with confirmation') ?></a>
<div id="load-content-remote-2"></div>
        

            <form action="/ajax/hola" class="js-remote" data-to="load-content-remote-3" method="post">
    <label>Nombre:
        <input id="name" name="name" type="text" value="John" required>
    </label>
<button type="submit"><?= _('Ajax form') ?></button>
</form>
<div id="load-content-remote-3"></div>
        

            <a class="js-show" data-to="green-container" href=""><?=_('Show green container')?></a>
<div id="green-container" style="width: 200px; height: 100px; margin: 20px 0px 0px; background: green; display: none;"></div>
        

            <a class="js-hide" data-to="blue-container" href=""><?=_('Hide blue container')?></a>
<div id="blue-container" style="width: 200px; height: 100px; margin: 20px 0px 0px; background: blue;"></div>
        

            <button class="js-toggle" data-to="red-container"><?=_('Toggle red container')?></button>
<div id="red-container" style="width: 200px; height: 100px; margin: 20px 0px 0px; background: red; display: none;"></div>
        

            <a class="js-fade-in" data-to="yellow-container" href=""><?=_('Fade-in yellow container')?></a>
<div id="yellow-container" style="width: 200px; height: 100px; margin: 20px 0px 0px; background: yellow; display: none;"></div>
        

            <a class="js-fade-out" data-to="black-container" href=""><?=_('Fade-out black container')?></a>
<div id="black-container" style="width: 200px; height: 100px; margin: 20px 0px 0px; background: black;"></div>