Rails, trying to fill a modal content with jQuery

Question

Due to some reasons, I have to fill a Bootstrap-modal's content with jQuery. In my view I got simply:

<div class = "modal fade" id="editArticleForm">
</div>

I have an edit button which calls the edit function in my controller:

def edit

        respond_to do |format|
            format.js
        end     
end

My edit.js.erb:

$('#editArticleForm').html('<%= j(render partial: "articles/modals/editModalPartial")%>');
$('#editArticleForm').modal('show');

And my partial to fill the modal:

<div class= "modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="">
          <span>&times;</span>
        </button>
        <h4 class="modal-title">
          Edit Article                
        </h4>

      </div>
      <div class="modal-body" style="max-height: 1000px;">


        <%=form_for @article, url: articles_create_path,remote: true, html: {class: "form-horizontal"} do |f|%>

        <fieldset class="content-group">
          <legend class="text-bold">Images</legend>
          <div class="form-group">
            <label class="col-lg-2 text-semibold">Current image:</label>
            <div class="col-lg-10">
              <%= image_tag @article.image_url(:thumb)%>
            </div>
          </div>


          <div class="form-group">
            <label class="col-lg-2 text-semibold">Change image:</label>
            <div class="col-lg-10">
              <%= f.file_field :image, :class => 'file-input-custom', 'data-show-caption' => true, 'data-show-upload' => false, :accept => 'image/*'%>
            </div>
          </div>

        </fieldset>
        <%= f.fields_for :strings do |fa| %>
        <fieldset class="content-group">
          <legend class="text-bold">Localization</legend>
          <div class="tabbable">

            <div class="tab-content">
              <% @languages.each do |lang| %>
              <%= fa.fields_for lang.id.to_s do |fb| %>

              <div class="tab-pane active" id="basic-justified-tab-<%= lang.id %>">
                <div class="form-group">
                  <label class="col-lg-2 control-label text-semibold"><%= lang.name %> Title: <span class="text-danger">*</span></label>
                  <div class="col-lg-10">
                    <%= fb.text_field :title, :class => 'form-control', :required => 'required' %>
                  </div>
                </div>

                <div class="form-group">
                  <label for="title" class="col-md-4 col-md-offset-1"><%= lang.name %> Text:</label>
                  <%= fb.text_area :text, :style => "height: 250px;", :class => 'wysihtml5 wysihtml5-min form-control', :required => 'required' %>
                </div>
              </div>
              <hr>

              <% end %>
              <% end %>
            </div>
          </div>

        </fieldset>
        <% end %>                              

        <div class="form-group">

          <div class="col-md-2 col-md-offset-8">
            <input type="submit" class="btn btn-success" value="Submit" >
          </div>

        </div>

        <% end %>
      </div>
    </div>
  </div>

The rest of the screen gets blackened out, but the modal does not popup.

What am I doing wrong?

If you can suggest a better way to load the modal with content I will be glad to hear it.

Any help appreciated.

Answer 1

The actual problem was that I was trying to fill:

<div class = "modal fade" id="editArticleForm"> </div>

But the modal fade div should have been in my editModalPartial with everything else and instead on my view I should have a placeholder div to fill.

<div id="modal_placeholder"> </div>

I am not sure why, but it worked that way.

Answer 2

The respond_to block looks for the file name same as the action name and then sees for view file in the folder app/views/controller.

So your edit.js.erb should be inside app/views/articles/ in order for respond_to block to access the view template

Hope it helps!