CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
Pedantic
Pedantic

Reputation: 1378

<a href=""> is not executing script of target html page

I am using JQuery to create html pages. First.html Second.html

I have given one href link for second.html. when i click on that link, its showing the second page. Problem: 1. the script section of second.html is not executed. 2. when I see the view source of second.html, its showing me the contect of first.html

when I am directly calling the second.html its working fine, and all script code is executing properly. Please help me. I am not sure why it is happening like this.

Firstpage.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />

        <style>
            /* App custom styles */
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script src="js/jquery.mobile-1.1.0.js">
        </script>


    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-theme="a" data-role="header" data-position="fixed">           
                <h5>
                    Demo
                </h5>
            </div>


            <div data-role="content" align="center">
                <div>
                        <span id="device_used"></span><br/>
                       <a href="homepage.html" >
                        MyHCL
                    </a>
                </div>
            </div>
        </div>
        <script>
            var device;
            if( navigator.userAgent.match(/Android/i) )
                device= 'Android';
            else if( navigator.userAgent.match(/webOS/i) )
                device= 'webOS';
            else if ( navigator.userAgent.match(/iPhone/i) )
                device= 'iPhone';
            else if( navigator.userAgent.match(/iPad/i) )
                device= 'iPad';
            else if ( navigator.userAgent.match(/iPod/i) )
                device= 'iPod';
            else if( navigator.userAgent.match(/BlackBerry/i) )
                device= 'BlackBerry';
            else if( navigator.userAgent.match(/Windows/i) )
                device= 'Windows';
            else
                device=' not detected';

            document.getElementById("device_used").innerHTML=device;
          // alert(navigator.userAgent);
            var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/); 

            //alert(isMobile);
        </script>
    </body>
</html>

Secondpage.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
          <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />

        <style>
            /* App custom styles */
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script src="js/jquery.mobile-1.1.0.js">
        </script>
        <link rel="STYLESHEET" type="text/css" href="js/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="js/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="js/codebase/dhtmlxcommon.js"></script>
<script  src="js/codebase/dhtmlxgrid.js"></script>        
<script  src="js/codebase/dhtmlxgridcell.js"></script>  
<script>

        $(document).bind("pageinit", function() {
        alert("Script executing");
                    $('#HR_content').hide();
                    $('#Carrier_content').hide();
                    $('#Trasaction_content').hide();

                    $('#Trasaction').click(function() {
                            $('#HR_content').hide();

                            $('#Carrier_content').hide();

                            $('#Trasaction_content').show();
                    });

                    $('#Carrier').click(function() {
                        $('#HR_content').hide();

                        $('#Trasaction_content').hide();

                        $('#Carrier_content').show();
                    });



                    $('#HR').click(function() {

                            $('#Trasaction_content').hide();

                            $('#Carrier_content').hide();

                            $('#HR_content').show();

                    });


            var device;
            if( navigator.userAgent.match(/Android/i) )
                device= 'Android';
            else if( navigator.userAgent.match(/webOS/i) )
                device= 'webOS';
            else if ( navigator.userAgent.match(/iPhone/i) )
                device= 'iPhone';
            else if( navigator.userAgent.match(/iPad/i) )
                device= 'iPad';
            else if ( navigator.userAgent.match(/iPod/i) )
                device= 'iPod';
            else if( navigator.userAgent.match(/BlackBerry/i) )
                device= 'BlackBerry';
            else if( navigator.userAgent.match(/Windows/i) )
                device= 'Windows';


 if(device == 'Windows')
 {
      $("#Android").hide();    
      $("#iPhone").hide();
      $("#iPad").hide();    
 }

 if(device == 'Android')
 {
      $("#Windows").hide();    
      $("#iPhone").hide();
      $("#iPad").hide();    
 }

 if(device == 'iPhone')
 {
      $("#Android").hide();    
      $("#Windows").hide();
      $("#iPad").hide();    
 }

 if(device == 'iPad')
 {
      $("#Android").hide();    
      $("#Windows").hide();
      $("#iPhone").hide();  
 }

});
        </script>
    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-theme="a" data-role="header">
                <h3>
                    Demo
                </h3>
                </div>

                <br>
                <div data-role="navbar" data-iconpos="left">
                    <ul>
                        <li id="Trasaction">
                            <a href="#page1" data-theme="" data-icon="" >
                                Trasaction
                            </a>
                        </li>
                        <li id="Carrier">
                            <a href="#page1" data-theme="" data-icon="">
                                Carrier
                            </a>
                        </li>
                        <li id="HR">
                            <a href="#page1" data-theme="" data-icon="">
                                HR
                            </a>
                        </li>
                    </ul>
                </div>

            <div data-role="content" id="Trasaction_content" >
                <h3>
                    <div id="My_Approvals"> <a href="homepage.html" data-transition="pop">My Approvals</a></div>
                </h3>
                <h3>
                   <div id="ECS" > <a href="ECS.html" data-transition="pop">Expense Claim System</a></div>
                </h3>
                <h3>
                    <div id="Geo_LMS"><a href="homepage.html" data-transition="pop">Geo LMS</a></div>
                </h3>
                <h3>
                   <div id="TAS"> <a href="homepage.html" data-transition="pop">My Travel(TAS)</a></div>
                </h3>
                <h3>
                   <div id="Windows"> <a href="homepage.html" data-transition="pop">Windows</a></div>
                </h3>
                <h3>
                   <div id="iPad"> <a href="homepage.html" data-transition="pop">IPAD</a></div>
                </h3>
                <h3>
                   <div id="Android"> <a href="homepage.html" data-transition="pop">Android</a></div>
                </h3>
                <h3>
                   <div id="iPhone"> <a href="homepage.html" data-transition="pop">iPhone</a></div>
                </h3>
            </div>

              <div data-role="content" id="Carrier_content">
                <h3>
                    <a href="homepage.html" data-transition="pop">Appraisal Review(i4Excel)</a>
                </h3>
                <h3>
                   <a href="homepage.html" data-transition="pop"> My Profile (ESS)</a>
                </h3>
                <h3>
                   <a href="homepage.html" data-transition="pop"> Performance Appraisal (I4EXCEL)</a>
                </h3>
                <h3>
                    <a href="homepage.html" data-transition="pop">My Skill Profile (SPS)</a>
                </h3>
            </div>

              <div data-role="content" id="HR_content">
                <h3>
                    <a href="homepage.html" data-transition="pop">Payroll Input System</a>
                </h3>
                <h3>
                    <a href="homepage.html" data-transition="pop">Smart Recruit</a>
                </h3>
                <h3>
                   <a href="homepage.html" data-transition="pop"> Transfer Management System</a>
                </h3>
                <h3>
                   <a href="homepage.html" data-transition="pop"> Vehicle Declaration</a>
                </h3>
            </div>


        </div>

    </body>
</html>

Upvotes: 0

Views: 879

Answers (1)

strah
strah

Reputation: 6722

if you are using jQuery mobile you should not use $(document).ready() use $(document).bind('pageinit') instead.

$(document).raedy() event is fired only once when the first page is loaded. Any subsequent pages are loaded using AJAX calls, hence no document.ready event.

Upvotes: 1

Related Questions