Response title
This is preview!
get div on pagebeforeshow
in jQuery Mobile
•
9 years ago
Need Help
I have multiple agent landing pages (http://mobi.inwitbank.com/inprint/agents name
They all have a tap to call, tap to text and tap to email in a <div data-role="controlgroup" with their details
Also a link to a demo page, the link is to an external url (external link same for all agents)
I want the control group of the agent to be populated with agents detail in demo page (depends which agents page was loaded that agents controlgroup loaded)
I have Google and seems not to find a proper answer the closets was:-
I have multiple agent landing pages (http://mobi.inwitbank.com/inprint/agents name
They all have a tap to call, tap to text and tap to email in a <div data-role="controlgroup" with their details
Also a link to a demo page, the link is to an external url (external link same for all agents)
I want the control group of the agent to be populated with agents detail in demo page (depends which agents page was loaded that agents controlgroup loaded)
I have Google and seems not to find a proper answer the closets was:-
$('#page2').on('pagebeforeshow', function (e, data) { alert(data.prevPage.attr('id')); });
But not sure how to implement, have played around with code but never got it working , here is my 2 codes:-
*****Agents Code*****
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inprint Printers | Mobile</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /><!-- Hosted on CDN -->
<link rel="stylesheet" href="css/ttc-custom.css" /><!-- Hosted Locally - Use to Customize CSS -->
<link rel="stylesheet" href="css/flexslider.css" /><!-- Hosted Locally (For Flex Slider) -->
<!-- Links to jQuery Core (Hosted on MediaTemple CDN) -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<!-- Link to jQuery Mobile (Hosted on MediaTemple CDN) -->
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- Link to jQuery for Flex Slider (Hosted locally) -->
<script src="js/jquery.flexslider.js"></script>
<!-- Script required for Flex Slider -->
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade"
});
});
</script>
</head>
<body class="custom">
<div data-role="page" id="home">
<!-- Header Content (Homepage) -->
<div data-role="header" class="border-bottom">
<h1 class="logoimg"><img src="http://mobi.inwitbank.com/inprint/images/marilyn-hd.png" alt="Inprint Printers Logo" /></h1>
</div><!-- END data-role="header" -->
<!-- Main Content Area -->
<div data-role="content">
<!-- Homepage Headline Text -->
<div class="tagline">
<h3>If You Have A Mobile Website
<br>Your Customers Can ....</h3>
</div><!-- END .tagline -->
<!-- Flexslider v2 Container/Slides -->
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li><img src="http://mobi.inwitbank.com/inprint/images/sp-w1-6.png" alt="Mobile Website" />
<li><img src="http://mobi.inwitbank.com/inprint/images/sp-w1-7.png" alt="Mobile Tap 2 Call" />
<li><img src="http://mobi.inwitbank.com/inprint/images/sp-w1-8.png" alt="Mobile Demo" />
<li><img src="http://mobi.inwitbank.com/inprint/images/sp-w1-9.png" alt="Mobile Specials" />
<li><img src="http://mobi.inwitbank.com/inprint/images/sp-w1-10.png" alt="Mobile Coupon" />
<li><img src="http://mobi.inwitbank.com/inprint/images/sp-w1-11.png" alt="Mobile Discount" />
</ul>
</div><!-- END .flexslider -->
</div><!-- END .flex-container -->
<!-- Homepage Tagline Text -->
<div class="tagline">
<h3>Build Value With Simple Effective Branding
<br>Click-2-Call Mobile Business Cards</h3>
</div><!-- END .tagline -->
<!-- Tap Buttons for "Call" - "Email" and "Send Text" -->
<div data-role="controlgroup" data-type="horizontal" class="centerthis controlgroup">
<a href="tel:+27826109137" data-role="button" data-theme="b">Call</a>
<a href="mailto:marilyn@inprint.co.za" data-role="button" data-theme="b">Email</a>
<a href="sms:+27826109137" data-role="button" data-theme="b">Text</a>
</div><!-- END data-role="controlgroup" -->
<!-- Button #2 -->
<div class="centerthis button2">
<a href="http://imseosocial.com/demo/" rel="external" data-ajax="false" data-role="button" data-theme="b">Let Us Show You How!</a>
</div><!-- .centerthis for Button #2 -->
<!-- Social Sharing Icons -->
<div class="socialicons">
<!-- Twitter Share -->
<a href="http://www.twitter.com/inprintprinters" rel="external" data-ajax="false">
<img src="http://mobi.inwitbank.com/inprint/images/twitter.png" alt="Follow us on Twitter" /></a><!-- END Twitter -->
<!-- Facebook Share -->
<a href="http://www.facebook.com/inprintprinters" rel="external" data-ajax="false">
<img src="http://mobi.inwitbank.com/inprint/images/facebook.png" alt="Follow us on Facebook" /></a><!-- END Facebook -->
<!-- Google Plus Share -->
<a href="http://www.plus.google.com/jackiebreur" rel="external" data-ajax="false">
<img src="http://mobi.inwitbank.com/inprint/images/google+.png" alt="Follow us on Google Plus" /></a><!-- END Google Plus -->
</div><!-- END .socialicons -->
</div><!-- END data-role="content" -->
<!-- Footer Content (Homepage) -->
<div data-role="footer" class="border-top" id="home-footer">
<h4>© 2013 Inprint Printers</h4>
<div data-role="navbar">
<ul>
<li><a href="terms.html" data-iconpos="top" data-icon="info">Website Terms</a></li>
<li><a href="privacy.html" data-iconpos="top" data-icon="info">Privacy Policy</a></li>
</ul>
</div><!-- END data-role="navbar" -->
</div><!-- END data-role="footer" -->
</div><!-- END data-role="page" (This concludes the Homepage content) -->
</body>
</html>
*****Demo*****
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pain Free Chiropractic | Mobile</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /><!-- Hosted on CDN -->
<link rel="stylesheet" href="css/ttc-custom.css" /><!-- Hosted Locally - Use to Customize CSS -->
<!-- Links to jQuery Core (Hosted on MediaTemple CDN) -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<!-- Link to jQuery Mobile (Hosted on MediaTemple CDN) -->
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body class="custom">
<div data-role="page" id="home">
<!-- Header Content (Homepage) -->
<div data-role="header" class="border-bottom">
<h1 class="logoimg"><img src="images/chiropractor-logo.png" alt="Pain Free Chiropractic Logo" /></h1>
</div><!-- END data-role="header" -->
<!-- Main Image -->
<img class="featured" src="images/chiropractor-01.jpg" alt="Pain Free Chiropractic Photo" />
<!-- Main Content Area -->
<div data-role="content">
<!-- Homepage Tagline Text -->
<div class="tagline">
<h3>We Can Help... Contact Us Today!</h3>
</div><!-- END .tagline -->
<!-- Tap Buttons for "Call" - "Email" and "Send Text" -->
<div data-role="controlgroup" data-type="horizontal" class="centerthis controlgroup">
<a href="tel:+27825205627" data-role="button" data-theme="b">Call</a>
<a href="mailto:info@imseosocial.com.com" data-role="button" data-theme="b">Email</a>
<a href="sms:+27825205627" data-role="button" data-theme="b">Text</a>
</div><!-- END data-role="controlgroup" -->
<!-- Button #2 -->
<div class="centerthis button2">
<a href="http://imseosocial.com/businesscard/computer-repair" rel="external" data-ajax="false" data-role="button" data-theme="b">Computer Repair Live Demo</a>
</div><!-- .centerthis for Button #2 -->
<!-- Social Sharing Icons -->
<div class="socialicons">
<!-- Twitter Share -->
<a href="http://www.twitter.com" rel="external" data-ajax="false">
<img src="images/twitter.png" alt="Follow us on Twitter" /></a><!-- END Twitter -->
<!-- Facebook Share -->
<a href="http://www.facebook.com" rel="external" data-ajax="false">
<img src="images/facebook.png" alt="Follow us on Facebook" /></a><!-- END Facebook -->
<!-- Google Plus Share -->
<a href="http://www.plus.google.com" rel="external" data-ajax="false">
<img src="images/google+.png" alt="Follow us on Google Plus" /></a><!-- END Google Plus -->
</div><!-- END .socialicons -->
</div><!-- END data-role="content" -->
<!-- Footer Content (Homepage) -->
<div data-role="footer" class="border-top" id="home-footer">
<h4>© 2013 Pain Free Chiropractic</h4>
<div data-role="navbar">
<ul>
<li><a href="terms.html" data-iconpos="top" data-icon="info">Website Terms</a></li>
<li><a href="privacy.html" data-iconpos="top" data-icon="info">Privacy Policy</a></li>
</ul>
</div><!-- END data-role="navbar" -->
</div><!-- END data-role="footer" -->
</div><!-- END data-role="page" (This concludes the Homepage content) -->
</body>
</html>
1
