Skip to content

Instantly share code, notes, and snippets.

@nicogaldamez nicogaldamez/README.md
Last active Jan 6, 2017

Embed
What would you like to do?
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 = $("[data-behavior~=ajax-container]")
containers.each (index, el) ->
url = $(el).data('url')
# Si tiene un wrapper box le pongo un loading (AdminLte)
box = $(el).closest('.box')
box.append('<div class="overlay"><i class="fa fa-refresh fa-spin"></i></div>')
$.get url, (data) =>
$(el).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
You can’t perform that action at this time.