Need help, why is jquery mobile doing this?

LordNorbury · 19-04-2015 7:48pm #1

Hi folks,

I previously opened a thread on this exact issue but I want to take a fresh attempt at resolving this as I got completely bogged down in the last thread and just want to try a fresh attempt at this with a clean canvas if possible.

I have an MVC solution I've been working on for a mobile website, I'm using jquery Mobile (JQM), to theme the site and I've done that successfully enough using Themeroller.

My problem is so simple, I'm frustrated because all I am trying to do is link one page to another without an issue but that doesn't seem to be possible with JQM and my menu.

I have 2 pages/views in my MVC solution just to keep things simple, and they both share a Layout view/page.

I have an "Index" view and an "Events" view. Both these views are basically a simple 2 column menu using image links. My "Index" view is 2 columns and 4 rows (an 8 element image button menu if you want to think of it like that), and my "Events" view is 2 columns and 3 rows.

When I build the solution, my Index view loads and I view it in my iPhone emulator on my laptop (Electric Mobile Studio 2012), everything loads fine. I have a 2 column 4 row menu with all the relevant image buttons that I have provided for in my "Index" page/view.

Then I navigate using one of my menu image buttons, to my "Events" page, and there is a 2 column x 2 row menu there, as I have coded for, but low and behold at the bottom of that page/view, is also the last two rows from the previous fúcking page?!?

Not expecting to see this, as I didn't code for this to happen, I didn't code for shít on my previous page/view to be sticking out at the end of my current page/view, I used my developer tool on my iPhone emulator, to see what code was behind what I was seeing on my page, and there it is in the code, a load of code that basically calls in the code from the previous page I was on ("Index")...

I have no idea why this is happenening, I have a very simple set up here, a Layout page as follows:

[HTML]
<!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" ID="_LayoutPage" data-theme="d" style="background-color:#000; display:block; margin-left:auto; margin-right:auto; text-align:center;">

<div data-role="header" ID="_LayoutHeader" data-theme="d" style="background-color:#000; margin-top:10px; display:block; margin-left:auto; margin-right:auto; text-align:center;">

<div class="logo">
<a href="@Url.Action("Index", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/logo.png")" /></a>
</div>

</div>

@RenderBody()

</div>
</body>

</html>
[/HTML]

My "Index" view code is below:

[HTML]
@{
ViewBag.Title = "Index Page.";
Layout = "~/Views/Shared/_Layout.MobileBlack.cshtml";

}
<div data-role="content" ID="_IndexContent" style="background-color:#000; display:block; margin-top:0px; 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("Page1", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/image1.png")" /></a>
Page 1
</div>
</div>

<div class="ui-block-b ui-responsive">
<div class ="menu">Page2", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/image2.jpg")" /></a>
Page 2
</div>
</div>

<div class="ui-block-a ui-responsive">
<div class="menu">
<a href="@Url.Action("HPage3", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/image3.png")" /></a>
Page 3
</div>
</div>

<div class="ui-block-b ui-responsive">
<div class ="menu">
<a href="@Url.Action("page4", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/image4.png")" /></a>
Page 4
</div>
</div>

<div class="ui-block-a ui-responsive">
<div class="menu">
<a href="@Url.Action("Page5", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/image5.jpng")" /></a>
Page 5
</div>
</div>

<div class="ui-block-b ui-responsive">
<div class ="menu">
<a href="@Url.Action("Page6", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/image6.png")" /></a>
Page6
</div>
</div>

<div class="ui-block-a ui-responsive">
<div class="menu">
<a href="@Url.Action("Lpage7", "Account")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/image7.png")" /></a>
Page 7
</div>
</div>

<div class="ui-block-b ui-responsive">
<div class ="menu">
<a href="@Url.Action("Page8", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/image8.png")" /></a>
page 8
</div>
</div>

</div>

</div>
[/HTML]

This is my "Events" view code:

[HTML]
@{
ViewBag.Title = "Events Page";
Layout = "~/Views/Shared/_Layout.MobileBlack.cshtml";

}

<div data-role="content" ID="_EventContent" style="background-color:#000; display:block; margin-top:0px; 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("Event1", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/event1.png")" /></a>
Event 1
</div>
</div>

<div class="ui-block-b ui-responsive">
<div class ="menu">
<a href="@Url.Action("Event2", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/event2.png")" /></a>
Event 2
</div>
</div>

