?
Solved

events wont bind after using $.mobile.navigate

Posted on 2014-04-14
3
Medium Priority
?
232 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 2000 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

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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)
Suggested Courses

801 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