Executing js when a partial loads

In my view I have a:

<%= render :partial => 'uplog' %>

and the partial is shown below. Note there is js in it which I thought
got executed on load (but, I have found out this does NOT happen when
a partial is loaded. How else can I execute the js below when the
partial gets loaded (someone said to call it explicitly....but how and
from where?) THanks, Janna B

<div id="namesdata" style="float: left; width: 200px;">
names
</div>
<div id="rowsdata" style="float: left; ">
rows
</div>
<script>
startClock('../../../../www/test/ggriptest/getdata1.dat','./
getdata2.php');
</script>

Not tested, but I believe you can add the onload to the div.

<div id="namesdata" style="float: left; width: 200px;" onload="startClock('your parameters' in single quotes')">

Thanks but that doesn't work in a partial.

I don’t think any javascript will get executed until the document is ready at which time onload will get fired. You could put the code in the body on load but that wouldn’t help in the partial.

You could use some jquery script and register a functioncall like

names
rows

No, nor does this work in a partial.

You haven't said what triggers the load of the partial. If you can make
that event an Ajax event, then you can trigger the execution of the JS
directly in an RJS template. The only problem I'd potentially
anticipate would be if the browser decided to execute the JS prior to
the completion of the rendering of the partial. Shouldn't happen, but
if it did, you could just put the function in application.js and it
would already be there.

If you go this route, the only 'tricky' part I ran across was
understanding that, assuming your JS signature looks like this:

startClock('arg1');

The RJS signature looks like this:

page.call "startClock" "arg1"

HTH,
Bill

what exactly happen , when partial loaded ? any error ?

~ N a R e N

Note that there is nothing special about the partial. The browser has
no idea if the code came from a single template or was generated from
the partials.
So if something doesn't work its unrelated to the partial.
Anyway.... if you have a javascript on that page that does gets
executed you can *add* more code to the same spot from the partial
like this:

<% content_for :on_load do %>
  .... js code to run on load
<% end %>

wherever you have a js code that runs on the load just add:
<%= yield :on_load %>

And it will add whatever was added in the partial.
Note that it will work if the yield is in the layout or in the
template *after* the rendering of the partial, this is because when it
runs the partial must have run already (and layouts code is the last
to execute btw, so that if you do <% @qwe = 123 %> anywhere in the
templates or partials it will be available in the layout)

Hope this helps.

Nothing happens. Nothing at all. I see "rows" and "names" printed up,
but in my uplog.js, which contains the function startclock(..) which
has an alert in it, evidently never gets called. Worse yet, I get a
peculiar error in the Firefox Error Console when I click on the
link_to_remote link (the error is simply "Permission denied to call
method Location.toString). I am including all of the code below.

## Here is my partial that gets called:

<div id="namesdata" style="float: left; width: 200px;" >
names
<%= link_to_remote("StartClock",
        :url =>{ :action => :clockstarter }) %>
</div>
<div id="rowsdata" style="float: left; ">
rows
</div>

## Here is clockstarter.rjs:

page.call "startClock" "../../../../www/test/ggriptest/getdata1.dat"
"./getdata2.php'"

## This is in my layout, which the partial is loaded into:

<%= javascript_include_tag "uplog" %>

## Here is /public/javascripts/uplog.js

if (window.ActiveXObject && !window.XMLHttpRequest) {

  window.XMLHttpRequest = function() {

    var msxmls = new Array(

      'Msxml2.XMLHTTP.6.0',

      'Msxml2.XMLHTTP.5.0',

      'Msxml2.XMLHTTP.4.0',

      'Msxml2.XMLHTTP.3.0',

      'Msxml2.XMLHTTP',

      'Microsoft.XMLHTTP');

    for (var i = 0; i < msxmls.length; i++) {

      try {

        return new ActiveXObject(msxmls[i]);

      } catch (e) {

      }

    }

    return null;

  };

}

// Gecko support

/* :wink: */

// Opera support

if (window.opera && !window.XMLHttpRequest) {

  window.XMLHttpRequest = function() {

    this.readyState = 0; // 0=uninitialized,1=loading,2=loaded,
3=interactive,4=complete

    this.status = 0; // HTTP status codes

    this.statusText = '';

    this._headers = [];

    this._aborted = false;

    this._async = true;

    this._defaultCharset = 'ISO-8859-1';

    this._getCharset = function() {

      var charset = _defaultCharset;

      var contentType = this.getResponseHeader('Content-
type').toUpperCase();

      val = contentType.indexOf('CHARSET=');

      if (val != -1) {

        charset = contentType.substring(val);

      }

      val = charset.indexOf(';');

      if (val != -1) {

        charset = charset.substring(0, val);

      }

      val = charset.indexOf(',');

      if (val != -1) {

        charset = charset.substring(0, val);

      }

      return charset;

    };

    this.abort = function() {

      this._aborted = true;

    };

    this.getAllResponseHeaders = function() {

      return this.getAllResponseHeader('*');

    };

    this.getAllResponseHeader = function(header) {

      var ret = '';

      for (var i = 0; i < this._headers.length; i++) {

        if (header == '*' || this._headers[i].h == header) {

          ret += this._headers[i].h + ': ' + this._headers[i].v +
'\n';

        }

      }

      return ret;

    };

    this.getResponseHeader = function(header) {

      var ret = getAllResponseHeader(header);

      var i = ret.indexOf('\n');

      if (i != -1) {

        ret = ret.substring(0, i);

      }

      return ret;

    };

    this.setRequestHeader = function(header, value) {

      this._headers[this._headers.length] = {h:header, v:value};

    };

    this.open = function(method, url, async, user, password) {

      this.method = method;

      this.url = url;

      this._async = true;

      this._aborted = false;

      this._headers = [];

      if (arguments.length >= 3) {

        this._async = async;

      }

      if (arguments.length > 3) {

        opera.postError('XMLHttpRequest.open() - user/password not
supported');

      }

      this.readyState = 1;

      if (this.onreadystatechange) {

        this.onreadystatechange();

      }

    };

    this.send = function(data) {

      if (!navigator.javaEnabled()) {

        alert("XMLHttpRequest.send() - Java must be installed and
enabled.");

        return;

      }

      if (this._async) {

        setTimeout(this._sendasync, 0, this, data);

        // this is not really asynchronous and won't execute until the
current

        // execution context ends

      } else {

        this._sendsync(data);

      }

    }

    this._sendasync = function(req, data) {

      if (!req._aborted) {

        req._sendsync(data);

      }

    };

    this._sendsync = function(data) {

      this.readyState = 2;

      if (this.onreadystatechange) {

        this.onreadystatechange();

      }

      // open connection

      var url = new java.net.URL(new java.net.URL
(window.location.href), this.url);

      var conn = url.openConnection();

      for (var i = 0; i < this._headers.length; i++) {

        conn.setRequestProperty(this._headers[i].h, this._headers
[i].v);

      }

      this._headers = [];

      if (this.method == 'POST') {

        // POST data

        conn.setDoOutput(true);

        var wr = new java.io.OutputStreamWriter(conn.getOutputStream
(), this._getCharset());

        wr.write(data);

        wr.flush();

        wr.close();

      }

      // read response headers

      // NOTE: the getHeaderField() methods always return nulls for
me :frowning:

      var gotContentEncoding = false;

      var gotContentLength = false;

      var gotContentType = false;

      var gotDate = false;

      var gotExpiration = false;

      var gotLastModified = false;

      for (var i = 0; ; i++) {

        var hdrName = conn.getHeaderFieldKey(i);

        var hdrValue = conn.getHeaderField(i);

        if (hdrName == null && hdrValue == null) {

          break;

        }

        if (hdrName != null) {

          this._headers[this._headers.length] = {h:hdrName,
v:hdrValue};

          switch (hdrName.toLowerCase()) {

            case 'content-encoding': gotContentEncoding = true; break;

            case 'content-length' : gotContentLength = true; break;

            case 'content-type' : gotContentType = true; break;

            case 'date' : gotDate = true; break;

            case 'expires' : gotExpiration = true; break;

            case 'last-modified' : gotLastModified = true; break;

          }

        }

      }

      // try to fill in any missing header information

      var val;

      val = conn.getContentEncoding();

      if (val != null && !gotContentEncoding) this._headers
[this._headers.length] = {h:'Content-encoding', v:val};

      val = conn.getContentLength();

      if (val != -1 && !gotContentLength) this._headers
[this._headers.length] = {h:'Content-length', v:val};

      val = conn.getContentType();

      if (val != null && !gotContentType) this._headers
[this._headers.length] = {h:'Content-type', v:val};

      val = conn.getDate();

      if (val != 0 && !gotDate) this._headers[this._headers.length] =
{h:'Date', v:(new Date(val)).toUTCString()};

      val = conn.getExpiration();

      if (val != 0 && !gotExpiration) this._headers
[this._headers.length] = {h:'Expires', v:(new Date(val)).toUTCString
()};

      val = conn.getLastModified();

      if (val != 0 && !gotLastModified) this._headers
[this._headers.length] = {h:'Last-modified', v:(new Date
(val)).toUTCString()};

      // read response data

      var reqdata = '';

      var stream = conn.getInputStream();

      if (stream) {

        var reader = new java.io.BufferedReader(new
java.io.InputStreamReader(stream, this._getCharset()));

        var line;

        while ((line = reader.readLine()) != null) {

          if (this.readyState == 2) {

            this.readyState = 3;

            if (this.onreadystatechange) {

              this.onreadystatechange();

            }

          }

          reqdata += line + '\n';

        }

        reader.close();

        this.status = 200;

        this.statusText = 'OK';

        this.responseText = reqdata;

        this.readyState = 4;

        if (this.onreadystatechange) {

          this.onreadystatechange();

        }

        if (this.onload) {

          this.onload();

        }

      } else {

        // error

        this.status = 404;

        this.statusText = 'Not Found';

        this.responseText = '';

        this.readyState = 4;

        if (this.onreadystatechange) {

          this.onreadystatechange();

        }

        if (this.onerror) {

          this.onerror();

        }

      }

    };

  };

}

function startClock(namedata,rowsdata){
  alert(namedata);
setTimeout("startClock()", 2000);
getNames(namedata);
getRows(rowdata);
}

var req;

function getNames(namedata){
req = new XMLHttpRequest();
if(req){ req.onreadystatechange=processReqChange1;
  try{
    req.open('GET', namedata);

    req.setRequestHeader('If-Modified-Since' ,'Sat, 1 Jan 1900
00:00:00 GMT');
  req.send("");
  }catch(e){
      alert(e);
  }
}
}

function getRows(rowdata){
req = new XMLHttpRequest();
if(req){ req.onreadystatechange=processReqChange2;
  try{
    req.open('GET', rowdata);
    req.setRequestHeader('If-Modified-Since' ,'Sat, 1 Jan 1900
00:00:00 GMT');
  req.send("");
  }catch(e){
      alert(e);
  }
}
}

function processReqChange1(){
  if(req.readyState == 4 && (req.status == 200 || req.status == 304)){
    var rows = eval(req.responseText);
    var html = "<br><br><table>";

    for(r in rows){
  if(rows[r].status=="-1")
    html+="<tr><td><FONT COLOR=\"#4B7399\">"+rows[r].order+". "+rows
[r].username+"</FONT></td></tr>";
  else if(rows[r].status=="0")
    html+="<tr><td>"+rows[r].order+". "+rows[r].username+"</td></tr>";
  else
    html+="<tr><td bgcolor=\"#4B7399\"><FONT COLOR=\"#FFFFFF\">"+rows
[r].order+". "+rows[r].username+"</td></tr>";
}
    html+="</table>";
    document.getElementById("rowsdata").innerHTML = html;
  }
}

function processReqChange2(){
  if(req.readyState == 4 && (req.status == 200 || req.status == 304)){
    var rows = eval(req.responseText);
     var html=rows[0].totals+" ups for today for <b><u>"+rows[0].room
+"</b></u><br><br><table>";
  html+="<tr align=\"center\" valign=\"top\" bgcolor=\"#C0C0C0\">";
  html+="<th valign=\"top\" align=\"center\" bgcolor=\"#C0C0C0\"

#</th>";

  html+="<th valign=\"top\" align=\"center\" bgcolor=\"#C0C0C0\"

Day</th>";

  html+="<th valign=\"top\" align=\"center\" bgcolor=\"#C0C0C0\"

Time</th>";

  html+="<th valign=\"top\" align=\"center\" bgcolor=\"#C0C0C0\"

Sensor</th>";

  html+="<th valign=\"top\" align=\"center\" bgcolor=\"#C0C0C0\"

Heads</th>";

  html+="<th valign=\"top\" align=\"center\" bgcolor=\"#C0C0C0\"

Associate</th>";

  html+="<th valign=\"top\" align=\"center\" bgcolor=\"#C0C0C0\"

CXL</th>";

  html+="<th valign=\"top\" align=\"center\" bgcolor=\"#C0C0C0\"

BB</th>";

  html+="<th valign=\"top\" align=\"center\" bgcolor=\"#C0C0C0\"

TO</th>";

  html+="<th valign=\"top\" align=\"center\" bgcolor=\"#C0C0C0\"

DR</th>";

  html+="<th valign=\"top\" align=\"center\" bgcolor=\"#C0C0C0\"

OK</th>";

  html+="</tr>";
    var k=-1;
    for(r in rows){
      k++;
    if(k>0){
    html+="<tr>";
      html+="<td>"+rows[r].dayno+"</td><td>"+rows[r].dof+"</

<td>"+rows[r].time+"</td><td>"+rows[r].sensor+"</td><td>"+rows

[r].hits+"</td><td>"+rows[r].assoc+"</td><td>"+"CXL";
    if(rows[r].bb==-1)
    html+="</td><td bgcolor=\"#FFFFFF\">"+"BB";
    else if(rows[r].bb==1)
    html+="</td><td bgcolor=\"#1F7F00\">"+"BB";
    else
    html+="</td><td>"+"BB";
    if(rows[r].tor==-1)
    html+="</td><td bgcolor=\"#FFFFFF\">"+"TO";
    else if(rows[r].tor==1)
    html+="</td><td bgcolor=\"#1F7F00\">"+"TO";
    else
    html+="</td><td>"+"TO";
    if(rows[r].dr==-1)
    html+="</td><td bgcolor=\"#FFFFFF\">"+"DR";
    else if(rows[r].dr==1)
    html+="</td><td bgcolor=\"#1F7F00\">"+"DR";
    else
    html+="</td><td>"+"DR";
    html+="</td><td>"+"OK"+"</td>";
      html+="</tr>";
    }
    }
    html+="</table>";
    document.getElementById("namesdata").innerHTML = html;
  }
}

there might be some problem in you arguments specially second one. For checking the same just pass an empty string to it and check if the alert is coming .

~ N a R e N

Naren,

Ok, in my rjs I pass it:

page.call "startClock" "" ""

Still, nothing happend (but no error in firebug console now) -Janna

your call is not valid ,

use , between arguments and method
like this
page.call “startClock”, “”, “”

N A R E N

Thank you Naren. The solution proposed by Vitaly I just tried out and
it works! However, I have:

startClock("../../../../public/test/ggriptest/
getdata1.dat","../../../../public/test/ggriptest/getdata2.dat");

my app (this particular partial) is in

G:\InstantRails\rails_apps\ggripv2\app\views\channels

and the two .dat files (which contain JSON data) are at:

G:\InstantRails\rails_apps\ggripv2\public\test\ggriptest

Am I specifying this correctly in the parameters above? -Janna