I have a couple files I'm working with that require AJAX Calls. I have dashboad.html that hosts the main interface. I then have a leads.php file that renders information from leadsData.php into a nice Bootstrap Table. leadsData.php returns a JSON file.
When I click "Prospective Student", the right stuff happens ... it renders leads.php in the main dashboard.html. The problem is that when leads.php is rendered in dashboard.html, it doesn't get the information from leadsData.php. After some thinking, this makes sense ... there isn't an AJAX Call that requires leads.php to fetch information from leadsData.php.
|dashboard.html| AJAX --> |leads.php| AJAX --> |leadsData.php|
So it seems as if the first AJAX happens, but the second one doesn't.
Here is my code below:
dashboard.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script>
</head>
<div ng-app="myApp" ng-controller="myController">
<div class="row">
<div class="col-lg-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Dashboard</a>
</li>
<li class="nav-item" ng-click = "LoadProspectiveStudents()">
<a class="nav-link active" href="#">Prospective Students</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-lg-10" style="border: solid;">
<div class="container">
<h1>MAIN CONTAINER</h1>
<p ng-bind-html = "myResponse"></p>
</div>
</div>
</div>
<body>
</body>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="dashboardController.js"></script>
</html>
leads.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<!-- <textarea name="name" ng-model = "test"></textarea> -->
<h1>Hi Mustafa</h1>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" ng-model= "test">
</div>
<table class="table">
<thead>
<tr>
<th ng-click = "sortBy('first_name')">First Name</th>
<th ng-click = "sortBy('last_name')">Last Name</th>
<th ng-click = "sortBy('communityCollege')">Community College</th>
<th ng-click = "sortBy('accountCreation')">Account Creation</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "user in myData | filter : test">
<td> {{user.first_name}} </td>
<td> {{user.last_name}} </td>
<td> {{user.communityCollege}} </td>
<td> {{user.accountCreation}}</td>
<td>
<button type="button" class="btn btn-primary">View More</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="./leadsController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
dashboardController.js
var app = angular.module('myApp', ['ngSanitize']);
app.controller('myController', function($scope, $http, $timeout) {
// $scope.myResponse = "Mustafa Hoda";
// $timeout(LoadProspectiveStudents(), 3000);
//Load Prospective Students
$scope.LoadProspectiveStudents = function(){
$http.get("leads.php")
.then(function(response) {
$scope.myResponse = response.data;
// $scope.renderedResponse = $parse($scope.myResponse);
// $scope.myResponse = "Mustafa Hoda";
}, function(response){
$scope.myResponse = "Uh oh! Something went wrong";
});
}
});
