Databases
StackOverflow2013
Postsdbo
POCSS not being applied to ajax call
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS not being applied to ajax call
    text
    copied!<p>To add im using jquery mobile.</p> <p>So Im using ASP.Net MVC, and sticking the CSS, jquery etc in the the layout page. So on initial load the page looks fine</p> <p><img src="https://i.stack.imgur.com/f0p7F.png" alt="enter image description here"></p> <p>Then when the date changes I call the ajacx to return a partial view this happens</p> <p><img src="https://i.stack.imgur.com/CQ0f8.png" alt="enter image description here"></p> <p><strong>So whats the solution?</strong></p> <p>Layout Page</p> <pre><code>@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" &gt; &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" /&gt; &lt;link href="~/Scripts/jquery-ui-timepicker/jquery.ui.timepicker.css" rel="stylesheet" /&gt; &lt;link href="../../Content/CheckBoxToggle/style.css" rel="stylesheet" type="text/css" /&gt; &lt;script src="~/Scripts/JQuery/jquery.1.9.1.min.js"&gt;&lt;/script&gt; &lt;script src="~/Scripts/JQuery/Mobile/jquerymobile-1.3.0.min.js"&gt;&lt;/script&gt; &lt;script src="~/Scripts/JQuery/UI/jqueryUI-1.10.1.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; @RenderBody(); &lt;/body&gt; &lt;/html&gt; </code></pre> <p>View</p> <pre><code>@model WebUI.ViewModels.ScheduleMobileDisplay @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_AppHomeLayout.Iphone.cshtml"; } @using (Html.BeginForm()) { &lt;div data-role="page" id="pageAccount"&gt; &lt;link href="~/Content/CSS/jquery-ui-1.10.1.custom.min.css" rel="stylesheet" /&gt; &lt;script&gt; $(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); }); } &lt;/script&gt; @RenderPage("~/Views/Shared/_MobileMenu.Iphone.cshtml") &lt;div data-role="content"&gt; &lt;input type="text" id="datepicker" placeholder="Select Date" /&gt; &lt;div id="schedule"&gt; @{ Html.RenderPartial("MobileScheduleList", Model); } &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; } </code></pre> <p>Partial View</p> <pre><code>@model WebUI.ViewModels.ScheduleMobileDisplay &lt;script src="~/Scripts/JQuery/Mobile/jquerymobile-1.3.0.min.js"&gt;&lt;/script&gt; &lt;ul data-role="listview" data-divider-theme="b" data-inset="true"&gt; &lt;li data-role="list-divider" role="heading"&gt; @Model.AppointmentDate &lt;/li&gt; @foreach (var item in Model.Appointments) { &lt;li data-theme="c"&gt; &lt;a href="/Schedule/MobileAppointmentEdit/@item.Id" data-transition="slide"&gt; @item.StartTime @item.PetName &lt;/a&gt; &lt;/li&gt; } &lt;/ul&gt; </code></pre> <p>UPDATE://</p> <p>Tried this but does not work</p> <pre><code>$.ajax({ url: baseUrl, type: 'GET', data: { date: date }, success: function (response) { alert('hi1'); $('#schedule').html(response); }, complete:function() { alert('comp'); $('#lst').listview('refresh'); }, }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload