Javascript with select in partial

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" %>

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

N a R e N

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

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

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

Sure they will, if they're invoked directly.

Hassan,

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

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

<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>

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

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?

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

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' %>

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:

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

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:

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

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

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*