jQuery not calling the webservice_问答_开发者_运维开发者技术经验分享

I am new to programming especially jQuery and webservices. I want to pass the values to the to database via the webservice.

Below is the code for the .aspx page:

     <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"
        type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/i18n/jquery-ui-i18n.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#sortable").sortable();
            $("#sortable").disableSelection();
            $("#sortable input[type=text]").width($("#sortable img").width() - 10);
            $("#sortable label").mouseover(function () {
                $(this).parent().children("input[type=text]").show().val($(this).html());
                $(this).hide();
            });
            $("#sortable input[type=text]").mouseout(function () {
                $(this).parent().children("label").show().html($(this).val());
                $(this).hide();
            });
            $(".ContainerDiv").hover(
                function () {
                    $(this).find(".deleteClass").show();
                },
                function () {
   开发者_运维技巧                 $(this).find(".deleteClass").hide();
                });
            $(".deleteClass").click(function () {
                $(this).closest("li").remove();
            });
            $("#orderPhoto").click(function () {
                var photos = $.map($("li.ui-state-default"), function (item, index) {
                    var imgDetail = new Object();
                    imgDetail.Id = $(item).find("img").attr("id");
                    imgDetail.Caption = $(item).find("label").html();
                    imgDetail.Order = index + 1;
                    return imgDetail;
                });
                //photos contains all the photo and order and the chhanged caption.


                //pass to server
                $.ajax({
                    type: "POST",
                    url: "WebService.asmx/updateOrder",
                    data: JSON.stringify(photos),
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        if (data.d === "saved") {
                            $("<p>").text("New order saved!")
                .addClass("success").appendTo("#left");
                        } else {
                            $("<p>").text("Save failed")
                .addClass("failure").appendTo("#left");
                        }
                    }
                });
            });
        });
    </script>
    <style type="text/css">
        #sortable
        {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #sortable li
        {
            position: relative;
            margin: 3px 3px 3px 0;
            padding: 1px;
            float: left;
            text-align: left;
        }
        .deleteClass
        {
            /* PhotoListItem  is relative so relative to it */
            position: absolute;
            top: 1px;
            right: 3px;
            background: black;
            color: Red;
            font-weight: bold;
            font-size: 12px;
            padding: 5px;
            opacity: 0.60;
            filter: alpha(opacity="60");
            margin-top: 3px;
            display: none;
            cursor: pointer;
        }
        .deleteClass:hover
        {
            opacity: 0.90;
            filter: alpha(opacity="90");
        }
        .image_resize {
width: 250px;
height: 250px;
border: 0;
} 
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ListView ID="ListView1" runat="server" GroupItemCount="15">
        <LayoutTemplate>
            <ul id="sortable">
                <li id="groupPlaceholder" runat="server">1</li>
            </ul>
        </LayoutTemplate>
        <GroupTemplate>
            <tr id="itemPlaceholderContainer" runat="server">
                <td id="itemPlaceholder" runat="server">
                </td>
            </tr>
        </GroupTemplate>
        <ItemTemplate>
            <li class="ui-state-default">
                <div class="ContainerDiv">
                    <div class="deleteClass">X</div>
                    <img id='<%#Eval("photo_id")%>' src='<%# "uploads/"+Eval("photo_file_name")%>' alt="" class="image_resize" />
                    <div style="height: 25px; margin-top: 3px">
                        <label>
                            <%# Eval("photo_title")%></label>
                        <input type="text" style="display: none" />
                    </div>
                </div>
            </li>
        </ItemTemplate>
    </asp:ListView>
    <input type="button" id="orderPhoto" value="Save change" />
    </form>
</body>
</html>

I used the debugging tool and can confirm that the photos contains the correct values. Its just calling the webservice part that I am unsure about.

Any help would be greatly appreciated.

Thanks

Don't serialise the data that you send into the method, it does that by itself: