1

I have a site that works fine when loaded directly (f.e. by calling its URL), however, when I get to the site through a slider transition:

<li><a href="html/mySite.html" data-transition="slide">mySite</a></li>

it seems as if it would not load a .js file which is just declared within head as:

<script type="text/javascript" src="../../myJS.js"></script>

I am new to jQuery mobile, and jQuery, and HTML5, and JS. So... can someone explain to me what is the difference between a URL call and a jQuery mobile transtition regarding to the loading of the page?

(btw. I am using it to develop an Android-App)

Daniel
  • 20,420
  • 10
  • 92
  • 149

1 Answers1

6

In case of multiple HTML files, HEAD is only loaded in the first HTML file. In other files, only a BODY content is loaded. This is because AJAX is used to load other pages into the DOM. Because there's already a HEAD content inside an original DOM only a body will be loaded from the other pages.

This can be prevented if you turn AJAX loading completely, or if you initialize all of your js fils inside a first HTML file.

If you want to find out more take a look at my other ANSWER with several other solutions, or find it HERE.

Example 1: Correct way

HTML 1 :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> 
    <script>
              $(document).on('pagebeforeshow', '#index', function(){       
                        alert('Page One');
                });
                
                $(document).on('pagebeforeshow', '#second', function(){       
                        alert('Page Two');                  
                });         
    </script>      
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="second.html" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

HTML 2 :

    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="index.html" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>

Example 2: Incorrect way

HTML 1 :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> 
    <script>
              $(document).on('pagebeforeshow', '#index', function(){       
                        alert('Page One');
                });     
    </script>      
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="second.html" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

HTML 2 :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> 
        <script>
                $(document).on('pagebeforeshow', '#second', function(){       
                        alert('Page Two');                  
                }); 
        </script>         
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
</head>
<body>    
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="index.html" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>
Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Will the Head of the first HTML be used for all other pages? can I just load my JS at the first site? – Daniel Mar 15 '13 at 11:29
  • First HTMl head is going to be used for all other pages. – Gajotres Mar 15 '13 at 11:30
  • Unless you turn ajax off, in that case every page change will load tha page normally but you will not have transition effects. So initialize all of your js files inside a first HTML HEAD. You can even test it if you create a small example. – Gajotres Mar 15 '13 at 11:31
  • why is there `` on page 2 if it will not be loaded? or are there some exceptions? – Daniel Mar 15 '13 at 12:25
  • It is there just to show you the difference between example 1 and example 2. I will remove it, and everything will still work correctly. – Gajotres Mar 15 '13 at 12:28
  • It seems to at least read the meta tags. If I do not add `` I get unknown symbols (I am using 'ü') – Daniel Mar 15 '13 at 13:48