Getting Jquery mobile script error(Error Loading Page) while clicking on URL or Href?

Question

I have created a sample web application using jQuery Mobile.

I have created two <div>s; one contains href and another contains the content. When I click on HREF It showing jquery-mobile script Error as like below:

Error Loading Page

Can anybody see what might be causing this error?

    <html> <head runat="server">    <title>How to expand collapse div layer using jQuery</title>
           <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.css" />    
   <script language="javascript">
       $(document).ready(function () {
       var $pages = $('#pages > *').hide(); 
           $('#content a').click(function() {
                $pages.hide();
                $($(this).attr('href') ).show();
            });
       });
   </script>
</head>
<body>  
   <div data-role="page">
   <div data-role="header" class='header_align'>Bristol-Myers Squibb</div>

       <h2>
           How to expand collapse div layer using jQuery</h2>
       <div id="toggle">
           <div id="heading">Heading</div>
           <div id="content">
              <ul>
                 <li><a href="#page-1">Page1</a></li>
                 <li><a href="#page-2">Page2</a></li>
                 <li><a href="#page-3">Page3</a></li>
              </ul>
           </div>
       </div>
       <div id="pages">
            <div id="page-1">Page 1 Content</div>
            <div id="page-2">Page 2 Content</div>
            <div id="page-3">Page 3 Content</div>
       </div>
     </div>    
</body>
</html>

I'd also update to jQuery Mobile 1.0 final which came out a few weeks ago. It's a lot more stable, faster, and reliable than the alpha version you're using. — calvinf
– calvinf, Commented Dec 20, 2011 at 8:11

devnull69 · Accepted Answer · 2011-12-19 14:37:10Z

1

The jQuery mobile default behavior of a link with a named anchor is to jump to a page (data-role="page") with the respective id. But there is no such page for page-1, page-2 or page-3 so the error occurs.

Try this

$(document).ready(function () {
    var $pages = $('#pages > *').hide(); 
    $('#content a').click(function() {
        $pages.hide();
        $($(this).attr('href') ).show();
        return false;
    });
});

edited Dec 19, 2011 at 14:37

answered Dec 19, 2011 at 11:43

devnull69

16.6k9 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting Jquery mobile script error(Error Loading Page) while clicking on URL or Href?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related