Skip to content

Instantly share code, notes, and snippets.

@nicogaldamez
Last active October 6, 2020 12:15
Show Gist options
  • Save nicogaldamez/09a0d642822e2e6b4d0caa261b1282c0 to your computer and use it in GitHub Desktop.
Save nicogaldamez/09a0d642822e2e6b4d0caa261b1282c0 to your computer and use it in GitHub Desktop.
Carga de contenido con Ajax

Descripción

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.

Loading

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment