I'm making use if Jquery mobile for its data-transition="slide".
Thats working fine, each page loaded is its own page,not tab data sliders (if that makes any difference)
I'm trying to have some JavaScript trigger after the page has been loaded by the slider transition.
I have a js file that is to set the max height of a control - this works fine if I'm on the page and refresh but if its loaded by the sliding transition, the JavaScript wont fire. I've tried it in pageinit, pageload etc but nothing triggers.
Can anyone point out the issue here.
App.JS
$(document).ready(function () {
var header = document.getElementById('header').offsetHeight;
var footer = document.getElementById('pagefooter').offsetHeight;
var wrapperH = window.innerHeight - header - footer - 50;
document.getElementById('maincontent').style.height = wrapperH + 'px';
});
$(document).on("pageinit", function (event) {
var header = document.getElementById('header').offsetHeight;
var footer = document.getElementById('pagefooter').offsetHeight;
var wrapperH = window.innerHeight - header - footer - 50;
document.getElementById('maincontent').style.height = wrapperH + 'px';
});
$(document).off('pageshow');
$(document).on('pageshow', function (e, ui) {
// generally written in pagechange event.
var header = document.getElementById('header').offsetHeight;
var footer = document.getElementById('pagefooter').offsetHeight;
var wrapperH = window.innerHeight - header - footer - 50;
document.getElementById('maincontent').style.height = wrapperH + 'px';
});
Base mvc layout page
#{
ViewData["Logo"] = "bird.png";
ViewData["Icon"] = "cascade.ico";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta name="Robots" content="noindex" />
<title>#ViewBag.SiteTitle</title>
<link rel="icon" type="image/x-icon" href="~/img/#ViewBag.Icon" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<environment names="Development">
<!-- Dev uses full file versions for de-bugging -->
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-mobile-min/jquery.mobile.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
</environment>
<environment names="Staging,Production">
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-mobile-min/jquery.mobile.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</environment>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/styles/all/all.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="~/Styles/Mobile/mobile.css" media="only screen and (max-width: 481px)" />
<link rel="stylesheet" type="text/css" href="~/Styles/Desktop/desktop.css" media="only screen and (min-width: 481px)" />
<script type="text/javascript">
</script>
#RenderSection("Scripts", false)
</head>
<body>
<div data-role="page">
<div id = "header" data-role="header" data-id="persistent" data-position="fixed">
<div id="headnav" class="navbar navbar-inverse">
<div class="container">
<div class="navbar-toggle navbar-text" data-toggle="collapse">
<h3 class="title">#ViewBag.Title</h3>
<h5 class="subtitle">#ViewBag.SubTitle</h5>
</div>
<div class="navbar-left" rel="home" href="#" title="#ViewBag.SiteTitle">
<a href="#Url.Action("Index", "App")" title="Home">
<img style="max-width:100px; max-height: 100px; margin-top: 5px"
src="~/img/#ViewBag.Logo">
</a>
</div>
<div class="navbar-collapse collapse navbar-text">
<h3 class="title">#ViewBag.Title</h3>
<h5 class="subtitle">#ViewBag.SubTitle</h5>
</div>
<!-- Logout Box -->
<div class="pull-right">
#await Component.InvokeAsync("Logout")
</div>
</div>
</div>
</div>
<!-- content -->
<div id="maincontent" data-role="content">
#RenderBody()
</div>
<footer id="pagefooter" data-id="persistent" data-position="fixed">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-collapse collapse" id="footer-body">
<ul class="nav navbar-nav">
<li><a data-transition="slide" href="#Url.Action("MyDetails", "App")"><img src="~/img/icons/myrecord.png" />My Record</a></li>
<li><a data-transition="slide" href="#Url.Action("MyTeam", "App")"><img src="~/img/icons/myteam.png" />Team Headcount</a></li>
<li><a data-transition="slide" href="#Url.Action("Holidays", "App")"><img src="~/img/icons/holidays.png" />My Holidays</a></li>
<li><a data-transition="slide" href="#Url.Action("Payslips", "App")"> <img src="~/img/icons/payslips.png" />Payslip</a></li>
<li><a data-transition="slide" href="#Url.Action("Tasks", "App")"><img src="~/img/icons/tasks.png" />Tasks</a></li>
<li><a data-transition="slide" href="#Url.Action("Requests", "App")"><img src="~/img/icons/authorise.png" />Requests</a></li>
</ul>
</div>
#*<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="footer-bar-btns visible-xs">
<li><i class="fa fa-2x fa-clock-o blue-text">Link 1</i></li>
<li><i class="fa fa-2x fa-star yellow-text">Link 2</i></li>
<li><i class="fa fa-2x fa-rss-square orange-text">Link 3</i></li>
</ul>
</div>*#
</div>
</div>
</footer>
</div>
<!-- overriding customer styles -->
<link href="~/styles/customstyles.css" rel="stylesheet" />
<script src="~/app.js"></script>
</body>
</html>
Managed to sort this with CSS in the end.
Knowing the height of the top and bottom menu bars means I could just set the below:
#maincontent {
position: fixed;
top: 120px;
bottom: 70px;
left: 0;
right: 0;
width:100%;
}
Now there is no overlap and I can freely debug my site in a browser and it looks correct on any setting.
Related
I'm working on a web application which uses classical ASP .NET MVC, but with bootstrap. The default page template I use looks like this:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>#ViewData["Title"] - Gymfed JuryTool</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<!-- Our Custom CSS -->
<link rel="stylesheet" href="~/css/style.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/612fd28750.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>The Site</h3>
<strong>JT</strong>
</div>
<ul class="list-unstyled components">
<li class="active">
<a asp-area="" asp-controller="Home" asp-action="Index">
<i class="fas fa-home"></i>
Start
</a>
</li>
#{
if (User.Identity.IsAuthenticated)
{
if (userMenus != null)
{
foreach (var userMenu in userMenus)
{
// Debug
Debug.WriteLine($"userMenu = {JsonConvert.SerializeObject(userMenu)}");
var controlName = userMenu.MenuName + "SubMenu";
<li>
<a href="##controlName" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i>
#userMenu.Caption
</a>
<ul class="collapse list-unstyled" id="#controlName">
#foreach (var menuItem in userMenu.MenuElements)
{
// Debug
Debug.WriteLine($"menuItem = {JsonConvert.SerializeObject(menuItem)}");
<li>
<a asp-area=#menuItem.AspArea asp-controller=#menuItem.AspController asp-action=#menuItem.AspAction>#menuItem.ElementName</a>
</li>
}
</ul>
</li>
}
}
}
}
</ul>
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<partial name="_LoginPartial" />
</li>
</ul>
</div>
</div>
</nav>
#RenderBody()
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - <i>Gymfed</i>
</div>
</footer>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
The CSS files I include primarily are used for the collapsable menus and the likes.
Now the site looks fine, but to show everything on my screen I need to change the zoom to 80%.
I know Boostrap should be doing that for me, but though I follow their examples and everything looks fine when I zoom out to 80%...
I was wondering how I can have this happen automatically? Been looking around, but can't seem to find an actual answer to my question.
I am a beginner in ASP.NET MVC.
I am working on a project in which the navbar of my partial view for shared layout fits to screen even though I added .container class from bootstrap.
I want my navbar to be in the default size that .container class sets its content into.
If you refer the _Layout.cshtml script, you will see that the #RenderBody() is used to render the contents present in the body.
But the output of it is not what I expected. Why could this be happening?
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<title>#ViewBag.Title - BBC Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Links to other CSS-->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/mdb.css" rel="stylesheet" />
<link href="~/Content/mdb.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<!--Navigation Bar-->
<nav class="navbar navbar-expand-sm navbar-light fixed-top z-depth-1" style="background-color: #F5F5F5">
<!--Navbar toggle button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--Logo-->
<a class="navbar-brand" href="#">
<img src="~/Content/Images/BBCLogo.png" height="50" width="50" />
</a>
<!--Links-->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Home</a>
</li>
<li class="divider-vertical">
</li>
<li class="nav-item">
<a class="nav-link hoverable" href="#">About Us</a>
</li>
<li class="divider-vertical">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Login</a>
</li>
<li class="divider-vertical">
<li class="nav-item">
<a class="nav-link hoverable" href="#">Register</a>
</li>
</ul>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<hr />
<footer class="footer">
<div class="container">
<span class="text-muted">© Copyright 2017 Big Boy Cars #DateTime.Now </span>
</div>
</footer>
</div>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/mdb.js"></script>
<script src="~/Scripts/mdb.min.js"></script>
<script src="~/Scripts/popper.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</body>
</html>
Index.cshtml:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>#ViewBag.Title - Index</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/mdb.css" rel="stylesheet" />
<link href="~/Content/mdb.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div id="MyCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="MyCarousel" data-slide-to="0" class="active"></li>
<li data-target="MyCarousel" data-slide-to="1"></li>
<li data-target="MyCarousel" data-slide-to="2"></li>
</ol>
<!--Slides-->
<div class="carousel-inner z-depth-1" role="listbox">
<div class="carousel-caption">
<h3 class="h3-responsive">Big Boy Cars</h3>
<p>Best car dealers in market</p>
</div>
<!--First Slide-->
<div class="carousel-item active">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage01.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Second Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage02.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Third Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage03.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
</div>
<!--Controls-->
<a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/mdb.js"></script>
<script src="~/Scripts/mdb.min.js"></script>
<script src="~/Scripts/popper.min.js"></script>
</body>
</html>
Your partial view should include only what you want to have in place of the RenderBody helper. You are including the head and body tags again, which is just breaking everything apart.
So your Index.cshtml should be:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="MyCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="MyCarousel" data-slide-to="0" class="active"></li>
<li data-target="MyCarousel" data-slide-to="1"></li>
<li data-target="MyCarousel" data-slide-to="2"></li>
</ol>
<!--Slides-->
<div class="carousel-inner z-depth-1" role="listbox">
<div class="carousel-caption">
<h3 class="h3-responsive">Big Boy Cars</h3>
<p>Best car dealers in market</p>
</div>
<!--First Slide-->
<div class="carousel-item active">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage01.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Second Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage02.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
<!--Third Slide-->
<div class="carousel-item">
<div class="view hm-black-light">
<img class="d-block w-100" src="~/Content/Images/CarouselImage03.jpg" alt="First Slide" />
<div class="mask"></div>
</div>
</div>
</div>
<!--Controls-->
<a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
EDIT
In regards to the navbar. You have to wrap it in a .container:
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
..
</nav>
</div>
It's on the docs
I tried to change several times the file but the only thing that I accomplishing every time is to add more invalid expressions
I am not able to see why now I have 6 invalid expression terms ';' in the following code?
This my _layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title - Moran</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootswatch/yeti/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<nav class="navbar navbar-default"></nav>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header ">
#if (User.Identity.IsAuthenticated)
{
<span id="username">#User.Identity.Name</span>
}
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Moran", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a asp-controller="App" asp-action="Index">Home</a></li>
<li><a asp-controller="App" asp-action="ContactUs">Contact Us</a></li>
<li><a asp-controller="App" asp-action="About">About</a></li>
<li><a asp-controller="App" asp-action="Galery">Galery</a></li>
<li><a asp-controller="App" asp-action="Trips">Trips</a></li>
#if (User.Identity.IsAuthenticated)
{
<li><a asp-controller="Auth" asp-action="Logout">Logout</a></li>
}
</ul>
</div>
</div>
</div>
<div id="main" class="container-fluid">
<div>
#RenderBody()
</div>
</div>
<div id="footer" class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<p class="text-center text-danger">© #DateTime.Now.Year - Moran Ribadeo S.L.</p>
</div>
</div>
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<environment names="Development">
<script type="text/javascript" src="~/jScript/site.js"></script>
</environment>
<environment names="Production,Staging">
<script type="text/javascript" src="~/lib/_app/site.js"></script>
</environment>
#RenderSection("Scripts", false)
</body>
</html>
Could anybody advise?
#model IEnumerable<Moran.Models.Trip>
#{
ViewBag.Title = "Home Page";
}
<div class="row">
<div class="col-md-6">
<h1>Welcome</h1>
<p>This is the welcome page</p>
<a asp-controller="App" asp-action="trips" class="btn btn-lg btn-success">View trips</a>
</div>
</div>
I am creating a collapsible set dynamically. Like below
div = '<div data-role="collapsible" data-inset="false" data-iconpos="right" data-collapsible="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"><h3>'+
row1["name"]+'<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" data-iconpos="right">'+count+'</span></h3></div>';
Now i need to add a button to the each collapsible set and upon clicking on the button i need to get the collapsible element content but collapsible list should not expand.
How can i do that?
Thanks:)
Example
Working example: http://jsfiddle.net/Gajotres/z3hsb/
Description
What you need to understand here is how to use:
e.stopPropagation();
e.stopImmediatePropagation();
Your current problem is that click event is propagating through button and hitting collapsible, which in turn opens/closes it. It can be prevented with if functions stopPropagation() and stopImmediatePropagation() are used.
Code
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<div id="List" data-role="collapsible-set" data-theme="b" data-content-theme="d">
<div id='ListItem' data-role='collapsible' data-content-theme='b' data-collapsed='true'>
<h3><p>Title</p>
<div id="button-set">
<input type='button' data-theme='b' value='Settings' data-mini='true' data-inline='true' data-icon='gear' data-icon-pos='top' id="show-content"/>
</div>
</h3>
<p>CONTENT</p>
</div>
</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){
$('#show-content').on('click', function(e) {
alert($('#ListItem').find('h3 p').text());
e.stopPropagation();
e.stopImmediatePropagation();
});
});
CSS:
#button-set {
float:right;
margin-top: -20px;
}
I would like to append some code to a page using jQuery/jQuery mobile, I would only like to append once not on each visit to the page.
** final edit **
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script>
//$(document).ready(function() // get error when I use this
$('#page1').live('pageshow', function ()
{
// alert("!");
var section1 = "<p>some code for page 1...</p>";
myClone1 = $(section1);
myClone1.appendTo("#placeholder1").trigger('create');
});
$('#page2').live('pageshow', function ()
{
// alert("!");
var section2 = "<p>some code for page 2...</p>";
myClone2 = $(section2);
myClone2.appendTo("#placeholder2").trigger('create');
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder1">Page 1</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder2">Page 2</div>
</div>
</div>
</div>
</body>
</html>
You can check for the existence of the code you are appending before actually appending. That way on subsequent visits to the page the data will not be added:
$('#page1').live('pageshow', function ()
{
// alert("!");
if ($(this).find('p.appended_code').length === 0) {
var section1 = "<p class='appended_code'>some code for page 1...</p>";
myClone1 = $(section1);
myClone1.appendTo("#placeholder1").trigger('create');
}
});
Note that I added the 'appended_code' class to the paragraph tag that you are appending and that is the selector I used to check for the existence of appended code.
--Update--
You can also clean-up the code a bit if you are using naming conventions based on numbers:
var pageData = new Array();
pageData[1] = "<p class='appended_class'>some code for page 1...</p>";
pageData[2] = "<p class='appended_class'>some code for page 2...</p>";
$('div[id^="page"]').live('pagebeforeshow', function () {
if ($(this).find('p.appended_class').length === 0) {
var page_num = $(this).attr('id').replace('page', '');
$("#placeholder" + page_num).append(pageData[page_num]).trigger('create');
}
});
Note that the div[id^="page"] selector searches for divs with an id that starts with "page"
Here is a jsfiddle for ya: http://jsfiddle.net/S3wE6/1/
If you want the data to be appended on the initial load I would recommend making the line of code where the data is appended into a function and calling it on $(document).ready();
ok this was a little tricky but here is a live version:
http://jsfiddle.net/phillpafford/QfjaE/27/
JS:
var elem_id;
var appendToStatus = {};
appendToStatus['page1'] = true;
appendToStatus['page2'] = true;
$('div').live('pageshow', function() {
elem_id = $(this).attr('id');
appendToStatus[elem_id] = fnCreateGroups(elem_id, appendToStatus[elem_id]);
});
function fnCreateGroups(elem_id, appendToStatus) {
if(appendToStatus == true) {
var section = "<p>some code for " + elem_id + "...</p>";
myClone = $(section);
myClone.appendTo("#" + elem_id + "_placeholder").trigger('create');
return false;
}
}
HTML:
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" href="#page2">page2</a></li>
</ul>
</div>
<div id="page1_placeholder">Page 1</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" href="#page2">page2</a></li>
</ul>
</div>
<div id="page2_placeholder">Page 2</div>
</div>
</div>
This seem to work... with minimal changes. Only add on pagecreate event.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script>
$('#page1').live('pagecreate', function ()
{
var section1 = "<p>some code for page 1...</p>";
myClone1 = $(section1);
myClone1.appendTo("#placeholder1").trigger('create');
});
$('#page2').live('pagecreate', function ()
{
var section2 = "<p>some code for page 2...</p>";
myClone2 = $(section2);
myClone2.appendTo("#placeholder2").trigger('create');
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder1">Page 1</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder2">Page 2</div>
</div>
</div>
</div>
</body>
</html>