Raty stars rating disappears on refresh with jquery mobile MVC

Question

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.

With the code you posted, what are your expectations? Do you expect the page to continue to show the number of stars that you originally selected? Are you persisting your star selection somewhere so when you refresh it redisplays? — Matthew at Critical Cognition, May 19 '14 at 00:27
Hi, thanks. Yes, I would like to show the stars after the refresh of the page. If the previous selection would be there, that would be nice, but for now the most important would be to show them because they disapear. — Patrick, May 19 '14 at 06:52

score 1 · Answer 1 · answered May 19 '14 at 08:40

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.

Raty stars rating disappears on refresh with jquery mobile MVC

1 Answers1