This is my first time using AJAX so with my objective in mind, I decided to follow this post for general guidance. I too would like a "modal popup on show action", the only difference is I'd like it render on my new.html.erb page rather than the index mentioned on the article.
In my new.html.erb I already have AJAX saving a record aka "Draft". After that there is a button that pops-up a modal. In this modal, I'd like to display the show action aka get the previously saved object - but I'm not seeing anything.
Not sure exactly what's going as this is a bit foreign to me. Anyone know what I'm missing here?
Here's what I have..
controllers/campaigns_controller.rb
def show
@campaign = Campaign.includes(:program, :uploadzip, :plan, :uploadpdfs).find(params[:id])
respond_to do |format|
format.html
format.js
format.json { render json: @campaign }
end
end
views/campaigns/new.html.erb
<div class="row title">
<div class="small-12 large-12 columns">
<h2>Launch a Campaign</h2>
</div>
</div>
<%= render 'form' %>
<%= button_tag(type: "button", id: "campaign-create-button") do %>
<% link_to "Confirm & Execute", @campaign, class: "link-button", action: "show", remote: true %>
<% end %>
views/campaigns/_target.html.erb (A Zurb-Foundation's modal)
<div id="executeModal" class="row large " role="dialog">
<div class="large-12 columns modal-header" id="modal-prompt">
<h3 class="row">Warning: Confirm Campaign</h3>
</div>
<div>
<p>You are about to execute a campaign. Please confirm campaign settings one last time before executing.</p>
</div>
<div class="row">
<div id="campaignModal">
</div>
<div class="row">
<%= button_tag "Cancel", type: "button", class: "cancelButton confirmButton" %>
<%= button_tag "Execute Campaign", type: "button", class: "confirmButton" %>
</div>
</div>
</div>
</div>
views/campaigns/show.js.erb
$modal = $('#executeModal');
$modalBody = $('#campaignModal');
$modalBody.html("<%= escape_javascript(render @campaign) %>");
$modal.modal();
views/campaigns/_campaign.html.erb
<table>
<tbody>
<tr>
<td>
Campaign Name:
</td>
<td>
<%= @campaign.name %>
</td>
</tr>
<tr>
<td>
Program:
</td>
<td>
<%= @campaign.program.name %>
</td>
</tr>
<tr>
<td>
Zip File:
</td>
<td>
<%= @campaign.uploadzip.file_name %>
</td>
</tr>
<tr>
<td>
Additional Files:
</td>
<td>
<% @campaign.uploadpdfs.each do |f| %>
<li><%= f.file_name %></li>
<% end %>
</td>
</tr>
<tr>
<td>
Plan:
</td>
<td>
<%= @campaign.plan.name %>
</td>
</tr>
<tr>
<td>
Channels:
</td>
<td>
<%= @campaign.channels.to_sentence %>
</td>
</tr>
</tbody>
</table>
UPDATE:
Incase the way I have the form saving the object is somehow interfering or not setup correctly, below is the code for that.
$(".close-button").click(function(e){
e.preventDefault();
var planId = $("#campaign_plan_id").val();
var nameId = $("#campaign_name").val();
var programId = $("#campaign_program_id").val();
var uploadZip = $("#uploadzip_id").val();
// var uploadPdf = $("campaign[uploadpdf_ids][]").val();
if (planId.length > 0 &&
nameId.length > 0 &&
programId.length > 0 &&
uploadZip.length > 0){
$('form#new_campaign').trigger('submit.rails');
$("#targetModal, .modalDarken").fadeOut();
$("#target-button").hide();
$("#campaign-create-button").css("display", "block").css("background-color", "#E37368");
} else {
$("#targetModal, .modalDarken").fadeOut();
}
});
1 个答案:
答案 0 :(得分：1)
仅仅为了后代...我们排序了一堆语法问题，但直到我们接近“完成”AJAX远程调用是从New视图触发时才意识到，但是期望创建的实例“通过AJAX显示“所以这不会起作用......在OP中引用的SO帖子中，调用是在Index视图中产生的，这更有意义。
不过，
SO reference post看起来很不错。