List Item and Data Transfer

Question

I am creating a webpage using jQuery mobile.i am new to this technology. I want to navigate to another page by list item click. while going to second page i want to pass the text value from list item and list item id for displaying it. Can anyone guide me?

My HTML code is:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

    <title>Demo Page</title>

    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>

    function onDeviceReady() {}
    document.addEventListener("deviceready", onDeviceReady, false);

    function Button_onclick() {

    for(i=0; i < 3; i++){
            $("#numbers").append('<li id="'+i+'" ><a href="#page2#">' +i+'</a></li>' );
        $('#numbers').listview('refresh');
    }
}
</script>

</head>

<body>

    <div >
        <input id="Click_Button" type="button" value="Submit" onclick="Button_onclick()" />
    </div>

    <div id="divList" data-role="content">
        <ul id="numbers" data-role="listview" data-inset="true"> </ul>
    </div>

    </div>
    <div data-role="page" id="page2">

    <div data-role="header">
    <h1>Page Two</h1>
        </div>

        <div data-role="content">
    <p>Welcome to page 2.</p>
    </div>

    </div>

</body>

</html>

you can read more about passing values here http://stackoverflow.com/questions/10671092/passing-data-between-pages-with-jquery-mobile — Taifun, Nov 01 '12 at 14:41

score 1 · Accepted Answer · answered Feb 03 '13 at 16:16

This must works. I wish it will be useful.

index.html:

<body>
<div id="page1" data-role="page" data-theme="a" data-rockncoder-jspage="page1">
    <header data-role="header">
        <h1>Page 1</h1>
    </header>
    <section data-role="content" id="pages_list"></section>
    <div>
        <button id="send_btn">SEND</button>
    </div>
</div>

<div id="page2" data-role="page" data-theme="b" data-rockncoder-jspage="page2">
    <header data-role="header">
        <h1>Page 2</h1>
    </header>
    <div id="p2_id_selected"></div>
    <div id="p2_text_selected"></div>
</div>

<div id="page3" data-role="page" data-theme="b" data-rockncoder-jspage="page3">
    <header data-role="header">
        <h1>Page 3</h1>
    </header>
    <div id="p3_id_selected"></div>
    <div id="p3_text_selected"></div>
</div>

<script src="scripts/hideAddressBar.js" type="text/javascript"></script>
<script src="scripts/app.js" type="text/javascript"></script>

main.js:

num_pages = 3;
page_selected = 0;
text_selected = "";

$(document).delegate('.ui-page', 'pageshow', function () {
    loadList();
});

function loadList()
{   
    $("#pages_list").append("<ul><fieldset data-role='controlgroup' id='radios'></fieldset></ul>");
    $("#radios").empty();
    for (var i = 0; i < num_pages; i++)
    {
        var id = "page_id"+(i+1);
        $("#radios").append("<input type='radio' name='choice' data-theme='c' id='" + id + "' />");
        $("#radios").append("<label for='" + id + "'>"+"Page "+(i+1)+"</label>");
        $("#" + id).checkboxradio();
    }
    $("#radios").controlgroup("refresh"); 
};

$(function(){
    $( "#send_btn" ).click(function(e)
    {
        if( $('#page_id2').is(':checked') )
        {
            page_selected = 2;
            text_selected = $('input[name=choice]:checked + label').text();
            $.mobile.changePage( "#page2", {
                transition: "slide",
                role: "page",
                reverse: false,
            });
        }else if( $('#page_id3').is(':checked') )
        {
            page_selected = 3;
            text_selected = $('input[name=choice]:checked + label').text();
            $.mobile.changePage( "#page3", {
                transition: "slide",
                role: "page",
                reverse: false,
            });
        }
    });
});

$("#page2").live('pageshow', function() {
   $("#p2_id_selected").text(page_selected);
   $("#p2_text_selected").text(text_selected);
});

$("#page3").live('pageshow', function() {
   $("#p3_id_selected").text(page_selected);
   $("#p3_text_selected").text(text_selected);
});

List Item and Data Transfer

1 Answers1