jquery mobile problem....

LordNorbury · 28-01-2015 2:17pm #1

Hi folks,

Here I am back again with another wreck the head front end problem.

Here is my code, I originally used a Layout file for this solution but did away with that as I suspected that this was causing my problem, but alas no, I am still having this issue even though there are no layout files here now.

The problem I'm having is that when I nagivate from my 'index' view to my 'about' or 'events' view, the content on the index page is still visible at the bottom of either the 'about' view or the 'events' view. Then if I refresh the page, it sorts itself out, which is no use to me.

It is like jquery page is just plonking one view on top of another without clearing the previous page off the screen.

The code is very simple and I don't know why I am having such a headwrecking issue when the code as far as I can see is correct.

My 'index' view:
[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>
<style>

.ui-page, ui-content { background: black;}

</style>

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

<div class="logo">@Html.ActionLink(
" ",
"Index",
"Home",
null,
new {
style = "background: url('" + Url.Content("~/Content/mobile/images/logo.png") + "') no-repeat center; margin-top:0px; margin-left:auto; margin-right:auto; display:block; height:168px; width:272px;"
}

)
</div>

</div>
<div data-role="content" ID="_IndexContent" style="background-color:#000; display:block; margin-left:auto; margin-right:auto; width:90%; text-align:center;">

<div id="MyIndexPage">
<div class="ui-grid-a">
<div class="ui-block-a ui-responsive">
<div class="menu">
<a href="@Url.Action("Login", "Account")" data-transition="slide"><img src="@Url.Content("~/Content/mobile/images/Login.png")" /></a>
Login
</div>
</div>

<div class="ui-block-b ui-responsive">
<div class ="menu">
<a href="@Url.Action("About", "Home")" data-transition="slide"><img src="@Url.Content("~/Content/mobile/images/AboutUs.jpg")" /></a>
About Us
</div>
</div>

<div class="ui-block-a ui-responsive">
<div class="menu">
<a href="@Url.Action("Index", "Home")" data-transition="slide"><img src="@Url.Content("~/Content/mobile/images/img3.png")" /></a>
History
</div>
</div>

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

<div class="ui-block-a ui-responsive">
<div class="menu">
<a href="@Url.Action("Index", "Home")" data-transition="slide"><img src="@Url.Content("~/Content/mobile/images/services.jpg")" /></a>
Services
</div>
</div>

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

<div class="ui-block-a ui-responsive">
<div class="menu">
<a href="@Url.Action("LogOff", "Account")" data-transition="slide"><img src="@Url.Content("~/Content/mobile/images/logout.jpg")" /></a>
Account Logout
</div>
</div>

<div class="ui-block-b ui-responsive">
<div class ="menu">
<a href="@Url.Action("Login", "Account")" data-transition="slide"><img src="@Url.Content("~/Content/mobile/images/1.png")" /></a>
FAQ
</div>
</div>

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

</body>
</html>

[/HTML]

My 'About' view:

[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>
<style>

.ui-page, ui-content { background: black;}

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

<div class="logo">@Html.ActionLink(
" ",
"Index",
"Home",
null,
new {
style = "background: url('" + Url.Content("~/Content/mobile/images/logo.png") + "') no-repeat center; margin-top:0px; margin-left:auto; margin-right:auto; display:block; height:168px; width:272px;"
}

)
</div>
</div>
<div data-role="content" ID="_AboutContent" style="background-color:#000; display:block; margin-left:auto; margin-right:auto; width:90%; text-align:center;">

<div id="MyAboutPage">
<div class="ui-grid-a">
<div class="ui-block-a ui-responsive">
<div class="menu">
<a href="@Url.Action("Login", "Account")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/People.png")" /></a>
Our People
</div>
</div>

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

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

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

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

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

[/HTML]

My 'Events' view:

[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" data-theme="d" ID="_EventsPage" style="background-color:#000; display:block; margin-left:auto; margin-right:auto; text-align:center;">
<div data-role="header" data-theme="d" ID="_EventsHeader" style="background-color:#000; margin-top:10px; display:block; margin-left:auto; margin-right:auto; text-align:center;">

<div class="logo">@Html.ActionLink(
" ",
"Index",
"Home",
null,
new {
style = "background: url('" + Url.Content("~/Content/mobile/images/logo.png") + "') no-repeat center; margin-top:0px; margin-left:auto; margin-right:auto; display:block; height:168px; width:272px;"
}

)
</div>
</div>
<div data-role="content" ID="_EventsContent" style="background-color:#000; display:block; margin-left:auto; margin-right:auto; width:90%; text-align:center;">

<div id="MyEventsPage">
<div class="ui-grid-a">
<div class="ui-block-a ui-responsive">
<div class="menu">
<a href="@Url.Action("Login", "Account")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/Q1.png")" /></a>
Q1 Events
</div>
</div>

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

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

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

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

</div>

</body>
</html>

[/HTML]

Huge thank you to anyone who can help me out with this...

Talisman · 28-01-2015 5:16pm

How is the <a href> tag populating?

You have double quotes enclosed in double quotes here:

<a href="@Url.Action("Login", "Account")" data-transition="flip">

Shouldn't you be single and double quotes like:

<a href='@Url.Action("Login", "Account")' data-transition="flip">

LordNorbury · 28-01-2015 5:21pm

Talisman wrote: »
How is the <a href> tag populating?

You have double quotes enclosed in double quotes here:
<a href="@Url.Action("Login", "Account")" data-transition="flip">
Shouldn't you be single and double quotes like:
<a href='@Url.Action("Login", "Account")' data-transition="flip">

I'll give this a shot, morto on me if that is the cause of my woes here!

LordNorbury · 28-01-2015 6:06pm

Nope, that hasn't sorted it, it's so frustrating, the icons on the 'index' page are jutting/sticking out at the bottom of the 'events' page or the 'About' page when you navigate to those pages, then if you refresh the page, the material from the previous page disappears...

EDIT: I'm wondering is it a jquery mobile responsive issue/bug, as it is only happening on my iPhone emulator on my desktop. When I view it in a desktop browser there is no issue.

LordNorbury · 28-01-2015 7:47pm

Turns out when I take out these two lines of code:

[HTML]
<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>
[/HTML]

My pages transition from one to the other normally. Would someone be able to explain why I need to take these out to get my pages to link from one to the other, when jquery mobile tell you to put these lines of code into your head section on the Themeroller site? Everywhere I have looked, it says these 2 lines of code should be there, yet I can't as much as link one page to another with these lines of code without the page looking like a mess?

EDIT: My question is, put simply, I'm not using a Layout file, each page is standing on its own, so why or how on earth is content on my 'index' page, being rendered on my 'about' and my 'events' page, but then this content disappears when I refresh the page?

LordNorbury · 28-01-2015 8:32pm

I seem to have narrowed down my problem a bit, the issue seems to be "overlay", something I have never heard of and know nothing about, I've gone into "Developer Tools > Element Inspector on my iPhone emulator on my PC and low and behold, there is a reference to the Page ID for my previous page (_IndexPage)...

Am hoping the screen grab below will help someone help me with this and how to turn off overlay...

LordNorbury · 29-01-2015 11:17am

Pleeeeeeeaaaaase heeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeelp me!

LordNorbury · 29-01-2015 3:08pm

Solution is to put a 'data-ajax=false' into each href, this forces a page refresh each time a new link is activated. Unfortunately it stops the lovely page transitions I had set up but one page loading on top of the other is no use to anyone obviously and this is the only way I have found to make one page/view visible at a time.

NoelOC · 29-01-2015 3:10pm

Jquery Mobile has the config "ajaxEnabled" = true by default so it's loading the pages via ajax requests.
Your "About" and "Events" pages above should only be partials with the content html.
Don't include the <head> etc again.

Since jquery Mobile is loading the page via Ajax all that <head> content is being loaded into your app mulitple times.

Not sure if that's the case, it's hard to tell from looking at plain code.

If it still doesn't work, let me know and I'll run it here on my machine and take a deeper look.

LordNorbury · 29-01-2015 3:16pm

NoelOC wrote: »

Jquery Mobile has the config "ajaxEnabled" = true by default so it's loading the pages via ajax requests.
Your "About" and "Events" pages above should only be partials with the content html.
Don't include the <head> etc again.

Since jquery Mobile is loading the page via Ajax all that <head> content is being loaded into your app mulitple times.

Not sure if that's the case, it's hard to tell from looking at plain code.

If it still doesn't work, let me know and I'll run it here on my machine and take a deeper look.

Thanks a mil Noel, it's a fuppin nightmare, I'm new to jquery mobile and MVC, previously developed in .NET webforms, all this business with jquery mobile of multiple pages being created from the same html file and stuff being loaded into DOM's, I just want 3 separate pages with simple image menu's, with the same theme, that can navigate cleanly between each other.

I like the neat look of jquery mobile but it is not easy to get used to, especially when content from the first page is cached and just left lying there on the browser so when you transition to another page and the content is shorter, the data from the previous page is sticking out at the end of your 2nd page. Have you even run into this before?

NoelOC · 29-01-2015 3:44pm

I've used jQuery mobile in the past. It was a few years again and it remember lots of headaches from it.

Why are you using jQuery mobile in the first place?
If you just want 3 pages that link together. Why not just use a responsive template (foundation or bootstrap) with normal MVC.

jQuery mobile seems complete overkill for what you're trying to achieve.

LordNorbury · 29-01-2015 4:51pm

NoelOC wrote: »

I've used jQuery mobile in the past. It was a few years again and it remember lots of headaches from it.

Why are you using jQuery mobile in the first place?
If you just want 3 pages that link together. Why not just use a responsive template (foundation or bootstrap) with normal MVC.

jQuery mobile seems complete overkill for what you're trying to achieve.

I'm also using checkboxes and radio buttons on some pages (when I get the basic menu working!), and a membership/signup page (this needs textboxes) and jqm does a good job of theming all this I think.

NoelOC · 29-01-2015 5:10pm

You should revert back to using the layout.cshtml

Have your frame of the site there with

<div id="page" data-role="page" data-theme="a">

        <!-- Main Content  -->
	@RenderBody()
    
</div><!--end of page -->

Your site should only have *1* data-role="page"
All other pages should just be using data-role="content"

jQuery mobile will take the content when you click on a link and insert it into the 1 data-role page.

jquery mobile problem....

Comments