Getting html and javascript to load in correct order in rails

Question

I have an link_to :remote ajax call from my menu, that dynamically renders each page's contents when clicked. Everything is being called and replaced mostly as it should, but D3 and vticker only bind to their respective divs when I click on the menu link for the second time. Which makes me believe that the html/js are not loading in the correct order. So when it loads the first time, there is no div for it to bind to.

Furthermore inside the replaced contents, I have an internal ajax query that updates the news ticker based on what d3 tooltip is clicked and after replacing the content the tickers ajax query is no longer working and I am getting:

GET http://localhost:3000/render_bubble_partial?data=The+Environment 404 (Not Found)

This is odd as it worked before and I have the route setup:

bubbles_render_bubble_partial GET /bubbles/render_bubble_partial(.:format) bubbles#render_bubble_partial
bubbles_render_poll_partial   GET /bubbles/render_poll_partial(.:format)   bubbles#render_poll_partial
bubbles_render_bubble_content GET /bubbles/render_bubble_content(.:format) bubbles#render_bubble_content

The li from the menu partial:

<li id='panel-3'><%= link_to image_tag('keyBubble.png'), bubbles_render_bubble_content_path, :remote => true %></li>

The contents of the partial that I am rendering:

<div class="col span_5_of_7">
    <section id="infographic">
        <div id ="infographicContent">
            <input id="slider" style="position:inherit;top:4px;" type="range" min="0" max="62" value="0"> </input>
            <div id="tooltip">
            </div>
            <%= javascript_include_tag "http://d3js.org/d3.v3.min.js" %>
            <%= javascript_include_tag "bubbles", "vticker" %>
            <script>
                $('.col.span_5_of_7').click(function(){
                      var text = $("#tooltip b").text();
                        if(text == ""){text = null}
                        var params = {data:text};
                        console.log(params)
                        $.ajax({
                          url: "render_bubble_partial",
                          data: params, 
                          success: function(result) {
                               console.log("finished ajax callback");
                          }
                        });
              });
            </script>   
        </div>
    </section>  
</div>
<div class="col span_1_of_7">
    <section id="feed">
        <div id ="infoFeed">
            <ul style="font: 10px sans-serif;text-align: justify;">
                <% bubble_query(nil) %>
                <% @bubble_story.each do |story| %>
                    <li style="border-style:solid;border-top:thick double #000;">
                        <p><h4 style="text-align:left;"><%= link_to story.title, story.url, :target => "_blank" %>
                            </h4> <%= story.description %> <h7><br /><br /><%= story.source %><br /><%= story.date.to_date %><%= story.issue %></h7></p>
                    </li>
                <% end %>
            </ul>
        </div>
    </section>
    <script> $(function() { $('#infoFeed').vTicker();});</script>
</div>

I am unsure what to do to solve the problem... can anyone offer some advice please?

Answer 1

Are you calling the ajax to reload the partial from within a partial that is itself being updated by ajax? If so, try moving it out. You could try moving your javascript to the application layout, or the application.js file.

Answer 2

但是在部分布局和应用程序布局之间移动javascript_include_tags，我能够使其正确加载。