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

is the data you want to link to in `json.members`? eg. `dat.Url` or `dat.AccountNumber` If so can we see a sample of the data? — Shanimal, Jun 11 '14 at 19:18
You're actually asking us how to -> onclick -> send someone to another page to view more details about the customer... without saying us where's the page, what *Number variable* you're talking about... anything. Cause the answer is **Yes, it's possible.** But the real question is how you plan to do it. What's your idea and what have you prepared (pages, code) to accomplish the task. — Roko C. Buljan, Jun 11 '14 at 19:18
I'm a total newbie to this, bear with me! I understand how on click works - I just need to know how to best implement it so that when a user clicks on a customer from the drop down they are redirected to a page which brings up all the customer info. At the minute the data in json.members is purely their details. I need to draw data from another table onclick - to get their recent orders and pricing etc — , Jun 11 '14 at 19:23
dat.AcNo would be the value of the customers account number which I would like to use as a variable when moving to the next page in order to retrieve further information — , Jun 11 '14 at 19:35

score 1 · Answer 1 · edited May 23 '17 at 12:27

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

The link you have given doesn't appear to work, but thanks for the example - I shall see what I can do — , Jun 12 '14 at 09:20
This makes sense, but from my page existing.php (which gives the dropdown) on choosing an option the method you have given uses the value of the option selected to redirect the page. Therefore would I be right in thinking i have to have a page for every customer? Ideally I want to dynamically create the page from the select menu — , Jun 13 '14 at 16:56

score 0 · Answer 2 · answered Jun 11 '14 at 19:20

0

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.

answered Jun 11 '14 at 19:20

Sesertin

462
2
11

I used this method with document.location("customerDetails.php?AcNo=dat.AcNo"); but the url didn't display the value of dat.AcNo just "dat.AcNo" – Jun 11 '14 at 19:57
Than something is wrong with setting the parameters. Are you using a string, not an integer for the AcNo? – Sesertin Jun 11 '14 at 20:10
The account number would typically be something like MAU001 – Jun 12 '14 at 05:41
try to log the url to the console, or alert it before passing it to document.location. The problem should be around the string, not the document.location function. – Sesertin Jun 12 '14 at 14:01

Next step after populating drop down in JQuery Mobile

2 Answers2

HTML:

JavaScript:

Update: