CODEWITHSUNDEEP
htmljquery-mobile
Srikanth Chilukuri
Srikanth Chilukuri

Reputation: 573

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

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>

Upvotes: 2

Views: 2018

Answers (1)

devnull69
devnull69

Reputation: 16544

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;
    });
});

Upvotes: 1

Related Questions