Question

使用jquery mobile添加即时消息。

所以我使用ASP.Net MVC，并在布局页面中粘贴CSS，jquery等。所以在初始加载时页面看起来很好

enter image description here

然后当日期改变时，我调用ajacx返回部分视图，这种情况发生了

enter image description here

那么解决方案是什么？

布局页面

@{
    Layout = null;

}

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" />
        <link href="~/Scripts/jquery-ui-timepicker/jquery.ui.timepicker.css" rel="stylesheet" />
        <link href="../../Content/CheckBoxToggle/style.css" rel="stylesheet" type="text/css" />
       <script src="~/Scripts/JQuery/jquery.1.9.1.min.js"></script>
        <script src="~/Scripts/JQuery/Mobile/jquerymobile-1.3.0.min.js"></script>
        <script src="~/Scripts/JQuery/UI/jqueryUI-1.10.1.min.js"></script>

    </head>
    <body>

        @RenderBody();
  </body>

</html>

查看

@model WebUI.ViewModels.ScheduleMobileDisplay
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AppHomeLayout.Iphone.cshtml";

}



@using (Html.BeginForm())
{
    <div data-role="page" id="pageAccount">
        <link href="~/Content/CSS/jquery-ui-1.10.1.custom.min.css" rel="stylesheet" />
        <script>
            $(function () {
                $("#datepicker").datepicker(
                    {
                        showButtonPanel: true,
                        dateFormat: "dd-M-yy",
                        onSelect: function (dateText, inst) {
                            var date = $(this).val();
                            UpdateSchedule(date);
                        }
                    });
            });
            function UpdateSchedule(date) {
                var baseUrl = '@Url.Action("GetMobileScheduleResults")';


                 $.ajax({
                     url: baseUrl,
                     type: 'GET',
                     data: { date: date }
                 }).done(function (response) {
                     $('#schedule').html(response);
                 });
             }
        </script>
        @RenderPage("~/Views/Shared/_MobileMenu.Iphone.cshtml")
        <div data-role="content">

            <input type="text" id="datepicker"  placeholder="Select Date" />
            <div id="schedule">
              @{ Html.RenderPartial("MobileScheduleList", Model); }
            </div>


        </div>

    </div>

}

部分视图

@model WebUI.ViewModels.ScheduleMobileDisplay
        <script src="~/Scripts/JQuery/Mobile/jquerymobile-1.3.0.min.js"></script>
<ul data-role="listview" data-divider-theme="b" data-inset="true">
                <li data-role="list-divider" role="heading">
                    @Model.AppointmentDate
                </li>
                @foreach (var item in Model.Appointments)
                {
                    <li data-theme="c">
                        <a href="/Schedule/MobileAppointmentEdit/@item.Id" data-transition="slide">
                            @item.StartTime @item.PetName
                        </a>
                    </li>
                }

            </ul>

UPDATE：//

试过这个但不起作用

$.ajax({
                     url: baseUrl,
                     type: 'GET',
                     data: { date: date },
                     success: function (response) {
                         alert('hi1');
                         $('#schedule').html(response);
                     },
                     complete:function() {
                         alert('comp');

                         $('#lst').listview('refresh');
                     },

                 });

Answer 1

在ajax OnComplete方法中，调用下面的代码来应用样式

$('#listId').listview('refresh');

Answer 2

解决方法就是这样做

success: function (response) {
   $('#schedule').html(response);
   $("#schedule ul").listview();
},

CSS未应用于ajax调用

2 个答案: