problems displaying Javascript message within <p>_问答_开发者

I using jQuery-UI sortable which works fine. The problem that I am having is that the message "New order saved!" or "Save failed" is not displaying in the < p > area. The function is either not executing or something.

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="jQuery/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="jQuery/jquery.min.js" type="text/javascript"></script>
    <script src="jQuery/jquery-ui.min.js" type="text/javascript"></script>
    <script src="jQuery/json2.js" type="text/javascript"></script>
    <script src="jQuery/jquery-ui-i18n.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#sortable").sortable({ placeholder: "vacant" });
            $("#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;
                });
                var jsonPhotos = JSON.stringify(photos);
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    data: "{photos:" + jsonPhotos + "}",
                    url: "WebService.asmx/updatePhoto",
                    dataType: "json",
                    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");
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        debugger;
                    }
                });
            });
        });
    </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;
        }
        #sortable .vacant
        {
            border: 3px dotted #66d164;
            width: 150px;
            height: 175px;
            background-color: #fff;
        }
        #outerWrap
        {
            width: 1004px;
            margin: auto;
            position: relative;
            background-color: #eee;
            border: 1px solid #999;
        }
        #outerWrap:after
        {
            content: ".";
            display: block;
            visibility: hidden;
            clear: both;
        }
        #left
        {
            width: 218px;
            float: left;
        }
        #images
        {
            margin: 0;
            padding: 0;
            float: left;
            width: 786px;
        }
        h1
        {
            font: italic normal 24px Georgia, Serif;
            text-align: center;
            margin: 10px 0;
        }
        p
        {
            margin: 0;
            font: 12px Arial, Sans-serif;
            padding: 0 10px;
        }
        .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: 150px;
            height: 150px;
            border: 0;
        }
        .success, .failure
        {
            margin: 0 0 0 10px;
            padding: 4px 0 4px 26px;
            position: absolute;
            bottom: 18px;
            font-weight: bold;
        }
        .success
        {
            background: url('../img/tick.png') no-repeat 0 1px;
            color: #12751c;
        }
        .failure
        {
            background: url('../img/cross.png') no-repeat 0 0;
            color: #861b16;
        }
    </style>
</head>
<body>
    <form id="form2" runat="server">
    <div id="outerWrap">
        <div id="left">
            <h1>
                Image Organiser</h1>
            <p>
                Re-order the images by dragging an image to a new location. Your changes will be
                saved automatically.</p>
        </div>
        <div id="images">
            <asp:ListView ID="ListViewAlbumPhotoView" 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" />
        </div>
    </div>
    </form>
</body>
</html>

The problem is with

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");
                            }
                        },

Could someone tell me how to message display in the < p > area?

Any help would be greatly appreciated.

Thanks

Be sure to add the closing tag as well:

$("<p></p>").text("Save failed").addClass("failure").appendTo("#left");

Update: Also make sure the success function is even being called--Use a tool like Firebug (Firefox) or Developer tools in Chrome or Safari to inspect net traffic to see what the result of your call is.

You don't use brackets around the p inside the jquery function

try $('p')

Are you trying to update the single paragraph element already there? Or do you want to insert a new paragraph element every single time. If you want the second case, just combine everything at once.

if (data.d === "saved") {
    $("<p class='success'>New order saved!</p>").appendTo("#left");
}
else {
    $("<p class='failure'>Save failed!</p>").appendTo("#left");
}