Javascript fails after partial ajax rendering in rails

Question

I cannot figure out how to load html / javascript correctly. Thus, in highcharts there is no proper div loaded to display the chart when it starts.

I have a partial menu:

<ul class='kwicks kwicks-vertical'>
    <li id='panel-1'><%= link_to_unless_current image_tag('keyIssues.png'), load_key_issues_path, remote: true %></li>
    <li id='panel-2'><%= link_to_unless_current image_tag('pollVsLeader.png'), load_polls_path, remote: true  %></li>
</ul>

That, when called, starts the home_controller.rb method:

def load_key_issues
    respond_to do |format|
        format.js
        format.html { render :action => "refresh", :notice => 'Update SUCCESSFUL!' }
    end
end

Then load_key_issues.js.erb is executed:

$("#replace").html("<%= j render partial: 'shared/key_issues' %>");

which then displays this html in partial:

<div class="col span_6_of_7">
    <section id="infographic">
        <div id ="infographicContent">
            <%= javascript_include_tag "highcharts" %>
            <%= javascript_include_tag "chart" %>
            <div id="chart" style="min-width: 310px; height: 700px; margin: 0 auto"></div>
        </div>
    </section>  
</div>

I don't know how to get this sequence correctly, can anyone help?

Answer 1

Include your javascript on the main page where you are loading the partial.