Getting list items from connected sortable list
Hello group,
I'm having problems using javascript to get the list items from a
second connected sortable list.
At page load, my first list is populated and I can fetch the list
items as expected, but when trying to
get the list items from the second connected list I am not able to do
so.
My javascript code is as follows:
$("#checkValuesButton").click(function() {
var sSelected;
for(var no=0; no<"#selectedOptions".length; no++){
if (sSelected == null) {
sSelected = selectedOptionsItem[no].innerHTML;
} else {
sSelected = sSelected + ', ' + selectedOptionsItem[no].innerHTML;
}
}
alert(sSelected);
});
My PHP code is as follows:
// First list
echo '<div id=options><fieldset><legend>Available Options</legend>';
echo "<form method='post' action='checkValues.php'>";
echo '<ul id=availableOptions name=availableOptions
class=connectedSortable>';
$resultSet = db2_fetch_assoc($stmt1);
$availableOptions = array();
do {
echo '<li id=availableOptionsItem class=ui-state-default>'.$resultSet
["OPTION"].' - '.trim($resultSet["OPTD"]).'</li>';
$availableOptions[] = $resultSet["OPTION"];
$_SESSION['availableOptions'] = $availableOptions;
} while ($resultSet = db2_fetch_assoc($stmt1));
echo '</ul></fieldset>';
echo '<button id=selectAllOptionsButton class=buttons>Select All >></
button>';
echo '<button id=removeAllOptionsButton class=buttons><< Remove All</
button>';
echo '<button id=checkValuesButton class=buttons>Check Values</
button>';
// Second list
echo '<fieldset><legend>Selected Options</legend>';
echo '<ul id=selectedOptions name=selectedOptions
class=connectedSortable>';
echo '<li id=selectedOptionsItem class=ui-state-default>test</li>';
echo '</ul></fieldset>';
echo '</form></div>';
When the OnClick event is triggered, I am getting a javascript error
as follows:
Error: 'selectedOptionsItem[no].innerHTML' is null or not an object.
If I change my code to use the first connected list and its items, it
runs as expected.
Does anyone have any pointers?