CODEWITHSUNDEEP
javascripthtml
stack flow
stack flow

Reputation: 75

Script tag is not executing in HTML file but does execute in new file?

I have the following script tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js">
</script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        $http({
            method : "GET",
            url : "http://localhost:5050/get_time"
        }).then(function successCallBack(response) {
            $scope.jsonResponse = response.data;
        }, function errorCallBack(response) {
            $scope.jsonResponse = "failed"
        });
    });
</script>
<div ng-app="myApp" ng-controller="myCtrl">

    <p>Response of JSON Below:</p>
    <h1>{{jsonResponse}} hi</h1>

</div>

When I run this in a completely new html file it works! and returns a json string and prints it like it says in {{jsonResponse}}

Now this is the HTML file that it DOESN'T work in.

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <title>Batch Program Visualization - angular and d3</title>
    <link rel="stylesheet" href="css/styles_showChart.css">
    <!--  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> -->
</head>

<body ng-app="Batch_Visualiser_chart" ng-controller="chartController">
<div class="container img.wide">
    <img src="css/banner.jpg" />
</div>

<div class="tab">
    <button class="tablinks" onclick="openTab(event, 'TrainMap')">Train Map</button>
    <button id="defaultOpen" class="tablinks" onclick="openTab(event, 'ExecutiveDashboard')">Executive Dashboard</button>
    <button id="ProcDet" class="tablinks" onclick="openTab(event, 'ProcessDetails')">Process Details</button>
</div>
<div id="ExecutiveDashboard" class="tabcontent">
    <div id="parent">
        <div id="flowDiagram">
            <svg id="svgSumm" width="2500" height="500" left="20" right="20" top="20" bottom="50" style="background-color: #515b5f;border: 0px solid Black; display: flex "></svg>
            <div id="chartsContainer"></div>
        </div>
        <div id="halfDiv" style="word-wrap: break-word">
            <div class="column1" style="word-wrap: break-word">
                <!--Alternate way of loading html files, if iframe is not to be used -->
                <!--script>
                 document.getElementById("details").innerHTML='<object type="text/html" data="showOverallStatus.html"></object>';
               </script-->
                <iframe src="showCategoryDetail.html" style="background-color: #343434; word-wrap: break-word" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
            <div class="column2">
                <iframe src="showImpact.html" style="background-color: #343434" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
            <div class="column3">
                <iframe src="showMonthlyRunChart.html" width="410" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
            <div class="column4">
                <iframe src="showOverallSLA.html" style="background-color: #343434" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
        </div>
    </div>
</div>

<div id="ProcessDetails" class="tabcontent">
    <div id="parent2">
        <div id="flowDiagram2">
            <iframe id="showOtherTree" src="showTree.html" width="1900" height="450" frameborder="1" onload="" allowtransparency="false"></iframe>
        </div>
        <div id="chartsContainer"></div>


        <div id="halfDiv2">
            <div class="column">
                <iframe id="milestoneDetail" src="showMilestoneDetail.html" style="background-color: #343434" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
            <div class="column">
                <iframe id="milestoneRun" src="showTable.html" style="background-color: #343434" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
            <div class="column">
                <iframe id="milestoneJobs" src="showJobStatus.html" style="background-color: #343434" width="400" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
            <div class="column">
                <iframe id="childJobs" src="showChildJobs.html" style="background-color: #343434" width="420" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
        </div>
    </div>
</div>

<div id="TrainMap" class="tabcontent">
    <div id="parent3">
        <div id="train_map">
            <iframe src="showFullTree.html" style="width: 100%;height:80%; background-color: #515b5f;"></iframe>
        </div>
    </div>
</div>





<work-history></work-history>
<script src="lib/jquery-1.11.3.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/d3.min.js"></script>
<script src = 'apps/showSummary.js'></script>

<script>
    document.getElementById("defaultOpen").click();

    function openTab(evt, tabName) {
        // Declare all variables
        var i, tabcontent, tablinks;
        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        // Get all elements with class="tablinks" and remove the class "active"
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        // Show the current tab, and add an "active" class to the button that opened the tab
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js">
</script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        $http({
            method : "GET",
            url : "http://localhost:5050/get_time"
        }).then(function successCallBack(response) {
            $scope.jsonResponse = response.data;
        }, function errorCallBack(response) {
            $scope.jsonResponse = "failed"
        });
    });
</script>
<div ng-app="myApp" ng-controller="myCtrl">

    <p>Response of JSON Below:</p>
    <h1>{{jsonResponse}} hi</h1>

</div>



</div>

</body>
</html>

No matter where I throw the script in there it DOES not execute, but a brand new stand alone HTML file it works perfectly fine.

I know it doesn't execute because I put alerts() everywhere and it doesn't even step into the code its as if it doesn't exist?

any ideas?

Upvotes: 3

Views: 470

Answers (2)

georgeawg
georgeawg

Reputation: 48968

The second app is not bootstrapping because only one ng-app directive is allowed. Subsequent ng-app directives are ignored.

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <title>Batch Program Visualization - angular and d3</title>
    <link rel="stylesheet" href="css/styles_showChart.css">
    <!--  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> -->
</head>

<body ng-app="Batch_Visualiser_chart" ng-controller="chartController">
<div class="container img.wide">
    <img src="css/banner.jpg" />
</div>

<!-- ...  -->

<!-- ... -->

<div ng-app="myApp" ng-controller="myCtrl">

    <p>Response of JSON Below:</p>
    <h1>{{jsonResponse}} hi</h1>

</div>
    
</div>

</body>
</html>

From the Docs:

There are a few things to keep in mind when using ngApp:

  • only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.

For more information, see

Upvotes: 1

SlimPickens
SlimPickens

Reputation: 61

Get rid of this part and try it (I never trust commented-out scripts):

            <!--script>
             document.getElementById("details").innerHTML='<object type="text/html" data="showOverallStatus.html"></object>';
           </script-->

If that doesn't work, remove the iframes one at a time.

Also it looks like you're including angular.min.js and then reincluding a possible different version. Try removing your cdn reference to angular.js just above the code you've added.

Upvotes: 1

Related Questions