Solved

events wont bind after using $.mobile.navigate

Posted on 2014-04-14
3
216 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
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

863 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

Need Help in Real-Time?

Connect with top rated Experts

27 Experts available now in Live!

Get 1:1 Help Now