Solved

events wont bind after using $.mobile.navigate

Posted on 2014-04-14
3
225 Views
Last Modified: 2014-06-09
When I use $.mobile.navigate to change the page, the page will load but the my custom script won't bind to the elements. If I refresh the page, the custom script will load and bind to the elements. I have a select element to choose between pages:

<select name="calc-Nav" id="calc-Nav">
    <option value="a.php">A</option>
    <option value="b.php">B</option>
    <option value="c.php">C</option>
</select>

Open in new window


This is the event bound to the select element:

$("#calc-Nav").on("change", function (e) {
    var opt = $("#calc-Nav option:selected").val();
    if (opt) {
        e.preventDefault();
        $.mobile.navigate(opt);
    }
});

Open in new window


Also, I link to my javascript files in the following order:

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Open in new window


Does anyone have any ideas how to make this work?

thanks.

Also, here is the template I used for each page.

<!DOCTYPE html>
<html>
<head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <div class="ui-field-contain">
                <select name="calc-Nav" id="calc-Nav">
                    <option value="Index.php">Home</option>
                    <option value="a.php">a</option>
                    <option value="b.php">b</option>
                    <option value="c.php">c</option>
                </select>
            </div>
         </div>
     <div data-role="main" class="ui-content">
         <div id="index">
             <h1> Form goes Here. </h1>
         </div>
     </div>
     <div data-role="footer">
         <h1>Footer</h1>
     </div>
 </div>
</body>
    <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script src="js/formulas.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</html>

Open in new window

0
Comment
Question by:spencerclark
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 40001836
Wild guess, but I've found it can sometimes make a difference.  Try putting all your libs first and all custom scripts later:

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

Open in new window


You want to be sure that by the time js/formulas.js is being parsed, that all the libs have already been parsed.  If js/formulas.js is parsed before mobile lib, and if you're referencing something in the mobile lib, you may be referencing something that doesn't yet exist.
0
 

Author Comment

by:spencerclark
ID: 40003845
Thanks, it's didn't make any changes, however, I did notice that the new URL has a # at the end.  What should I be used to prevent the # being appended at the end of the address?
0
 
LVL 3

Accepted Solution

by:
Anthony Pangilinan earned 500 total points
ID: 40009472
Have you tried delegation?

$("#parentSelector").on("change", "#calc-Nav", function (e) {
    var opt = $("#calc-Nav option:selected").val();
    if (opt) {
        e.preventDefault();
        $.mobile.navigate(opt);
    }
});

Open in new window

0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question