Problem to open a modal with AJAX Foundation 6 in Rails

Question

Problem to open a modal with AJAX Foundation 6 in Rails

Navigation

#1 by (0 votes)
#2 by (0 votes)

-1

For some reason, the modal does not appear when calling it with Foundation 6, I do it by means of a partial, I leave the code friends, maybe they can give me a solution, which I find strange because with other frameworks of styles like Materialize, Bootstrap I do not have any problem:

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();
});

ruby-on-rails

asked by Hector Hernandez 28.11.2016 в 20:13

source

2 answers

0

According to Foundation's documentation, the correct syntax would be this:

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

answered by 29.11.2016 в 02:15

dynamically change the connection of a dbcontext Meteor JS and Cordova

score 0 · Accepted Answer

I found the problem, it was not a problem in the code, but rather in the way I was calling the form, the problem appeared like this: I was calling the modal from the "enterprises" folder and the form was located in "products" since I need the company to add their products, but apparently the call by ajax does not work at the folder level, or possibly yes, but it forced me to do it this way, since I needed to go through new. js.erb so that rails knew that he was calling the action "new" of product to bring the form of new, this is equal to the "edit" action, although as the call of ajax could not find the id of "exampleModal1 "or as you want to call it, I put the modal globally, so that it could be called from anywhere in the site, so add it within layouts / application.html.erb, since the" yield "is inside the layouts , so I could find the id without any problem, and leave the form code only, without the modal div, in this way, with the open-data I found the modal id to global form and the remote true, I found the form remotely with the new.js render, I hope I explained it, and this be useful for you, I'll leave for future references, greetings!

Documentation on the Modal with Foundation 6: link