I have an ASP.Net ListBox that I'm trying to populate via jQuery, using the following snippet:
$("#MyList_btnAddAll").click(function(e) {
e.preventDefault();
$('#MyList_lstAll option').appendTo('#MyList_lstSelected');
});
The code has two ListBoxes in fact, one a "source" and the other a "destination". As you can tell above the ListBoxes are MyList_lstAll and MyList_lstSelected. These are rendered in the browser as elements, as you'd expect.
The jQuery is working great, the items are moving from one ListBox to the other, the DOM is updated but when I post my page, the postback doesn't indicate any change to the ListBox. I know there are gotchas involving jQuery and ASP.Net postbacks, but could someone guide me a bit as to what's going on possibly and how I can get this to work?
[EDIT]
By request, here's some more of the ASP.Net and HTML resulting. Below are the ListBox and button declarations in the ascx control that holds them:
<GLP:ListBox ID="lstAll" CssClass="LIST_BOX_MEDIUM" runat="server" SelectionMode="Multiple"/>
<asp:LinkButton ID="lnkAddAll2" CssClass="LIST_SELECT" runat="server" OnClick="btnAddAll_Click"/>
<GLP:ListBox ID="lstSelected" CssClass="LIST_BOX_MEDIUM" runat="server" SelectionMode="Multiple"/>
And the resulting HTML:
<select class="LIST_BOX_MEDIUM" id="MyList_lstAll" multiple="multiple" name="MyList:lstAll" size="4">
<option value="641">Item1</option><option value="598">Item2</option>
</select>
<input type="submit" class="BUTTON_SMALL_N0_IMAGE" id="MyList_btnAddAll" value="Add All" name="MyList:btnAddAll" style="color: rgb(0, 0, 0);">
<select class="LIST_BOX_MEDIUM" id="MyList_lstSelected" multiple="multiple" name="MyList:lstSelected" size="4">
<option value="642">Item3</option><option value="599">Item4</option>
</select>
I know the jQuery/ListBox item modifications aren't reflected in ViewState, but since they're in the DOM when the page is posted wouldn't they be included in the postback data and then picked up by their respective controls?