Response title
This is preview!
Jquery mobile Popup help
in jQuery Mobile
•
3 months ago
I am new to the forum and new to jquery mobile. I have a question on why a link in a popup might not work for multiple pages. The popup works and that is great, cause the first button goes to the next page. however when I click my popup menu again and go to the next page it will not go.... and neither will the other two items that follow. Let me also say i am using the unstable version of jquery mobile, as the popup works the way i want it (I know I know... newbies.)I have included the code here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FileSend Mobile Web App</title>
<meta name="viewport" content="width=device-width. initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
<script src="script/filesend.js" type="text/javascript"></script>
<link href="css/structure.css" rel="stylesheet" type="text/css">
<link href="css/filesend.css" rel="stylesheet" type="text/css">
<link href="css/my_filesend.css" rel="stylesheet" type="text/css">
<link href="css/original/jqm-icon-pack-2.0-original.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--page:home--><div data-role="page" id="home" data-theme="a">
<div data-role="controlgroup" class="ui-controlgroup">
<img src="images/filesend_logo.png"/>
<p style="color:#FFF">Files On the Go!</p>
<div data-role="fieldcontain" class="ui-hide-label">
<form action="#page2" method="post">
<label for="username"></label> <input type="text" name="username"value="" placeholder="username" />
<label for="password"></label>
<input type="password" name="password"value="" placeholder="password" />
<label for="submit"></label>
<button data-theme="b" type="submit">Login</button>
<p><a href="#everything">Sign up for a new acccount.</a></p>
</form>
</div>
</div><!--controlgroup-->
<div data-role="footer" data-position="fixed" data-id="filesend_footer">
<h4>© 2013</h4>
</div><!--footer-->
</div><!--page-->
<!--Everthing-->
<div data-role="page" id="everything" data-theme="a">
<div data-role="header" data-position="fixed">
<h1 role="heading">Everything</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
<a href="#popupMenu" data-role="button" data-icon="search" id="search" data-rel="popup" data-iconpos="notext">search</a>
<a href="#" data-role="button" data-icon="direction" data-iconpos="notext">share</a>
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext">add</a>
<div data-role="popup" id="popupMenu" data-theme="a">
<ul data-role="listview" data-inset="true" style="min-width:110px;" data-theme="a">
<li><a href="#everything">Everything</a></li>
<li><a href="#sales">Sales</a></li>
<li><a href="#marketing">Marketing</a></li>
<li><a href="#techsupport">Tech Support</a></li>
</ul>
</div>
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Sales Sheet.pdf</h2><p>Sales sheet in Adobe PDF format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Sales Training.mp4</h2><p>Sales training video in .mp4 format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Sales Forecast.xls</h2><p>Sales forecast in MS-Excel format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Product Images.jpeg</h2><p>Product images in .jpeg format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Marketing Plan.doc</h2><p>Marketing plan in MS-Word format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Marketing Presentation.ppt</h2><p>Marketing presentation in PowerPoint format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Advertising Budget.xls</h2><p>Advertising budget in MS-Excel format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Tech Support Numbers.xls</h2><p>Tech support telephone numbers in MS-Excel format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Tech Support Manual.pdf</h2><p>Tech support manual in Adobe PDF format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Tech Support Training.mov</h2><p>Tech support training video in .mov format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Tech Support Updates.doc</h2><p>Latest tech support updates in MS-Word format.</p></a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-id="filesend_footer">
<h4>FileSend © 2013</h4>
</div>
<!--PopUp--> <div data-role="page" id="popup">
<ul data-role="listview"><li data-role="list-divider"><h1>Search</h1></li>
<li><a href="#everything"><h2>Everything</h2></a></li>
<li><a href="#sales"><h2>Sales</h2></a></li>
<li><a href="#marketing"><h2>Marketing</h2></a></li>
<li><a href="#techsupport"><h2>Tech Support</h2></a></li>
</ul>
</div><!--popup end-->
</div>
<div data-role="page" id="sales" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Sales</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
<a href="#popupMenu" data-role="button" data-icon="search" id="search" data-rel="popup" data-iconpos="notext">search</a>
<a href="#" data-role="button" data-icon="direction" data-iconpos="notext">share</a>
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext">add</a>
<div data-role="popup" id="popupMenu" data-theme="a">
<ul data-role="listview" data-inset="true" style="min-width:110px;" data-theme="a">
<li><a href="#everything">Everything</a></li>
<li><a href="#sales">Sales</a></li>
<li><a href="#marketing">Marketing</a></li>
<li><a href="#techsupport">Tech Support</a></li>
</ul>
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Sales Sheet.pdf</h2><p>Sales sheet in Adobe PDF format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Sales Training.mp4</h2><p>Sales training video in .mp4 format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Sales Forecast.xls</h2><p>Sales forecast in MS-Excel format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Product Images.jpeg</h2><p>Product images in .jpeg format. Can be used for sales or marketing.</p></a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-id="filesend_footer">
<h4>FileSend © 2013</h4>
</div>
</div>
<div data-role="page" id="marketing" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Marketing</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
<a href="#popupMenu" data-role="button" data-icon="search" id="search" data-rel="popup" data-iconpos="notext">search</a>
<a href="#" data-role="button" data-icon="direction" data-iconpos="notext">share</a>
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext">add</a>
<div data-role="popup" id="popupMenu" data-theme="a">
<ul data-role="listview" data-inset="true" style="min-width:110px;" data-theme="a">
<li><a href="#everything">Everything</a></li>
<li><a href="#sales">Sales</a></li>
<li><a href="#marketing">Marketing</a></li>
<li><a href="#techsupport">Tech Support</a></li>
</ul>
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Product Images.jpeg</h2><p>Product images in .jpeg format. Can be used for sales or marketing.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Marketing Plan.doc</h2><p>Marketing plan in MS-Word format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Marketing Presentation.ppt</h2><p>Marketing presentation in PowerPoint format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Advertising Budget.xls</h2><p>Advertising budget in MS-Excel format.</p></a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-id="filesend_footer">
<h4>FileSend © 2013</h4>
</div>
</div>
<div data-role="page" id="techsupport" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Tech Support</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
<a href="#popupMenu" data-role="button" data-icon="search" id="search" data-rel="popup" data-iconpos="notext">search</a>
<a href="#" data-role="button" data-icon="direction" data-iconpos="notext">share</a>
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext">add</a>
<div data-role="popup" id="popupMenu" data-theme="a">
<ul data-role="listview" data-inset="true" style="min-width:110px;" data-theme="a">
<li><a href="#everything">Everything</a></li>
<li><a href="#sales">Sales</a></li>
<li><a href="#marketing">Marketing</a></li>
<li><a href="#techsupport">Tech Support</a></li>
</ul>
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Tech Support Numbers.xls</h2><p>Tech support telephone numbers in MS-Excel format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Tech Support Manual.pdf</h2><p>Tech support manual in Adobe PDF format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Tech Support Training.mov</h2><p>Tech support training video in .mov format.</p></a></li>
<li><a href="#"><img src="images/filesend_doc_icon.png" /><h2>Tech Support Updates.doc</h2><p>Latest tech support updates in MS-Word format.</p></a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-id="filesend_footer">
<h4>FileSend © 2013</h4>
</div>
</div>
</body>
</html>
Hope what I explained made sense.
1
