Javascript with select in partial

rubyonrails-talk
1

I have the following partial, listed at the bottom of this post. It has a Javascript function with it, and a select, and an observe field on the select.

Everything works fine when it is loaded with the entire page, but rendering the partial alone, of course, the javascript will not execute. How can I force the javascript function to execuste when I do subsequent render :partial => 'thispartial'

Thanks RVince -------------_thispartial.html.erb-------------

<script> function doReset(){   document.getElementById("channelnotes").options.selectedIndex = 0;   document.getElementById("channelnotes").options [document.getElementById ("channelnotes").options.selectedIndex].value=""; } </script>

<%= select("channelnotes", "channelnotes", Channelnote.find (:all, :order => 'tstamp DESC', :limit =>3, :conditions => ["deleted=0"]).collect {|p| [ p.note, p.note]}, { :include_blank => true , :selected=>0, :value=>""},{}) %> <%= observe_field "channelnotes", :url => {:controller => :channels, :action => 'notesboxchange' }, :frequency => 1.0, :with => "'channelnotes=' + value" %>

2

you need to put javascript function in parent page from where you are calling the partial

N a R e N

3

Yes but I need to know how to call it.. I would call it onload= in the html options, but it is not loading -- it is rendering a partial. So what is the event call that will have it be called when the partial reloads? -RVince

4

Perhaps I'm totally missing the boat here, but why not just invoke the function directly in the partial?

5

beacuse javascript functions in partial will only execuate when the parent document is onload() -- not the partial itself on subsequent loads of a partial.

6

Sure they will, if they're invoked directly.

7

Hassan,

How do you mean -- how would you do that? Thanks, -RVince

8

<div id="my_partial">   something something <script type="text/javascript">   someFunction(); // will execute on load and on each refresh </script> </div>

9

<script> function doReset(){ document.getElementById("channelnotes").options.selectedIndex = 0; document.getElementById("channelnotes").options [document.getElementById ("channelnotes").options.selectedIndex].value="";}

</script>

Hello RVince, would you please try in this way: <script> doReset = function(){         document.getElementById("channelnotes").options.selectedIndex = 0;         document.getElementById("channelnotes").options [document.getElementById ("channelnotes").options.selectedIndex].value=""; } </script>

10

Hassan, Samiron,

THank you for your help, but both of these solutions result in the same problem. THe javascript in the partial is only executed when the partial is loaded the first time. Subsequent render :partial =>.. it does not execute. -RVince

11

Then please post the exact code (for the controller involved and the partial) because it works fine here.

Also, what browser are you seeing this failure in?

12

Thank you Hassan -- perhaps I am doing something stupid and not realising it? It is failing for me in Firefox (latest version) and Chrome (latest version) I have not tested MSIE. I am running Rails 2.3.2.

I have a partial, /channels/_channelnotesfield.html.erb, with javascript, as follows:

Notes: <%= select("channelnotes", "channelnotes", Channelnote.find (:all, :order => 'tstamp DESC', :limit =>3, :conditions => ["deleted=0"]).collect {|p| [ p.note, p.note]}, { :include_blank => true , :selected=>0, :value=>""},{:onKeyDown => "fnKeyDownHandler (this, event);", :onKeyUp => "fnKeyUpHandler_A(this, event); return false;", :onKeyPress => "return fnKeyPressHandler_A(this, event);", :onChange => "fnChangeHandler_A(this, event);", :style => "width:350px;",:id=> "channelnotes"}) %> <%= observe_field "channelnotes", :url => {:controller => :channels, :action => 'notesboxchange' }, :frequency => 1.0, :with => "'channelnotes=' + value" %> <script> function doReset(){   document.getElementById("channelnotes").options.selectedIndex = 0;   document.getElementById("channelnotes").options [document.getElementById ("channelnotes").options.selectedIndex].value="";   alert("doReset()"); // so we can see if the javascript is being executed } doReset(); </script>

In my ChannelsController I call it with:

def resetchannelnotes    current_associate.update_attributes(:channelnotes => '',:noteson => 0)    render :partial => 'channelnotesfield'   end

But the javascript only gets called when the entire page loads. Thank you -Rvince

13

First, make sure you're running Firebug with FF so you can see if any JS errors are causing your script(s) to exit.

Second, in my simple test case I have the following: <%= link_to_remote 'Get another opinion', :url => {:action =>'opinion', :method => 'get'}, :update => 'things/opinion' %> <%= render :partial => 'opinion' %>

14

Crap, sent previous by accident.

First, make sure you're running Firebug with FF so you can see if any JS errors are causing your script(s) to exit.

Second, in my simple test case I have the following:

<%= link_to_remote 'Get another opinion',   :url => {:action =>'opinion', :method => 'get'}, :update => 'things/opinion' %> <%= render :partial => 'opinion' %>

:: and the controller looks like:

  def opinion     render :update do |page|       page.replace 'opinion', :partial => 'opinion'     end   end

:: which reloads this simple partial:

<div id="opinion">   showing an opinion on <%= Time.now %> <script type="text/javascript">   alert("hey!"); </script> </div>

Each click on that "Get another opinion" link changes the partial view (time changes) and JS executes.

Hopefully that's some useful food for thought :slight_smile:

15

Hassan,

Yes, I think I almost have it now. In my controller I have replaced

render :partial => 'channelnotesfield'

with what you have:

render :update do |page|       page.replace 'channelnotesfield' , :partial => 'channelnotesfield'     end

And that does seem to invoke things. However, when I do it your way not, on subsequent calls to replace channelnotesfield in my controller, I get a dialog box that says:

RJS Error:

TypeError: element is null

Clicking OK, another dialog box appears, saying:

Element.replace("blah blah the code of my partial")

All I am doing is calling my partial /views/channels/ _channelnotesfield.html.erb from the controller ChannelsController as shown above. Any idea what I dont have quite right here? Thanks again! -RVince

16

One more time: do you have Firebug installed? If not, do so. Right now. It will help debug JS-related errors and much more.

It sounds to me like you'ver removed an element with an ID your JS is looking for. But it will be easy enough to tell with a tool like Firebug.

Really. :slight_smile:

17

Hassan,

I got it!!! Thanks for your patience and perisistence -- I never would have gotten it if not for you. In my controller, I was replacing the partial with the partial, when I should have been replacing the div with the partial as in:

div.replace 'notesdiv' , :partial => 'channelnotesfield'

Yes, I always use firebug, but how could I have used it to have debugged this? -RVince

18

Hassan,

I got it!!! Thanks for your patience and perisistence -- I never would have gotten it if not for you. In my controller, I was replacing the partial with the partial, when I should have been replacing the div with the partial as in:

div.replace 'notesdiv' , :partial => 'channelnotesfield'

Yes, I always use firebug, but how could I have used it to have debugged this? -RVince

19

I got it!!!

Cool.

Yes, I always use firebug, but how could I have used it to have debugged this?

Every situation is different, of course, but the JavaScript console showing errors (e.g. trying to reference a non-existent object) and (for AJAX interactions) the network console showing requests and responses usually helps me understand what's happening that's different from what I *think* is happening :slight_smile:

HTH, and good luck,

H*