Hi,
I have a form that contains multiple tables, where in all but one
table have a button element in it with the same class attribute
"remove-site-button", which when clicked, should remove that table
that contains it.
Here is the basic gist of the html - yes it is made short:
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
<div>
<form>
<table class="program-info">
<tr><th>name:</th><td><input name="program-name"/></td></tr>
</table>
<button id="add-site-button" type="button">add site</button>
<table class="site-info">
<tr><th>address</th><td><input name="site-address"/></td></
tr>
<tr><td colspan=2><button class="remove-site-button"
type="button">remove this site</button></td></tr>
</table>
<p><input type="submit"/></p>
</form>
</div>
</body>
</html>
Here's my 'myjs.js' file:
document.observe("dom:loaded", function() {
$('add-site-button').observe('click', function() {
var lsi = $$('.site-info').last(); // get the last table with
classname of site-info
var txi = lsi.innerHTML; // get the HTML inside the table tag
var nsi = Object.clone(lsi); // clone the last table, so we
can get the top element later
// check to see if the clone object is an element
if (Object.isElement(nsi)) {
// get the top element as text - TODO: there must be a
better way to pull the entire html for this out instead of adding it
in the next section
var tx = Object.inspect(nsi);
// add the new element header as text into the last site
info table
lsi.insert({ after: tx });
// since there is a new site-info table, we want to get
that element, and ...
var rev = $$('.site-info').last();
// insert the HTML inside of this table class into the new
table
rev.update(txi);
}
});
// listen to all click events on buttons with 'remove-site-button'
class
$$('.remove-site-button').invoke('observe','click',function(eve) {
var rsb = Event.element(eve).up('table').remove();
});
My question has to do with why the event listener at the end of my
javascript file does not 'listen' to the newly generated buttons in
the new 'site-info' tables. I am guessing it is because the new tables/
buttons were generated after the dom:loaded event at the document
level?
I was looking for a dom:change event , but there does not seem to be a
feature like this in prototype. Is there a different way to listen to
any of the 'remove-site-info' buttons (newly generated or otherwise),
and enact a series of commands within the event listener?
I hope this all made sense.
Thanks.
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" 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/prototype-scriptaculous?hl=en.
