Next step after populating drop down in JQuery Mobile
Question
I recently posted a really dumb question about why my dropdown list wouldn't populate in a phonegap JQuery App I was doing - I am so new to this I didn't realise that phonegap doesn't run php scripts!! Ok so I went away and did some proper research, stored my php script on a server and linked to it via AJAX and hey presto - Database connection, dropdown filled happy days!!
My next problem is that I want the user to select a customer from the newly populated drop down and when they click on the option - to be redirected to a page that draws information about the customer from my database.
Here is my code for populating the list which works absolutely fine.
$(document).ready(function(){
var url= "xx";
$.getJSON(url,function(json){
$.each(json.members,function(i,dat){
$("#msg").append("<option>" + dat.Name + "</option>");
});
});
});
Can I put some code into the option tag which will allow me to open a new page, set the customers account number as a variable and draw their details from my database?
I tried
$("#msg").append("<option value='dat.AcNo'>" + dat.Name + "</option>");
(The dat.AcNo is the retrieved account number) but when I put an onclick() linking to the next page nothing happens. I guess this is pretty elementary, but i'm not doing something right - help.......please?!
On clicking the option, the page gets redirected to a page customerDetails.html
2 answers
solution1
1 2014-06-11 20:04:25
Working example: http://jsfiddle.net/Gajotres/vds2U/84/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<select name="select-choice-0" id="select-choice-1" data-native-menu="false">
<option value="second">Second page</option>
<option value="third">Third page</option>
</select>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
<a href="#index" class="ui-btn-left">Back</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="third" data-theme="a" >
<div data-role="header">
<h3>
Third Page
</h3>
<a href="#index" class="ui-btn-left">Back</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
JavaScript:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('change','select',function() {
var nextpage = $(this).children('option:selected').attr('value');
$.mobile.changePage('#' + nextpage);
});
});
Update:
If you need to display selected data on other page then look at this answer , search for chapter: Data/Parameters manipulation between page transitions
solution2
0 2014-06-11 19:20:06
use this in the onclick function
document.location = //substitute this with the url you want
This will redirect to a new page. I guess you can pass the user id in a get parameter, and draw user info with some additional code on the target page.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.