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

names
rows

On Mon, 2009-07-06 at 16:40 -0700, JannaB wrote:

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

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

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.

On Tue, 2009-07-07 at 02:06 -0700, JannaB wrote:

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

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.


Vitaly Kushner
http://twitter.com/vkushner
Founder, Astrails Ltd. http://astrails.com
Check out our blog: http://blog.astrails.com

what exactly happen , when partial loaded ? any error ?

~ N a R e N

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

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:

names <%= link_to_remote("StartClock", :url =>{ :action => :clockstarter }) %>
rows

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

”;

for(r in rows){

if(rows[r].status==“-1”)
html+=“

”;
else if(rows[r].status==“0”)
html+=“”;
else
html+=“<td bgcolor="#4B7399"><FONT COLOR="#FFFFFF">”+rows
[r].order+“. “+rows[r].username+””;
}
html+=“
<FONT COLOR="#4B7399">”+rows[r].order+“. “+rows
[r].username+”
”+rows[r].order+“. “+rows[r].username+”
”;
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 “+rows[0].room
+”


“;
html+=”<tr align="center" valign="top" bgcolor="#C0C0C0">“;
html+=”<th valign="top" align="center" bgcolor="#C0C0C0"
nowrap>#“;
html+=”<th valign="top" align="center" bgcolor="#C0C0C0"
nowrap>Day“;
html+=”<th valign="top" align="center" bgcolor="#C0C0C0"
nowrap>Time“;
html+=”<th valign="top" align="center" bgcolor="#C0C0C0"
nowrap>Sensor“;
html+=”<th valign="top" align="center" bgcolor="#C0C0C0"
nowrap>Heads“;
html+=”<th valign="top" align="center" bgcolor="#C0C0C0"
nowrap>Associate“;
html+=”<th valign="top" align="center" bgcolor="#C0C0C0"
nowrap>CXL“;
html+=”<th valign="top" align="center" bgcolor="#C0C0C0"
nowrap>BB“;
html+=”<th valign="top" align="center" bgcolor="#C0C0C0"
nowrap>TO“;
html+=”<th valign="top" align="center" bgcolor="#C0C0C0"
nowrap>DR“;
html+=”<th valign="top" align="center" bgcolor="#C0C0C0"
nowrap>OK“;
html+=”“;
var k=-1;
for(r in rows){
k++;
if(k>0){
html+=”“;
html+=”<td bgcolor="#FFFFFF">“+“BB”;
else if(rows[r].bb==1)
html+=”<td bgcolor="#1F7F00">“+“BB”;
else
html+=”<td bgcolor="#FFFFFF">“+“TO”;
else if(rows[r].tor==1)
html+=”<td bgcolor="#1F7F00">“+“TO”;
else
html+=”<td bgcolor="#FFFFFF">“+“DR”;
else if(rows[r].dr==1)
html+=”<td bgcolor="#1F7F00">“+“DR”;
else
html+=”“;
html+=”“;
}
}
html+=”
“+rows[r].dayno+” “+rows[r].dof+”</
td>
“+rows[r].time+” “+rows[r].sensor+” “+rows
[r].hits+”
“+rows[r].assoc+” “+“CXL”;
if(rows[r].bb==-1)
html+=”
“+“BB”;
if(rows[r].tor==-1)
html+=”
“+“TO”;
if(rows[r].dr==-1)
html+=”
“+“DR”;
html+=”
“+“OK”+”
";
document.getElementById(“namesdata”).innerHTML = html;
}
}

On Jul 7, 10:34 am, Narendra sisodiya [email protected]

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