Question

Hi I’m trying to utilize more java-script, jquery, ajax in my asp code. So for a project I built this field chooser using java-script.

 <asp:ListBox ID="lb1" runat="server" Height="400px" Width="170px"></asp:ListBox>

 <input type="button" id="_b_Add" value="Add >" onclick="add();" style="padding:5px; margin-left:5px; margin-top:15px; width: 131px;" />

 <input type="button" id="_b_Rem" value="< Remove" onclick="remove();" style="padding:5px; margin-top: -25px; margin-left:5px; width: 131px;" />

 <input type="button" value="Up" onclick="moveUp(document.getElementById('lb2'));" style="padding:5px; margin-left:5px; width: 131px;" />

 <input type="button" value="Down" onclick="moveDown();" style="padding:5px; margin-left:5px; margin-top: -25px; width: 131px;" />

 <asp:Button ID="_b_Reset" runat="server" Text="Reset" Width="131px" 
                    style="padding:5px; margin-left:5px; margin-top:40px;" 
                    onclick="_b_Reset_Click"  />

 <asp:Button ID="_b_Run" runat="server" Text="Run" Width="131px" 
                    style="padding:5px; margin-left:5px; margin-top:10px;" 
                    onclick="_b_Run_Click"  />

 <asp:ListBox ID="lb2" runat="server" Height="400px" Width="170px"                       AppendDataBoundItems="True" Enabled="False"></asp:ListBox>

and here is the important javascript:

            function prom() { { $.prompt('Maximum Number of Custom Types is 14 '); } }

        function add() {
            var opt = document.createElement("option");
            var sel = document.getElementById("lb1").selectedIndex;

            if ((document.getElementById("lb1").selectedIndex) != -1 && document.getElementById("lb2").length < 14) {
                document.getElementById("lb2").options.add(opt);
                opt.text = (document.getElementById("lb1").options[document.getElementById("lb1").selectedIndex].text);
                opt.value = (document.getElementById("lb1").value);

                document.getElementById("lb1").options.remove((document.getElementById("lb1").selectedIndex));
                document.getElementById("lb1").options.SelectedIndex = sel;

            }
            else {
                prom();
            }
        }
        function remove() {
            var opt = document.createElement("option");
            var sel = document.getElementById("lb2").selectedIndex;

            if ((document.getElementById("lb2").selectedIndex) != -1) {
                document.getElementById("lb1").options.add(opt);
                opt.text = (document.getElementById("lb2").options[document.getElementById("lb2").selectedIndex].text);
                opt.value = (document.getElementById("lb2").value);
            }

            document.getElementById("lb2").options.remove((document.getElementById("lb2").selectedIndex));
            document.getElementById("lb2").options.selectedIndex = sel;
        }

EDIT ***

Testing the values in lb2

    foreach (var item in lb2.Items.Cast<ListItem>()) 
    {
        TextBox1.Text += (item.Value).ToString();
        i++;
    }

This works fine on the lb1 not but when the item have been added client side its no good.

Basically now on run the values of lb2 should be iterated and fed into my report class. However I quickly realized that the changes made by the java script to lb2 are not reflected in the viewstate when the “_b_Run_Click” event is fired. So after digging around a bit I seem to get the impression that the solution is to use a hidden field … My question is (being a js noob) how exactly do you do that and is there an more elegant alternative ?

Thanks

Answer 1

Latest answer

I believe your problem is because Disabled controls are not submitted in the form post. Remove Enabled="False" from lb2 and try again.

You can prevent users from clicking on that control by onclick/onfocus and setting focus to another control. Or using a hidden box to store the values and a div to display the values.

Older answer attempt below

Are you binding in the Page_Load without if (!IsPostBack)?

This will override any values in the listbox before the button event reads them

public void Page_Load
{
    lb2.DataSource = ...
    lb2.DataBind();
}

If that is the problem, this will fix it.

public void Page_Load
{
    if (!IsPostBack)
    {
        lb2.DataSource = ...
        lb2.DataBind();
    }
}