updata listbox in code behind

maricar · February 22nd, 2009, 11:32 PM

I have a server control listbox and Button. When i click on button6 i want to add item in listbox3 thru client script. Problem is i also want to
add item to that listbox in code behind from an ongoing thread.... I've researched and learned that i need to use a hidden field so i can update
the listbox in my client script..i tried it but so difficult is there an easy way to work this problem out... Thanks

Code Behind

protected void Page_Load(object sender, EventArgs e)
{

Button6.Attributes.Add("onclick", "AddItem();return false;");
......
.......
}

private void OnMessage(object sender, jabber.protocol.client.Message msg)
{
ListBox3.Items.Add(msg);
}

---javascript----
function AddItem()
{
var opt=document.createElement("option");
var msg=document.getElementById('TextBox3');
var labname=document.getElementById('Label1');

document.getElementById("ListBox3").options.add(op t);
opt.text=labname.innerText+": "+msg.value;
opt.value=msg.value;
}

....
......

<asp:Button ID="Button6" runat="server" BackColor="Gray" ForeColor="#CCCCCC" Text="Send" Width="60px" />
<asp:ListBox ID="ListBox3" runat="server" BackColor="#EAEAEA" Height="180px"
style="margin-top: 0px" Width="251px" AutoPostBack="True">

dparsons · February 23rd, 2009, 08:29 PM

You were on the right track with the bit of JavaScript you had. To add items to a listbox through a clientside script you would do something like:

javascript Code:

function addNewOption()
{
  var labelText = document.getElementById('Label1').innerText'
  var msg= document.getElementById('TextBox3').value;
 
  var optionText = labelText + ' ' + msg;  
  var optionValue = msg;

  var objOption = new Option(optionText, optionValue)
  var listObject = document.getElementById('ListBox1');
  var itemPosition = listObject.length;
 
  listObject.options[itemPosition] = objOption;
  return false;
}

Now there are a few problems with this code. First off you are referencing your Server controls with the value that you are supplying for the ID property. The problem here is that your controls may not be named this on the clientside when they are ultimately emitted and sent to the browser. For example, a textbox in a user control may actually wind up with an ID of: UserControl_TextBox1! To circumvent this problem you should get used to using syntax such as:

var listObject = document.getElementById('<%=ListBox1.ClientID%>');

This will ensure that the proper ID is passed in to your javascript.

Next, since you made the comment about a hidden field, you probably already know that items that are added to the select list in this manner are not accessible in your code behind since they do not exist in viewstate (although you SHOULD be able to access the values that were selected via the POST through a call to Request.Form["Key"]). In any event, if you want to append the values to a hidden field you would use a javascript similar to the following:

javascript Code:

function selectOnChange()
{
    var textBox = document.getElementById('textHide');
    var listObject = document.getElementById('test');
    textBox.value = '';
 for(i=0; i <= listObject.options.length - 1; i++)
 {
  if(listObject.options[i].selected)
   textBox.value = textBox.value + listObject.options[i].value + ', ' ;
 }
}

**Notes
-I tested all code in IE 7.0 without a problem.
-Becareful with the <% %> script blocks inside of your javascripts. This can cause errors to be thrown in the manner of 'Can not change the control collection because the code contains <% %>'. By and large I see this error when there is an AJAX framework at play and various user controls on a page.

hth.
-Doug