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?
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.