Home/ Questions/Q 5964115
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T19:22:25+00:00

I am very new to jquery-mobile. Could someone please help with the following problem

  • 0

I am very new to jquery-mobile. Could someone please help with the following problem regarding a multi-page app?

My app has two pages, split into two different files – index2_1.html and index2_2.html given below. When I use $.mobile.changePage(“index2_2.html”, “slide”); to change to the second page, none of the events in the second page get bound. Actually, none of the Javascript on the second page gets executed. However, if move to the second page using the link 

<a href="index2_2.html" target="_blank">Link to 2nd page that works1</a>

it works fine.

Could someone please tell me what I am doing wrong here?

Thanks,
Dilip

index2_1.html

<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

<script>
    alert("Trying to register events on page 1.");
    $(function() {
        $(".category_item").bind("tap", function(event) {
            selected_category = $(this).text();
            $("#selected_category").text(selected_category);
            $.mobile.changePage("index2_2.html", "slide");
        });
    });
</script>
</head>
<body> 
<div data-role="page" id="select_category">
<div data-role="header" data-backbtn="false">
    <h1>Select Category</h1>
</div><!-- /header -->

<div data-role="content">
    <ul data-role="listview" data-theme="g">
        <li class="category_item"><a href="">Grocery</a></li>
        <li class="category_item"><a href="">Car</a></li>
        <li class="category_item"><a href="">Recreation</a></li>
        <li class="category_item"><a href="">Health</a></li>
    </ul>
    <div>
    <a href="index2_2.html" target="_blank">Link to 2nd page that works1</a>
    </div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

index2_2.html

<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

<script>
    alert("Trying to register events on page 2.");
    $(function() {
        $(".description_item").bind("tap", function(event) {
            selected_description = $(this).text();
            $("#expense_description").val(selected_description); 
            description = $("#expense_description").val();
            $.mobile.changePage($("#enter_amount"), "slide");
        });
    });

</script>

</head>
<body> 

<div data-role="page" id="enter_description">

<div data-role="header" data-backbtn="false">
    <h1>Enter/Select Description</h1>
</div><!-- /header -->

<div data-role="content">
    <label for="name">Description:</label>
    <input type="text" name="expense_description" id="expense_description" value=""  />
    <a id="n_button" href="#" data-role="button" data-theme="b" data-inline="true" >Next</a>

    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
        <li data-role="list-divider">Recent Expenses</li>
        <li><a class="description_item" href="">Safeway</a></li>
        <li><a class="description_item" href="">Gas</a></li>
        <li><a class="description_item" href="">Cell phone bill</a></li>
        <li><a class="description_item" href="">rent</a></li>
    </ul>

     <div data-role="controlgroup" data-type="horizontal">
        <center>
            <a class="cancel_button" href="index.html" data-role="button" rel="external">Cancel</a>
        </center>
    </div>

</div><!-- /content -->
</div><!-- /page -->

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In contrast to Pravat Maskey’s answer, it’s possible (and dependent on the use case also intended) to have seperate HTML files. Just imagine a huge application with lots of pages, it would be counterintuitive to load everything up front.

    I think the problem you are having is the placement of the JavaScript code. I would try including the page specific code (the script tag and everything it contains) in the page section, just above the closing div of the page. For more details, take a look at this guide: http://jqx.ca/nav/, and check the section “Scripts in jQuery Mobile Pages”.

    By having the tag in the body, your code is executed once when the sub-page is created for the first time. For your case this should work, as you are binding an event to a DOM node, which only needs to run once.

    You could also try registering your code with the pagebeforeshow event if you want to run it everytime the page is shown.

    • 0