RoR - Rendering a partial dynamically with Javascript

Question

I'm currently trying to load a partial when a button is clicked. So what I do, is add a remote => true, and then a format.js in the controller action that goes to a .js.erb file where I do this:

$('#videospan').html('<%= escape_javascript(render :partial => 'newpartial') %>');

Now videospan already had a different partial, and now I'm adding this partial instead. This works fine when it comes to the html part of it. Now newpartial has some javascript inside it, which unfortunately is not detected. Is it because the html was loaded before the javascript? How can I make it visibile to the HTML? Do I have to define it in the original html file?

Thank you,

One of the javascript methods:

function saveAll()
{
     for(key in storedData){
        storedData[key].push.apply(storedData[key],[$('#'+key).position().top,$('#'+key).position().left]);
    }


    $.getJSON('<%= save_answers2_course_lecture_path(@course, @lecture) %>',{"stored":storedData}, function(resp){
        redirect()
    });
}

So now I'm trying to pass the javascript by adding it to the js.erb as well, so now I have this in the js.erb:

$('#videospan').html('<%= escape_javascript(render :partial => 'newpartial') %>');
pop = Popcorn.youtube( "#youtube", lec ,{ width: 400, controls: 0});                           
pop.play();

So I want to render the partial which has a #youtube div inside which I then want to use popcorn to add a video to it. Unfortunately, when I add these 3 lines, even the rendering doesn't work..

With firebug, when I check the Response returned, it looks like this:

$('#videospan').html(".........");
pop = Popcorn.youtube( "#youtube", http://www.youtube.com/... ,{ width: 400, controls: 0}); 
pop.controls( false );                          
pop.play();

So everything is sent correctly, but how come it's not displayed?

What do you mean the javascript in newpartial is not detected? — John Naegle
– John Naegle, Commented Nov 29, 2012 at 16:44
jQuery wont detect that there is javascript code inside the string you pass to #html() — krichard
– krichard, Commented Nov 29, 2012 at 16:50
@JohnNaegle I mean I have some javascript methods in that partial. When I call them, they're not found. — user1069624
– user1069624, Commented Nov 29, 2012 at 16:57
@KaiKönig oh ok, well is there another way to pass the partial as well as it's javascript code? — user1069624
– user1069624, Commented Nov 29, 2012 at 16:59

zetetic · Accepted Answer · 2012-11-29 18:16:28Z

1

You're better off moving as much Javascript as possible into script files. One approach is to break up the functionality into code vs. configuration data: put the code in a .js file, and the data into the DOM or a variable:

// Option1 -- Using DOM
// my_function.js
function saveAll() {
  // code code code
  var url = $('#some_dom_element').attr('data-some-attribute-name');

  $.getJSON(url, 'blah blah');
}

# my_template.js.erb
<div id="some_dom_element" data-some-attribute-name="<%= save_answers2_course_lecture_path( @course, @lecture) %>">
</div>

// Option 2 -- Using a variable
// my_function.js
function saveAll() {
  // code code code
  $.getJSON(url, 'blah blah');
}

# my_template.js.erb
var url = '<%= raw(save_answers2_course_lecture_path( @course, @lecture) %>';

answered Nov 29, 2012 at 18:16

zetetic

47.6k10 gold badges114 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1069624 Over a year ago

Ok, well say now I'm rendering the partial like above, and I want to access that javascript code from there. I tried the method you suggessted using the .js.erb, but I think the problem is in the .js file.. To be more precise I have an onload method that needs to be called when this partial is rendered.. how can I do that?

zetetic Over a year ago

If you're rendering javascript, whatever is in the .js.erb will run on the page when the response returns. So you can just put the javascript in the template directly and avoid the onload.

user1069624 Over a year ago

Oh ok.. I tried that.. but I'm not sure why it's not working. I added the code to the question

zetetic Over a year ago

I don't see anything wrong with the code you added. Are you sure that the target element is being added? Maybe try Firebug and run the JS in the console?

user1069624 Over a year ago

Yes I checked with firebug.. without the last 2 lines, the partial is rendered.. but when I add them.. it's not.. but for the video to work I need those 2 lines..

|

user1069624 · Accepted Answer · 2012-11-29 22:54:13Z

1

Incase anyone faces the someone problem.. It was due to an error I had. According to this: http://www.alfajango.com/blog/rails-js-erb-remote-response-not-executing/

The code fails in silence when there are errors in the .js.erb file. To check for errors simply copy the response from firebug, post it in the command line and run it.

answered Nov 29, 2012 at 22:54

user1069624

5712 gold badges9 silver badges24 bronze badges

Collectives™ on Stack Overflow

RoR - Rendering a partial dynamically with Javascript

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related