Browser “back” issue on jQuery Mobile and ASP.net MVC

Question

I started working with JqueryMobile a little time ago and I'm trying to adapt my website for mobile devices.

I'm using ASP.NET Mvc and the structure of my page is this:

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jquerymobile")
    @Scripts.Render("~/bundles/jqueryflexslider")
</head>

<body>
    <div data-role="page" data-theme="a">
        @RenderBody()
    </div>
</body>
</html>

The thing is that inside my layout page I have a partial view with a simple jquery function that animate my menu, slideup/down on click. When I reaload the page it works fine, but when i hit the back button it simple doesn't work anymore, but if i hit refresh again voialaaa, it's works.

I read the jquery mobile documentation about "Scripts & styles in the head" and it says that

..The default behavior of the navigation system is to use that link's href to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that href with full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the contents of the response's body element (or more specifically the data-role="page" element, if it's provided)

My question is how do i reload the content and get my scripts working (presuming that the problem is the reload thing) if not, someone could point me a direction or what is the best structure for this case?

Tell me where is your javascript placed? Inside a BODY or HEAD? This is an important question. — Gajotres
hi @Gajotres, thank you for the reply. The script is inside my partial view _menuTop. — Carol

Carol Carol · Accepted Answer · 2013-07-02T19:30:51

I finally got it working!

My problem was that everytime I navigate from page to page, my <div id="page" data-role="page"> was duplicated. Since I got two pages on DOM and two IDS of the same menu, the click simple didn't work anymore. Once I add the data-ajax='false' on the links who were responsible for redirect me for another page, my page reloaded as usual and finally i got no more duplicated divs, IDS and everything runs flawless now.

JQuery Mobile uses AJAX navigation unless you tell it otherwise. The ASP.NET redirects have no problem to normal requests, but cause issues with AJAX. So the my answer is to turn off AJAX. For that, all you have to do is add the attribute data-ajax='false' to the tag.

In my case, an easy solution could be (as changing each Html.ActionLink/Url.Action is time consuming), adding this at the end of the _Layout.cshtml (just before closing of the 'body' tag).

 $(document).on('pageinit', function() {
      $('a').each(function() {
      $(this).attr("data-ajax", "false");
     });
  });

That would be fine assuming you don't want jQuery mobile to use any Ajax with links too. I am happy to let it go ahead and use Ajax in most circumstances, so I only turn it off selectively where it can cause a problem.

Browser “back” issue on jQuery Mobile and ASP.net MVC

1 Answers