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

Question

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?

Any messages in the console? Does just the angular thing not work, or does the script really not execute at all (try by placing a log message or debugger breakpoint in there)? — Bergi
– Bergi, Commented Oct 3, 2019 at 18:00
@Bergi Nothing its literally a ghost. I have no idea how this is even possible..? — stack flow
– stack flow, Commented Oct 3, 2019 at 18:01

SlimPickens · Accepted Answer · 2019-10-03 18:04:25Z

1

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.

answered Oct 3, 2019 at 18:04

SlimPickens

611 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

stack flow Over a year ago

i figured it out this part <body ng-app="Batch_Visualiser_chart" ng-controller="chartController"> prevented it from running no idea why... but it works! thank you.

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

AngularJS ng-app Directive API Reference

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related