Getting and setting values between code behind and JavaScript

Hello experts,
I'm trying to create a sortable list that the client can edit and rearrange for content management on their Web site. The application is running on .NET 3.5, with VB and the content is nested within a masterpage.

I'm using JQuery sortable to let the user edit a TextBox within an unordered list to determine the order of the items.

It's my intention to populate the textboxes and HiddenFields with data from the database (which is working) and then use the sortable JQuery to update the values of the hidden fields in the proper order (Client Side), which I can then save to the database by accessing the HiddenField values (server side).

I'm able to get the sortable list to return the data in the order I want if I use an alert box to show me what's happening but either I'm not updating the HiddenField values or the server doesn't know what's happening Client side.

Anyway here's my code...


<asp:HiddenField ID="HiddenField1" Value="" runat="server" />
<asp:HiddenField ID="HiddenField2" Value="" runat="server" />
<asp:HiddenField ID="HiddenField3" Value="" runat="server" />
<asp:HiddenField ID="HiddenField4" Value="" runat="server" />
<asp:HiddenField ID="HiddenField5" Value="" runat="server" />

<ul class="sortable" runat="server" id="ULSortlist">
    <li class="ui-state-default" id="liFact1" runat="server"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        <asp:TextBox ID="txtFact1" runat="server" MaxLength="500" />
    <li class="ui-state-default" id="liFact2" runat="server"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        <asp:TextBox ID="txtFact2" runat="server" MaxLength="500" />
    <li class="ui-state-default" id="liFact3" runat="server"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        <asp:TextBox ID="txtFact3" runat="server" MaxLength="500" />
    <li class="ui-state-default" id="liFact4" runat="server"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        <asp:TextBox ID="txtFact4" runat="server" MaxLength="500" />
    <li class="ui-state-default" id="liFact5" runat="server"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        <asp:TextBox ID="txtFact5" runat="server" MaxLength="500" />

Open in new window

//initialize the sortable list
$(function () {

$(function () {
    //declare a counter and a variable to hold elements
    var i = 1;
    var HiddenField;
    //on sortable list change do the following....
        connectWith: ".connectedSortable",
        update: function () {
            //iterate through the textboxes and place their values in the correct hidden field
            $(".sortable").find("input").each(function () {
                HiddenField = document.getElementById("ctl00_ContentPlaceHolder1_HiddenField" + i);
                HiddenField.value = $(this).val();
            i = 1;

Open in new window

note: uncomment the alert to see it return the proper order

CSS & Scripts for easy copy/paste/test
<link rel="stylesheet" href="" />
      <script src=""></script>
      <script src=""></script>

    <style type="text/css">
        .sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
        .sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; line-height:18px; vertical-align:middle;}
        .sortable li span { position: absolute; margin-left: -1.3em; }
        li input
            width: 100%;

Open in new window

Also note that this is nested in a MasterPage when making ID suggestions. I feel like I've been able to get the server to recognize a hidden field updated with JavaScript before but I don't remember how I did it and that code has been overwritten since then so I can't reference it. Right now I'm referencing the HiddenFields with:

 objCmd.Parameters.AddWithValue("@Fact1", HiddenField1.Value.Trim)
        objCmd.Parameters.AddWithValue("@Fact2", HiddenField2.Value.Trim)
        objCmd.Parameters.AddWithValue("@Fact3", HiddenField3.Value.Trim)
        objCmd.Parameters.AddWithValue("@Fact4", HiddenField4.Value.Trim)
        objCmd.Parameters.AddWithValue("@Fact5", HiddenField5.Value.Trim)

Open in new window

But it seems like I would need to post this data to the server somehow.

Thanks in advance for the help!
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robert SchuttSoftware EngineerCommented:
it seems like I would need to post this data to the server somehow
yes, you would. Do you want to update this each time the user does something or would it be acceptable to just add a button to the form?

If you want to update each time it would seem more useful to use an AJAX post to a new page, outside of the normal website-flow so to speak, with the sole purpose of updating these fields in the database.

When I add a button to post the changes "on demand", it seems to work without problems:

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Robert SchuttSoftware EngineerCommented:
Actually there seems to be an easier way: at the end of your update function (after line 23 in your posted javascript code above) add this:

Open in new window

then in your code behind, change the Page_Load:
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Me.IsPostBack Then
            ' update your database here
            ' ...
            'objCmd.Parameters.AddWithValue("@Fact1", HiddenField1.Value.Trim)
            'objCmd.Parameters.AddWithValue("@Fact2", HiddenField2.Value.Trim)
            'objCmd.Parameters.AddWithValue("@Fact3", HiddenField3.Value.Trim)
            'objCmd.Parameters.AddWithValue("@Fact4", HiddenField4.Value.Trim)
            'objCmd.Parameters.AddWithValue("@Fact5", HiddenField5.Value.Trim)

            ' put the texts back in the page in the right order
            txtFact1.Text = HiddenField1.Value.Trim
            txtFact2.Text = HiddenField2.Value.Trim
            txtFact3.Text = HiddenField3.Value.Trim
            txtFact4.Text = HiddenField4.Value.Trim
            txtFact5.Text = HiddenField5.Value.Trim
        End If
    End Sub

Open in new window

PaulconsultingAuthor Commented:
Thanks for the help Robert,

I found the problem. I didn't understand that all of the page_load code runs when you submit a form and was repopulating my data before it had a chance to save (Hence the confusion about how does the server know what I'm putting in the Hidden Fields client-side). I placed the getData() routine inside the --If Page.IsPostBack = False Then-- condition and now it works like a charm.

The more you know...

Thanks again for the assist! I appreciate your expert-ness!
PaulconsultingAuthor Commented:
Problem was unrelated to the code I submitted. Hopefully this answer will help someone else who gets stuck with a similar problem.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Visual Basic.NET

From novice to tech pro — start learning today.