Executing js when a partial loads

JannaB · July 6, 2009, 11:40pm

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>

Bill_Walton1 · July 7, 2009, 12:49am

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

JannaB · July 7, 2009, 12:57am

Thanks but that doesn't work in a partial.

Don_Hill · July 7, 2009, 1:45am

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

JannaB · July 7, 2009, 9:06am

No, nor does this work in a partial.

Bill_Walton1 · July 7, 2009, 2:26pm

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

Naren1 · July 7, 2009, 2:34pm

what exactly happen , when partial loaded ? any error ?

~ N a R e N

Vitaly_Kushner1 · July 7, 2009, 3:11pm

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.

JannaB · July 7, 2009, 3:12pm

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

/* */

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

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