CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
m4g4bu
m4g4bu

Reputation: 455

Cannot access to contact page in jquery mobile

I've found a strange behaviour that happens to my jquery mobile app. I don't know what happens because I put the default structure in the other page and I couldn't access to them. I made a little tests and the problem is here:

<div id="ctn">
        <h3>Find it Us</h3> 
        <section id="gmap">
            <script>
                new GMaps({
                  div: '#map',
                  lat: -34.6117611,
                  lng: -58.4418745
                });

            </script>
        </section>       
        <section id="contact-form">
            <h3>Contact Us</h3>

        </section>
    </div>

When I made a click on the navigation bar ( contact ):

<ul data-role="listview" data-inset="true">    
    <li data-icon="false"><a href="index.html" data-transition="flip">Home</a></li>
    <li data-icon="false"><a href="nosotros.html" data-transition="flip">About US</a></li>
    <li data-icon="false"><a href="servicios.html" data-transition="flip">Services</a></li>
    <li data-icon="false"><a href="portfolio.html" data-transition="flip">Portfolio</a></li>
    **<li data-icon="false"><a href="contacto.html" data-transition="flip">Contact</a></li>**
</ul>

The page shows the preload and the app dies

enter image description here

The entire code of the page is below:

 <!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" />
 <link rel="stylesheet" href="template/css/mobile.css" />
 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script src="https://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
 <script src="https://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js"></script>
 <title>xa - Contact</title>
 </head>
 <body>
 <div data-role="page" id="contact">
    <header id="header" data-role="header" data-position="fixed">
        <a href="index.html" class="ui-btn ui-icon-carat-l ui-nodisc-icon ui-btn-icon-notext" data-transition="slide">Search</a>    
    <div id="branding">
        <h1>xa</h1>
    </div>
    <a href="#" class="ui-btn ui-icon-home ui-nodisc-icon ui-btn-icon-notext">Home Button</a>       
</header>
 <div data-role="content" id="index" class="ui-content">
    <div id="nheader">
        <h3>Contact</h3>
    </div>
    <div id="ctn">
        <h3>Find it US</h3> 
        <section id="gmap">
            <script>
                new GMaps({
                  div: '#map',
                  lat: -34.6117611,
                  lng: -58.4418745
                });

            </script>
        </section>       
        <section id="Contact-form">
            <h3>Contact Us</h3>

        </section>
    </div>
    <footer data-role="footer" data-position="fixed">
        <p>Copyright 2014 xa.<br /> All rights reserved</p>
    </footer>
</div>
 </div> 
 </body>
 </html>

I would appreciate your help. Thanks!

Upvotes: 0

Views: 97

Answers (1)

Koti Panga
Koti Panga

Reputation: 3720

There are some script errors due to missing google map api and according to your markup and script the page should have one div with id="map"

Here is the js-bin : http://jsbin.com/wosuta/1/edit?html,output

<!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" />
 <link rel="stylesheet" href="template/css/mobile.css" />
 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script src="https://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
      <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
 <script src="https://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js"></script>

 <title>xa - Contact</title>
 </head>
 <body>
   <div data-role="page" id="contact">
    <header id="header" data-role="header" data-position="fixed">
        <a href="index.html" class="ui-btn ui-icon-carat-l ui-nodisc-icon ui-btn-icon-notext" data-transition="slide">Search</a>    
    <div id="branding">
        <h1>xa</h1>
    </div>
    <a href="#" class="ui-btn ui-icon-home ui-nodisc-icon ui-btn-icon-notext">Home Button</a>       
</header>
 <div data-role="content" id="index" class="ui-content">
    <div id="nheader">
        <h3>Contact</h3>
    </div>
    <div id="ctn">
        <h3>Find it US</h3> 
        <div id="map">Test Map Here</div>
        <section id="gmap">
          <script>
                new GMaps({
                  div: '#map',
                  lat: -34.6117611,
                  lng: -58.4418745
                });
                $("#map").width("99%").height("20em");
            </script>
        </section>       
        <section id="Contact-form">
            <h3>Contact Us</h3>

        </section>
    </div>
    <footer data-role="footer" data-position="fixed">
        <p>Copyright 2014 xa.<br /> All rights reserved</p>
    </footer>
</div>
 </div> 
 </body>
 </html>

Upvotes: 1

Related Questions