Raty stars rating disappears on refresh with jquery mobile.
The Code:
Layout:
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" style="height:12px"></div>
<div class="ui-content" role="main">@RenderBody()</div>
<div data-role="footer" data-position="fixed" style="text-align:center;"></div>
</div>
</body>
The votation page:
@{
Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
}
<script>
$('#star').raty({
number: 5,
path: '/Images',
size: 24,
width: 150,
click: function (score)
{
$("#Valor").val(score);
}
});
</script>
@using (Html.BeginForm("AvaliarOrador", "Mobile", FormMethod.Post, new { @id = "frmAvaliarOrador" }))
{
<input type="hidden" id="Valor" name="Valor" />
<div id="star" style="padding-top: 20px; padding-bottom: 10px; margin-left: auto; margin-right: auto; cursor: pointer; width: 170px"></div>
}
If I refresh the page, the stars disappears and I have to go back to the homepage again, refresh it and start again.
From what I can see this is not an ASP.NET problem, in all likelihood it is a jQuery Mobile problem.
To understand this problem you need to understand how jQuery Mobile handles pages and JavaScript. It uses AJAX for page loading into the DOM.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM. That content will stay there (unless page is refreshed) to await further content loading. When second page is loaded, only its BODY content is loaded into the DOM, and when I say its BODY content I mean DIV with an attribute data-role=”page” and its inner content.
This may not sound as something problematic but you should think twice. What if we have several HTML pages and every and each page has something unique, lets say different JavaScript intended to be used only during that page execution, not to mention additional CSS files. Everything found in a HEAD of those files are going to be discarded and its JavaScript is not going to be executed. Same thing is also relates when page is refreshed.
Read more about it here + solutions.