dyserone dyserone - 6 months ago 21
jQuery Question

Rails, trying to fill a modal content with jQuery

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

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.