I am trying to build a dynamic table with MochiKit.DOM. I have an
edit and delete link on each row (represents a record in a db). I
have both anchor elements wired up to onclick handlers with
MochiKit.signal. The trouble is, I don't know which row is having
it's edit or delete link clicked since both src() and target() are
empty for my onclick event. I imagine I am just going about this the
wrong way. Can anyone offer me some advice on how to accomplish this
elegantly with MochiKit? I am using 1.3 release, but could easily
upgrade to SVN checkout if necessary. My code is below. Thanks.
<html>
<head>
<title>Table Test</title>
<script type="text/javascript"
src="mochikit/MochiKit.js"></script>
<script type="text/javascript">
var rowdata = [
["dataA1", "dataA2", "dataA3"],
["dataB1", "dataB2", "dataB3"]
];
row_display = function (row) {
var newRow = TR(null, TD('Action'),
map(partial(TD, null), row));
logDebug("Loading data row");
return newRow;
}
add_row = function() {
var addRow = row_data_display(["", "", ""]);
appendChildNodes(newTable, addRow);
logDebug("Creating new row");
};
edit_row = function(e) {
logDebug(e);
}
delete_row = function(e) {
logDebug("Delete");
}
row_data_display = function (row) {
var editLink = A({'class': 'link'}, 'Edit');
connect(editLink, 'onclick', edit_row);
var deleteLink = A({'class': 'link'}, 'Delete');
connect(deleteLink, 'onclick', delete_row);
var linkCell = TD(null, editLink, deleteLink);
var newCells = map(partial(TD, null), row);
var newRow = TR(null, linkCell, newCells);
return newRow;
}
var newTable = TABLE(null,
THEAD(null,
row_display(["head1", "head2", "head3"])),
TBODY(null,
map(row_data_display, rowdata)));
initPage = function() {
logDebug("Starting page load event");
appendChildNodes(currentDocument().body,
newTable);
//add event handler for 'Add a Row' link
connect('addLink', 'onclick', add_row);
//create a logging page for debugging
createLoggingPane(true);
logDebug("End page load event");
}
//set initPage to run when page is loaded
addLoadEvent(initPage);
</script>
<style type="text/css">
.link {
color: #000;
text-decoration: underline;
cursor: pointer;
}
a {
padding-right: 5px;
}
</style>
</head>
<body>
<a id="addLink" class="link">Add a Row</a>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"MochiKit" 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/mochikit?hl=en
-~----------~----~----~----~------~----~------~--~---
