PDA

Click to See Complete Forum and Search --> : Add items to listboxes problem

edoc
09-04-2003, 06:02 PM
Hi all,

I am not a javascript savvy person (should be though) and I have this script that I spent four days working on and getting help for. It all works great BUT, there is one little error that comes up, if you do this:

Select all items in the left list, add them to the right list... so far so good, no error. Now do it again and the browser indicates a script error with that little icon in the bottom left of the browser window. No error pops up, just in the bottom left of the window.

If you don't select ALL and try to repeatedly add multiple/single item, things are perfect. Although this little error does not stop anything from functioning, why does it happen?

Here is the complete test page I am using. If any of you experts can fix this, I would be VERY gratefull:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<script>
function moveRight(){
var src = document.getElementById('left');
var target = document.getElementById('right');
moveSelectedOptions(src, target);
}

function moveLeft(){
var src = document.getElementById('right');
//var target = document.getElementById('left');
//moveSelectedOptions(src, target);
removeSelectedoption(src);
}

function moveSelectedOptions(from,to) {
for (var i=0; i<from.options.length; i++) {
for(var j=0;j<to.options.length;j++){
if((from.options[i].selected)&&(from.options[i].text == to.options[j].text) ){
//alert('The report is already selected!');
i++;
//return;
}
}
var o = from.options[i];
if (o.selected) {
to.options[to.options.length] = new Option( o.text, o.value, false, false);}

}
for (var i=(from.options.length-1); i>=0; i--)
{
var o = from.options[i];
if (o.selected) {
from.options[i] = from.options[i];}
}

//reset selections to NONE
from.selectedIndex = -1;
//to.selectedIndex = -1;
}

function removeSelectedoption(from){
for(var i=from.options.length-1;i>-1;i--){
if(from.options[i].selected){
from.options[i] = null;}
}
}
</script>


<table>
<tr>
<td>
<select id='left' size='10' multiple>
<option value='1'>value=1
<option value='2'>value=2
<option value='3'>value=3
<option value='4'>value=4
<option value='5'>value=5
<option value='6'>value=6
<option value='7'>value=7
<option value='8'>value=8
</select>
</td>
<td width='10%'>
<input type='button' onclick="moveRight('left')" value='&gt;&gt;'><br>
<input type='button' onclick="moveLeft('right')" value='&lt;&lt;'><br>
</td>
<td>
<select id='right' size='10' multiple>
</select>
</td>
</tr>
</table>
</body>
</html>
Khalid Ali
09-04-2003, 06:11 PM
Remove this part of the code

for(var j=0;j<to.options.length;j++){
if((from.options[i].selected)&&(from.options[i].text == to.options[j].text) ){
//alert('The report is already selected!');
i++;
//return;
}
}

Its setting up i=3
therefor when youselect all again the index starts from seleced.length+1 making it generate an error.
edoc
09-04-2003, 06:17 PM
Actually, right after I posted this, I managed somehow to make it add a duplicate to the right list.... :mad:

This is unbelievable, before this script, I spent like 4 days searching the web for similar functionality and/or help to do this. Came accross at least 20 people that wanted the same thing, but never got any results either. I'm starting to think that this can't be done with javascript... I dunno?

Anyway, based on the code I just provided, does anyone know of a way to get this working or have code that does similar functionality?

What I am doing is, I have actually three list boxes like this:

USER GROUPS | USERS | SELECTED USERS/GROUPS

If you click a group, the USERS listbox shows the users that belong to that group, then, you can add to the SELECTED listbox from the USERS or the GROUPS list box. After adding from either of the two left boxes, the item should not be removed. The only time an item should be deleted is if you are moving from the SELECTED listbox, but never from the GROUPS or USERS list.

Also, if you are adding multiple items to the SELECTED list, it should not add duplicates. It should check for the item in the SELECT list first, if it's there, don't add it, if it's not there, add it and move on to the next item.

Thanks for any help, it is very much appreciated,
edoc
edoc
09-04-2003, 06:21 PM
Khalid Ali;

Thanks for the reply, but now it adds duplicates.

edoc
Khalid Ali
09-04-2003, 06:38 PM
oh okkayy..Uncomment the code and
here is the condition you need to put in

var o = from.options[i];
if (i<from.options.length && o.selected) {
to.options[to.options.length] = new Option( o.text, o.value, false, false);
}
edoc
09-04-2003, 06:56 PM
You are a god send... it works PERFECTLY. I must tell you, I believe this is a very valuable piece of code because, as I said, I encountered MANY people trying to do the same thing, all the way back to Nov of last year. I even went as far as to e-mail them directly and asked "did you ever find a solution to..." and they replied "nope, we ended up presenting a different solution..."

I hope all those people still looking are lucky enough to find this thread, as I was to find this forum.

Thank you!

Here is the complete working code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<script>
function moveRight(){
var src = document.getElementById('left');
var target = document.getElementById('right');
moveSelectedOptions(src, target);
}

function moveLeft(){
var src = document.getElementById('right');
//var target = document.getElementById('left');
//moveSelectedOptions(src, target);
removeSelectedoption(src);
}

function moveSelectedOptions(from,to) {
for (var i=0; i<from.options.length; i++) {
for(var j=0;j<to.options.length;j++){
if((from.options[i].selected)&&(from.options[i].text == to.options[j].text) ){
//alert('The report is already selected!');
i++;
//return;
}
}

var o = from.options[i];
if (i<from.options.length && o.selected) {
to.options[to.options.length] = new Option( o.text, o.value, false, false);
}


}
for (var i=(from.options.length-1); i>=0; i--)
{
var o = from.options[i];
if (o.selected) {
from.options[i] = from.options[i];}
}

//reset selections to NONE
from.selectedIndex = -1;
//to.selectedIndex = -1;
}

