I've looked at the existing problem logs for Element.extend issues, but
so far none of the fixes applied in them seem to work for my issue.
The code example below attempts to have an element SlideDown. By
clicking the [...], the element will slide down, but then click Remove
to clear the container's innerHTML and then click Reload to reload the
previous HTML from an object array. The effect will no longer work and
it breaks in prototype's Element.extend function throwing an "Object
doesn't support this property or method" error.
The reason I keep the html in an object array has to do with my
requirements, but basically, I can have many elements loaded onto a
page and by keeping the html in an array, I don't have to go back to
the server to get it if its already been loaded.
Any suggestions?
Consequently, the following code works fine in Firefox.
To see the error - click the [...] a couple of time to verify the
effect works, then click Remove and then Reload. Now try the effect
again by clicking the [...].
<html>
<head>
<title>testCase</title>
<script src="/jsTRAD/scriptaculous-js-1.6.1/lib/prototype.js"
type="text/javascript"></script>
<script
src="/jsTRAD/scriptaculous-js-1.6.4/src/scriptaculous.js"
type="text/javascript"></script>
<script type="text/javascript">
var Components = new Object();
var ComponentNav = new Object();
function Remove(obj) {
//alert($('data').innerHTML);
var curComp = 'flows'
if (!Components[curComp] && $(obj).innerHTML !=
'')
Components[curComp] = $(obj).innerHTML
$(obj).innerHTML = '<div>Something Else</div>';
}
function Reload(obj) {
if (Components['flows'])
$(obj).innerHTML = Components['flows']
}
function SlideElement(obj, clicked) {
var e = $(obj);
try {
if (e) {
if(e.style.display == 'none' &&
clicked) {
//debugger;
new Effect.SlideDown(e,
arguments[1] || {});
setTimeout("SlideElement('" + obj + "')", 4500);
} else {
Element.hide(e);
}
}
} catch(e) {
alert(e.description);
}
}
</script>
</head>
<body>
<form>
<span onclick="Remove('data');">Remove</span>
<span onclick="Reload('data');">Reload</span>
<table>
<tr>
<td>
<div id="data">Does Not work
after the html has been removed and
reloaded
<span class="edit"
style="TEXT-ALIGN: left"
onclick="SlideElement('test', {duration: .2 });">[...]</span>
<div style="Z-INDEX: 4;
WIDTH: 350px; POSITION: absolute">
<div id="test"
style="DISPLAY: none;HEIGHT: 200px">
<div>
<table class="options">
<tr>
<td><span>Option 1</span></td>
</tr>
<tr>
<td><span>Option 2</span></td>
</tr>
<tr>
<td><span>Option 3</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
