La idea de este componente es cargar contenido vía ajax en una vista.
Para ello se debe crear un tag html con el atributo data-behavior con valor ajax-container.
La información se buscará a través de Ajax a la url definida en el atributo data-url.
Si se está utilizando AdminLte y el tag está dentro de un .box se agregará un loading.
| window.App ||= {} | |
| # La función que hace todo es initAjaxContainers | |
| App.initAjaxContainers = (containers) -> | |
| containers ||= $("[data-behavior~=ajax-container]") | |
| containers.each (index, el) -> | |
| $element = $(element) | |
| url = $element.data('url') | |
| # Si tiene un wrapper box le pongo un loading (AdminLte) | |
| box = $element.closest('.box') | |
| box.append('<div class="overlay"><i class="fa fa-refresh fa-spin"></i></div>') | |
| $.get url, (data) => | |
| $element.html data | |
| box.find('.overlay').remove() | |
| $(document).on "turbolinks:load", -> | |
| # Ajax Containers | |
| App.initAjaxContainers() | |
| <div class="box box-success"> | |
| <div class="box-header with-border"> | |
| <h3 class="box-title">Mensajes</h3> | |
| </div> | |
| <div class="box-body" data-behavior="ajax-container" data-url="<%= products_path %>"> | |
| <!-- Products loaded by ajax --> | |
| Cargando productos... | |
| </div> | |
| </div> |