Jquery Mobile 1.4.5 page displaying content from previous page

Question

I have what appears to be a very simple yet frustrating issue with my jquery mobile MVC solution. I'm having the same problem whether I use a layout template or not.

Basically when I navigate from my main view (index), which is a 2 column menu page that has 4 rows X 2 column ahref buttons with a customised image for each button. the problem is that when I navigate to any other page on my solution from this page, (this index page/view happens to be longer in length than the other views), if I navigate to say my view that is named "contact", I can still see the buttons from my previous menu page (index), sticking out at the end of the new page. Basically content from my previous page is displaying on my new page and the only way I have found to stop this from happening is to turn off ajax by using:

@{
    ViewBag.Title = "My Index page";
    Layout = "~/Views/Shared/_Layout.Mobile.cshtml";

}        
    <div class="logo">
    <a href="@Url.Action("Index", "Home")" data-transition="flip" data-ajax="false"><img src="@Url.Content("~/Content/mobile/images/logo.png")" /></a>
    </div>
    </div>
<div data-role="content" role="main" ID="_IndexContent" data-cache="never" data-dom-cache="never" data-ajax="false" data-enhance="false" style="background-color:#000; margin-top:-10px; display:block; margin-left:auto; margin-right:auto; width:90%; text-align:center;">

<div class="ui-grid-a">
	<div class="ui-block-a ui-responsive">
        <div class="menu">
        <a href="@Url.Action("Login", "Account")" data-transition="flip" data-ajax="false"><img src="@Url.Content("~/Content/mobile/images/login.jpg")" /></a>
        Login
        </div>
        </div>

	<div class="ui-block-b ui-responsive">
            <div class ="menu">
        <a href="@Url.Action("CreateQuery", "Home")" data-transition="flip" data-ajax="false"><img src="@Url.Content("~/Content/mobile/images/goodie.jpg")" /></a>
        Shop
        </div>
        </div>

	<div class="ui-block-a ui-responsive">
        <div class="menu">
        <a href="@Url.Action("ViewMyQueries", "Home")" data-transition="flip" data-ajax="false"><img src="@Url.Content("~/Content/mobile/images/queries.jpg")" /></a>
        View Open Queries
        </div>
        </div>

	<div class="ui-block-b ui-responsive">
        <div class ="menu">
        <a href="@Url.Action("ViewMyOrders", "Home")" data-transition="flip" data-ajax="false"><img src="@Url.Content("~/Content/mobile/images/orders.jpg")" /></a>
        Track Orders
        </div>
        </div>

	<div class="ui-block-a ui-responsive">
        <div class="menu">
        <a href="@Url.Action("Payment", "Home")" data-transition="flip" data-ajax="false"><img src="@Url.Content("~/Content/mobile/images/visa.jpg")" /></a>
        Take Payment
        </div>
        </div>

	<div class="ui-block-b ui-responsive">
            <div class ="menu">
        <a href="@Url.Action("LogOff", "Account")" data-transition="flip" data-ajax="false"><img src="@Url.Content("~/Content/mobile/images/ddl2.jpg")" /></a>
        Log Off
        </div>
        </div>


	<div class="ui-block-a ui-responsive">
        <div class="menu">
        <a href="@Url.Action("ViewAccount", "Account")" data-transition="flip" data-ajax="false"><img src="@Url.Content("~/Content/mobile/images/account.jpg")" /></a>
        View Account
        </div>
        </div>

	<div class="ui-block-b ui-responsive">
            <div class ="menu">
        <a href="@Url.Action("Bonus", "Account")" data-transition="flip" data-ajax="false"><img src="@Url.Content("~/Content/mobile/images/bonus.jpg")" /></a>
        Bonus Credits
        </div>
        </div>

    </div>
    </div>
    </div>

Huge thanks to anyone who can help me with this, I'm losing my page transitions and I know this isn't working as it is meant to work, so I'm not learning jquery mobile properly as I have to turn off functionality to get it to work properly. I am new enough to MVC and jquery mobile and all that comes with MVC, I previously developed using Webforms & C#.

Answer 1

I'm getting my head around this problem which is actually quite ridiculous! JQM can load a data-role="page", but it is built/designed for all these data-role="page" sections to be in the same html file! My sections are in different MVC views, so JQM documentation says I have to use "ajax-date="false" or else rel="external" in order to get these pages to load properly, which means I use my transitions between pages.

This I think is downright stupid for a set of software tools that claims to let you enhance your mobile website without any complications. Seriously, who sticks all their website code into one single file? Separation of functionality will usually mean developers will use different files/pages/views across their website.

Sorry for the rant but I have spent the best part of a month trying to learn JQM and to find out now that I can't even as much as link one page to another on my own website on the same domain, without having to surrender transitions and "pretend" that it an external link I am trying to reach (by having to use rel="external"), when it is actually not an extrenal link at all, just so content from the previous page doesn't render on the current page, I think this is a load of total crap to be honest.

Answer 2

I have in my _Layout/master file, and this is where the problem is. When I have the following in my Layout file, I have the problem with my page that I outlined in my opening message:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <meta name="viewport" content="width=device-width" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
 
        @Styles.Render("~/Content/mobileCss", "~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        
  <link rel="stylesheet" href="~/Content/themes/Hello.css" />
  <link rel="stylesheet" href="~/Content/themes/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />      
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>                             
  <link href="~/Content/mobile/css/style.css"rel="stylesheet" type="text/css" />

    </head>

    <body>
    <div data-role="page" data-theme="d" style="background-color:#000; display:block; margin-left:auto; margin-right:auto; text-align:center;">
    
    <div data-role="header" data-theme="d" style="background-color:#000; display:block; margin-left:auto; margin-right:auto; text-align:center;">
         
    <div class="logo">
    <a href="@Url.Action("TradeIndex", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/logo.png")" /></a>
    </div>
    </div>
    <div data-role="content" data-theme="d" style="background-color:#000; display:block; margin-left:auto; margin-right:auto; text-align:center;">
  
    @RenderBody()
        
    </div> 

</div>
    </body>
</html>

When I remove the "data-role="page" line of code in my layout file, I do not have the above issue with content from the previous view being displayed at the bottom of my current view, and then if I do not have the above line of code in my layout file, I can't get the whole page to have a black background when rendering it on a desktop view, because where the content ends, the page basically ends and everything underneath that is white, even if I set the background to white in the tag, it is only displaying the background color as black within the "content", because I can't use "data-role-"page" because of the issue I'm having.

EDIT: I've tried not using a _Layout page and just having each page on its own and I'm having the same problem with content from previous page at the end of the current page.