Rails 4.2: Not rendering AJAX response

Question

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

    }

});

Answer 1

Just for posterity... we sorted a bunch of syntax issues but didn't realize until we were close to "finished" that the AJAX remote call was being triggered off of the New view, yet expected a created instance to "show" through AJAX. So that won't work... in the SO post referenced in the OP here, the call was originated on the Index view, which makes more sense.

btw, that SO reference post looks quite good.