I'm changing a Spring app from Thymeleaf to AngularJS (learning as I go) and this Ajax call that was previously working is now not even registering on in Chrome XHR. I don't have a lot of experience with these front-end frameworks so I'm not sure what changed.
index.html
<!doctype html>
<html ng-app="wishingWell">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/normalize.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="/javascript/app.js"></script>
<title>Wishing Well</title>
</head>
<body>
<nav class="nav">
<ul class="navback">
<li>
<a class="active" href="#/">The Well</a>
</li>
<li>
<a href="#/profile" >Profile</a>
</li>
<li>
<a href="#/sign-up">Sign Up</a>
</li>
<li>
<a href="#/login">Log In</a>
</li>
<li>
<a href="#/logout">Sign Out</a>
</li>
</ul>
</nav>
<div ng-view></div>
<script>
jQuery(document).ready(function($) {
$("#wish-form").submit(function(event) {
// Disble the search button
enableSearchButton(false);
// Prevent the form from submitting via the browser.
event.preventDefault();
$('#feedback').hide();
searchViaAjax();
});
});
function searchViaAjax() {
var search = {}
search["wish"] = $("#wish").val();
$.ajax({
type : "POST",
contentType : "application/json",
url : "/addwish",
data : JSON.stringify(search),
dataType : 'json',
timeout : 100000,
success : function(data) {
console.log("SUCCESS: ", data);
display(data);
},
error : function(e) {
console.log("ERROR: ", e);
display(e);
},
done : function(e) {
console.log("DONE");
enableSearchButton(true);
}
});
}
function enableSearchButton(flag) {
$("#btn-submit").prop("disabled", flag);
}
function display(data) {
var jsonString = JSON.stringify(data);
var json = JSON.parse(jsonString);
$('#feedback').html(json.msg);
$('#feedback').show();
}
$('#feedback').hover(function(){
$('#feedback').fadeOut(300, function(){
$(this).hide();
});
});
</script>
</body>
</html>
app.js
var wishingWell = angular.module('wishingWell', [ 'ngRoute' ]);
wishingWell.config(function($routeProvider, $httpProvider) {
$routeProvider.when('/', {
templateUrl : 'home.html',
controller : 'home',
controllerAs: 'controller'
}).when('/login', {
templateUrl : 'login.html',
controller : 'navigation',
controllerAs: 'controller'
}).otherwise('/');
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
});
wishingWell.controller('navigation',
function($rootScope, $http, $location) {
var self = this
var authenticate = function(credentials, callback) {
var headers = credentials ? {authorization : "Basic "
+ btoa(credentials.username + ":" + credentials.password)
} : {};
$http.get('user', {headers : headers}).then(function(response) {
if (response.data.name) {
$rootScope.authenticated = true;
} else {
$rootScope.authenticated = false;
}
callback && callback();
}, function() {
$rootScope.authenticated = false;
callback && callback();
});
}
authenticate();
self.credentials = {};
self.login = function() {
authenticate(self.credentials, function() {
if ($rootScope.authenticated) {
$location.path("/");
self.error = false;
} else {
$location.path("/login");
self.error = true;
}
});
};
});
My guess is that something within AngularJS is overriding jQuery, but I can't figure out what. Most of the questions about this I've seen relate to using jQuery Ajax within an AngularJS controller, but it seems like it should work outside. Also, the form data being submitted via Ajax gets put into the ng-view.
