Run JavaScript on partial rendering

Question

I have JavaScript code that I would like to execute after the user clicks one of their folders - it runs the show and show.js.erb actions, which displays a partial one.

Show.js.erb, which starts when a user clicks on one of their folders, looks like this:

$("body").append( "<%=j render :partial => 'contents', :locals => {:folder => @folder } %>" ); 

He successfully introduces a partial _contents.html.erb, which looks like this:

  <script type="text/javascript"> d3JSON = function(){ d3.json("/folders/<%= @folder.id %>.json", function(error, data) { if (error) return console.warn(error); var folderChildren = [], circle; /*for (var i=0; i < data.submissions.length; i++) { var submissionWords = data.submissions[i].content.split(' ').join(''); var size = submissionWords.length; folderChildren[data.submissions[i].id] = size; console.log(folderChildren); };*/ var svg = d3.select("body").selectAll("svg"); circle = svg.selectAll("circle") .data(data.submissions); circle.enter().append("svg:a") .attr("xlink:href", function(d){ return "http://localhost:3000/submissions/" + d.id; }) .append("circle") .attr("cy", function(d) {return d.content.length * 5 + "px";}) .attr("class", "floating") .attr("cx", function(d){ return (d.content.length / 2) * 10 + "px"; }) .attr("r", function(d){ return (d.content.length / 2) * 1.2;}); circle.exit().remove(); }); }; d3JSON(); </script> 

I tested this JavaScript and it works, but when it is introduced, it should interact with the div in the DOM, and that is not the case. The divs are in my index.html.erb file, so they are already loaded when this JS is entered. I tried a lot of different things to try to get this to work, but alas, no luck. Any advice? If I try to load something simple, like alert() via partial, it works, but I assume that it does not work due to the loading order of the DOM and js.

Answer 1

You are right about the loading order of the DOM and js. So what you can do is to fire a custom event in show.js.erb and listen to this event in one of your js files and call d3JSON(); .

 // show.js.erb $("body").append( "<%=j render :partial => 'contents', :locals => {:folder => @folder } %>" ).trigger('show'); 

In one of your javascript files uploaded to your page

 $(document).ready(function(){ $('body').on('show', function() { d3JSON(); }); }); 

And you do not need a d3JSON(); call d3JSON(); in _contents.html.erb .

Give it a try.