-1

Por algún motivo, el modal no se aparece al llamarlo con Foundation 6, lo hago por medio de un partial, dejo el codigo amigos, talvez puedan darme una solucion, que se me hace raro ya que con otros frameworks de estilos como Materialize, Bootstrap no tengo ningun problema:

form.html.erb

<div class="reveal" id="exampleModal1" data-reveal>

  <%= form_for @product, remote: true, authenticity_token: true, html: { multipart: true } do |f| %>
    <% if @product.errors.any? %>
      <div id="error_explanation">
        <h2><%= pluralize(@product.errors.count, "error") %> prohibited this @product from being saved:</h2>

        <ul>
        <% @product.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
        </ul>
      </div>
    <% end %>

    <div class="field">
      <%= f.label :name %>
      <%= f.text_field :name %>
    </div>

    <div class="input-field">
      <%= f.file_field :image %>
    </div>

    <div class="actions">
      <%= f.submit %>
    </div>
  <% end %>

</div>

new.js.html

$('#exampleModal1').html('<%= j render "form" %>').foundation('open');

Link

  <%= link_to "Agregar producto", new_product_path, remote: true, :data => { :'open' => 'exampleModal1' } %>

javascript.js

//= require jquery
//= require jquery_ujs
//= require foundation
//= require what-input
//= require turbolinks
//= require_tree .

$(document).ready(function(){
  $(document).foundation();
});
4
  • ¿Qué versión de Foundation utilizas?
    – Shaz
    el 29 nov. 2016 a las 1:00
  • Foundation 6 @Shaz el 29 nov. 2016 a las 1:20
  • 1
    Hola Hector, me alegra que le encontrastes solución a tu problema. Por favor, ¿puedes agregar la solución como respuesta a tu pregunta, en vez de agregarlo a tu pregunta en sí? Y no es necesario cambiar el título a solucionado. Para marcar una pregunta como solucionada, lo haces mediante darle clic al check a la izquierda de la respuesta.
    – sstan
    el 29 nov. 2016 a las 3:35
  • Te entiendo, claro @sstan ya lo hago, y gracias por la aclaratoria, saludos! el 29 nov. 2016 a las 3:38

2 respuestas 2

0

Según la documentación de Foundation, la sintaxis correcta sería esta:

$('#exampleModal1').html('<%= j render "form" %>').foundation('open');
2
  • Lo he utilizado de esa forma pero tampoco he tenido suerte, aclarar de que si utilizo el llamado en la misma vista del modal funciona, pero haciendo render no, y creo q ahi esta el problema en como se llama, o no se si la verdad el open-data estaria bien escrito el 29 nov. 2016 a las 1:21
  • La verdad no conozco nada de Ruby, así que no sé a que te refieres con "render". Asumo que el problema debe estar en que el elemento no está en el DOM al momento de llamarlo.
    – Shaz
    el 29 nov. 2016 a las 1:23
0

Encontre el problema, no era problema en si del codigo, si no mas bien del modo en que estaba llamando al form, la problematica se presentaba asi: Estaba llamando al modal desde la carpeta de "enterprises" y el form estaba ubicado en "products" ya que necesito que la empresa pueda agregar sus productos, pero aparentemente el llamado por ajax no funciona a nivel de carpetas, o posiblemente si, pero me obligaba a hacerlo de esta forma, ya que necesitaba pasar por medio de new.js.erb para que rails supiera que estaba llamando a la accion "new" de product para que trajera el form de new, esto es igual a la accion "edit", si bien como el llamado de ajax no encontraba el id de "exampleModal1" o como se desea llamar, puse el modal a nivel global, para que esta pudiese ser llamado desde cualquier lugar del sitio, asiq lo agregue dentro de layouts/application.html.erb, ya que el "yield" se encuentra dentro del layouts, asi podria encontrar el id sin ningun problema, y deje el codigo del form solo, sin el div del modal, de esta forma, con el open-data encontraba el id del modal a forma global y el remote true, encontraba el form de forma remota con el render de new.js, espero haberme explicado, y esto sea de utilidad para ustedes, lo dejare para futuras referencias, saludos!

Documentacion sobre el Modal con Foundation 6: https://foundation.zurb.com/sites/docs/reveal.html

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.