Why does the underscore in my image id show up as "[]="?

I'm creating HTML (<img> tags) on the fly. For the ID, property of the img I'm using an underscore: "_" in the name. I'm using some jQuery code to allow the user to shuffle the images around on the page once they have been created. Once the user shuffles the images, the order of the images is written into a data array, and displayed underneath the images for testing/later processing. For some reason the underscore is getting converted to: "[]=", and I don't know why. Is there a way that I can prevent this and get the underscore to show up? When I use a browser debugger to hover over the image, the name is correctly built, but the jQuery is inserting: "[]=" in place of "_".

jQuery & HTML
        $(document).ready(function () {
            $("#sortable").sortable({
                // code to run when the order is updated
                update: function (event, ui) {
                    // get the order of the items in the list
                    var data = $(this).sortable('serialize');
                    // pass the data back to your server for processing
                    $('#data').html(data);
                    });
                }
            });

            $(function () {
                // this initializes the dialog (and uses some common options that I do)
                $("#dialog").dialog({ autoOpen: false, modal: true, show: "blind", hide: "blind" });

                // next add the onclick handler
                $("#contactUs").click(function () {
                    $("#dialog").dialog("open");
                    return false;
                });
            });
        });    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div runat="server" id="sortable"> </div>
    <div runat="server" id="data"> </div>

Open in new window


C#
        private string[] filePaths;
        int intFileCount = 0;
        string strMyDivHTML = "";
        string VIN6 = "987654_0000";
        string strimageID = "";

        protected void Page_Load(object sender, EventArgs e)
        {
            filePaths = Directory.GetFiles(@"C:\Teamwork\TruckInspectionWEB\InspectionImagesNew\4V4NCNCTEST987654\");

            if (filePaths.Length != 0)
            {
                foreach (string filename in filePaths)
                {
                    if (!filename.Contains("Thumbs.db"))
                        ConvertToThumbnail(filename, filename, 120);
                }

                foreach (string filename in filePaths)
                {
                    if (!filename.Contains("Thumbs.db"))
                    {

                        strimageID = VIN6 + intFileCount.ToString();
                        strMyDivHTML = strMyDivHTML + "<img id =\"InspectionImagesNew/4V4NCNCTEST987654/" + strimageID + "\" src=\"InspectionImagesNew/4V4NCNCTEST987654/" +
                            filename.ToString().Substring(69, filename.ToString().Length - 69) +
                            "\" alt=\"" + filename.ToString().Substring(69, 5) + "\" />";

                        intFileCount += 1;
                    }
                }
            }
            sortable.InnerHtml = strMyDivHTML;
        }

Open in new window


underscore converted
LVL 1
Michael SterlingWeb Applications DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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 may look strange but that is just how serialize makes it possible to store the order of the images in a database.

From that page:
It works by default by looking at the id of each item in the format "setname_number", and it spits out a hash like "setname[]=number&setname[]=number".

The square bracket notation means the fixed part of the image IDs is used as an array name in the query string which you should pass to a page (ajax call for example) and be able to read them there (in that order) where the contents of each array element (after the equals sign) denotes which image is on that position by the unique part of the id which should then of course have some meaning in your database (like an actual record id).

If you just want to see the image IDs use toArray:
                    var data = $(this).sortable('toArray');
                    // pass the data back to your server for processing
                    $('#data').html(data.join("<br/>"));

Open in new window


By the way, if it's not absolutely necessary I would advise to make your IDs a bit simpler, I'm not sure but the long name and special characters (/) could cause trouble in the long run.
0

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
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Robert Schutt: This worked for showing the actual IDs. How do I get this string array back to the server for processing? How do I "get my hands on this data"?
0
Robert SchuttSoftware EngineerCommented:
You can post it back to the server to the same or a different page using either AJAX (an asynchronous call) or put the data in a (hidden) field and add a submit button to your current page.

Here's an AJAX example, put this in your update function:
                    $.post('SaveOrder.aspx', {'filenames': data.join("|")}, function (data) {
                        alert(data);
                    });

Open in new window

assuming you still have this code in there:
var data = $(this).sortable('toArray');

Open in new window


Now make a new page SaveOrder.aspx and put this in the Load function (in the code-behind):
        protected void Page_Load(object sender, EventArgs e) {
            Response.Clear();
            Response.Write("filenames received: " + Request.Form["filenames"].ToString());
            Response.End();
        }

Open in new window

Now you can use the filenames variable (a list of the IDs, or any property of the images you want to send back, in the correct order, delimited by pipe symbols) in that page to do whatever you want on the server, like update a database.
capture
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
Thank you! I was also able to post the data to a text box like:

('#myTextBox').val(data)

I like the SaveOrder.aspx page example too and may use that for other purposes. Thanks again!
0
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
jQuery

From novice to tech pro — start learning today.