On Dec 1, 2005, at 7:49 PM, dbdweeb wrote:
I'm trying to coordinate the dynamic contents of a one select input
based on the value of another. 'userselect' populates on page load and
'tblselect' populates fine the first time a userselect item is
selected
but it doesn't get refreshed with subsequent selects. Why not? Here's
the code:
You forgot to set the id on the new SELECT nodes. After it's swapped
out the first time, there's no longer any nodes in the document with
an id of "tblselect".
Below is a slight refactoring that works. Additionally, it replaces
the select nodes with invisible divs so that it's obvious when
something is loading, doesn't depend on any server, and uses
MochiKit.Logging for debugging/error reporting.
-bob
<html><head>
<script src="../MochiKit/MochiKit.js" type="text/javascript"></script>
<script type="text/javascript">
function opt_display(row) {
return OPTION({"value": row[0]}, row[1]);
};
function showSelectData(result) {
var mydata = concat([[-1, '--']], result["data"]);
logDebug(repr(mydata));
var html_select = SELECT(
{"id": "userselect", "onchange": "popTables(this.value);"},
map(opt_display, mydata)
);
swapDOM("userselect", html_select);
};
function showSelectData2(result) {
var mydata = concat([[-1, '--']], result["data"]);
logDebug(repr(mydata));
var html_select = SELECT({"id": "tblselect"}, map(opt_display,
mydata));
swapDOM("tblselect", html_select);
};
function showError(e) {
logError(map(function (kv) {
return "\n " + kv.join(": ");
}, sorted(items(e))).join(""));
logger.debuggingBookmarklet();
}
function popTables(ownerName) {
var url = "./" + ownerName
//var d = loadJSONDoc(url);
swapDOM("tblselect", DIV({"id": "tblselect"}));
var d = wait(0.5, {data: [[ownerName, ownerName], ["baz",
"wibble"]]});
d.addCallback(showSelectData2);
d.addErrback(showError);
};
addLoadEvent(function () {
//var d = loadJSONDoc("./getUsers");
var d = wait(0.5, {data: [["getUsers", "getUsers"], ["foo",
"bar"]]});
d.addCallback(showSelectData);
d.addErrback(showError);
});
</script>
</head>
<body>
<div id="userselect"></div>
<div id="tblselect"></div>
</body></html>
