CODEWITHSUNDEEP
javascriptjquery-mobile
user3281201
user3281201

Reputation:

Next step after populating drop down in JQuery Mobile

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

Upvotes: 1

Views: 249

Answers (2)

Gajotres
Gajotres

Reputation: 57309

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

Upvotes: 1

Sesertin
Sesertin

Reputation: 462

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.

Upvotes: 0

Related Questions