<div class="ui-block-a ui-responsive">
<div class="menu">
<a href="@Url.Action("Event3", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/event3.png")" /></a>
Event 3
</div>
</div>

<div class="ui-block-b ui-responsive">
<div class ="menu">
<a href="@Url.Action("Event4", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/event4.png")" /></a>
Event 4
</div>
</div>

</div>

</div>
[/HTML]

This is the code I see after I use the developer tool to view my code when I have transitioned to my Events page/view and the menu buttons from my Index page are sticking out at the bottom of that page:

Huge thanks to anyone who can help me finally sort this out without having to use "rel=external" which means I am losing page transitions and reloading a page which looks messy. Am more than happy to generously "tip" someone who helps me sort this out as I've been coming back to this again and again and again for the last few months and can't get a breakthrough with it...

NoelOC · 20-04-2015 9:26am

You could try to remove the previous page with jQuery

[HTML]$( document ).on( 'mobileinit', function () {

$(document).on( 'pagechange', function( event, ui ) {
ui.prevPage.remove();
});
});[/HTML]

I haven't used jQuery Mobile for years.
I remember it being really buggy when I was using it.

jQuery Mobile will keep the previous pages in the DOM so it can go back faster/smoother.

Or try something like this:
[HTML]
$(function() {
$(document).on("pagecontainerchange", $.mobile.pageContainer, function(event, ui) {
if($.mobile.firstPage === ui.prevPage) {
ui.prevPage.remove();
}
});
});[/HTML]

LordNorbury · 20-04-2015 2:19pm

NoelOC wrote: »

You could try to remove the previous page with jQuery

[HTML]$( document ).on( 'mobileinit', function () {

$(document).on( 'pagechange', function( event, ui ) {
ui.prevPage.remove();
});
});[/HTML]

I haven't used jQuery Mobile for years.
I remember it being really buggy when I was using it.

jQuery Mobile will keep the previous pages in the DOM so it can go back faster/smoother.

Or try something like this:
[HTML]
$(function() {
$(document).on("pagecontainerchange", $.mobile.pageContainer, function(event, ui) {
if($.mobile.firstPage === ui.prevPage) {
ui.prevPage.remove();
}
});
});[/HTML]

Thanks for that, I can understand the logic of having previous pages there in the DOM for faster retrieval if a user wants to go back, but why I the name of all that is serious does content from a previous page, get rendered in a current page view?!? I mean it goes against everything I've learnt about web development & makes jquery mobile completely & utterly useless if content from the previous page is turning up on a current page view as a matter of default?!?

Can someone more familiar with JQM advise me if there is something very fundamentally wrong that I'm doing here, as I'm convinced it can't be the case that millions of mobile websites have been developed using MVC and JQM and that they are all using a workaround to stop irrelevant content from a previous page/view, being rendered for a current page/view?!?

Giblet · 20-04-2015 2:27pm

jQuery Mobile is horrendous, keep away!

NoelOC · 20-04-2015 2:45pm

There is nothing wrong with the code as far as I can see.

It's a JQM decision to always keep the first page in the dom (see here)
https://github.com/jquery/jquery-mobile/issues/3249

JQM is horrible and should keep away in my personal opinion.

The easiest and cleanest option would just use a responsive template with your existing MVC app.

LordNorbury · 20-04-2015 3:54pm

Giblet wrote: »

jQuery Mobile is horrendous, keep away!

What else can ye use though if you want to theme a site for mobile?!? I tried bootstrap & that was a nightmare too! Just can't understand how anyone could build a framework that automatically shoves content off a page view you are not trying to see, onto the end of a current page/view?!? It seems bat shít crazy?!?

Giblet · 20-04-2015 10:03pm

Use plain ol' CSS.

John_Mc · 21-04-2015 12:36pm

Giblet wrote: »

jQuery Mobile is horrendous, keep away!

Don't agree with that. I just finished my first Phonegap project with it and didn't have any problems really. Besides a bit of styling which I could easily fix myself using CSS.

Giblet · 21-04-2015 9:59pm

John_Mc wrote: »

Don't agree with that. I just finished my first Phonegap project with it and didn't have any problems really. Besides a bit of styling which I could easily fix myself using CSS.

I appreciate that you might have not had any issues, but it's just not needed anymore and has serious performance issues vs what can be accomplished with very little CSS + JS.

Need help, why is jquery mobile doing this?

Comments