function removeSelectedoption(from){
for(var i=from.options.length-1;i>-1;i--){
if(from.options[i].selected){
from.options[i] = null;}
}
}
</script>


<table>
<tr>
<td>
<select id='left' size='10' multiple>
<option value='1'>value=1
<option value='2'>value=2
<option value='3'>value=3
<option value='4'>value=4
<option value='5'>value=5
<option value='6'>value=6
<option value='7'>value=7
<option value='8'>value=8
</select>
</td>
<td width='10%'>
<input type='button' onclick="moveRight('left')" value='&gt;&gt;'><br>
<input type='button' onclick="moveLeft('right')" value='&lt;&lt;'><br>
</td>
<td>
<select id='right' size='10' multiple>
</select>
</td>
</tr>
</table>
</body>
</html>
Khalid Ali
09-04-2003, 07:46 PM
:D
Glad to be of help..
edoc
09-04-2003, 09:00 PM
oops... now I know I'm getting annoying and I risk being the village idiot. I lied, although that error is gone, here is what happens now:

(I just realized we're in the same province)

[list=1]
Select all items in the left from 1-8
add them to the right
now select 4,5 and 6 in the right
remove them
now select all items in the left again
add them to the right
[/list=1]

Notice the left list stays highlighted and if you add them again, it seems to add duplicates to the right. Sorry to be a pain in the *(^^%%
Khalid Ali
09-04-2003, 09:05 PM
I'll take a look later tonight,I am going off the comp for some time now,or I'll take a look in the morning..
hey you are right u r in edmonton...sweet

Khalid
Khalid Ali
09-05-2003, 01:05 AM
I took the liberty of cleaning up your code a bit( made it a bit more modular)

take a look....


<script type="text/javascript">
/*


Select all items in the left from 1-8
add them to the right listbox
now select 4,5 and 6 in the right
remove them
now select all items in the left again
add them to the right
the left items stay highlighted
add them(all items in the left) again and 7 is duplicated in the right
add them again and 8 is duplicated in the right
then the selections clear (nothing selected)
all starts working properly again
It's like there is 2 more items left in the var index somewhere. Notice the left list stays highlighted and if you add them again, it seems to add two duplicates to the right.
*/

function moveRight(){
var src = document.getElementById('left');
var target = document.getElementById('right');
moveSelectedOptions(src, target);
}


function moveLeft(){
var src = document.getElementById('right');
removeSelectedoption(src);
}

/************************************************************/

/**
@param from listbox from where data is being transferred
@param to listbox to where data is being transferred
*/
function moveSelectedOptions(from,to) {
var flen = from.length;
var farr = GetSelectedItems(from);
var tlen = to.length;
var tarr = GetSelectedItems(to)
if(farr.length>0 && tarr.length==0){//move from right to left
MoveItems(farr,to);
}
ResetAll(from);
ResetAll(to);
}

/**
@param from listbox from where data is being transferred
@param farr Selected items in the above listbox
@param to listbox to where data is being transferred
@param tarr Selected items in the above listbox
*/
function MoveItems(farr,to){
var len = farr.length;
for(var n=0;n<len;n++){
if(ValidateItems(farr[n],to)){//if true then add the value
to.options[to.length] = new Option(farr[n],farr[n]);
}
}
}

/**
@param listbox unselect any selected values in this listbox
*/
function ResetAll(listbox){
var len = listbox.length;
for(var n=0;n<len;n++){
if(listbox.options[n].selected){
listbox.options[n].selected = false;
}
}
}

/**
@param value value that needds to be verified
@param listbox listbox with which we need validate the data
@return true/false returns true if record does not exist else false
*/
function ValidateItems(value,to){
var len = to.length;
for(var n=0;n<len;n++){
if(to.options[n].text==value){
return false;
}
}
return true;
}

/**
@param value Get selected values in this listbox
@return Array Array of selected items
*/
function GetSelectedItems(listbox){
var narr = new Array();
var n=0;
var len = listbox.length;
for(var x=0;x<len;x++){
if(listbox.options[x].selected){
narr[n++] = listbox.options[x].text;
}
}
return narr;
}

/************************************************************/

function removeSelectedoption(from){
for(var i=from.options.length-1;i>-1;i--){
if(from.options[i].selected){
from.options[i] = null;
}
}
document.getElementById('left').selectedIndex = -1;
document.getElementById('right').selectedIndex = -1;
}
</script>


<table>
<tr>

<td>
<select id='left' style="width:80px;" size='13' multiple>
<option value='1'>value=1
<option value='2'>value=2
<option value='3'>value=3
<option value='4'>value=4
<option value='5'>value=5
<option value='6'>value=6
<option value='7'>value=7
<option value='8'>value=8
</select>
</td>
<td width='20%' style="text-align:center;margin:auto;">
<input type='button' onclick="moveRight('left')" value='&gt;&gt;' id='button'1 name='button'1><br>
<input type='button' onclick="moveLeft('right')" value='&lt;&lt;'><br>
</td>
<td>
<select id='right' style="width:80px;" size='13' multiple>
</select>
</td>
</tr>
</table>
edoc
09-05-2003, 01:33 AM
YOU ARE THE JAVASCRIPT MASTER

Very nice.. you have no clue how much you have helped me along... I thank you (x 1000).

I will NOT forget.


Sincerely,
edoc