I am getting an error on my ajax request but only if I call it from document.ready.
If I run the below script all works OK but username has been manually entered and not coming from the DOM
getProfile("steve8428");
function getProfile(userName) {
var data = { username: userName };
var dataSend = JSON.stringify(data);
console.log(dataSend);
$.ajax({
url: "fetchProfile.php",
type: "POST",
data: dataSend,
dataType: "json",
success: function(data) {
console.log(data);
}
});
}
This would indicate AjaX and jQuery including my php are all working ok.
But I want to get the username variable from a HTML element which is created on my main page using php. So I tried the following and here is where I get the error "jquery-3.2.1.min.js:2 Uncaught TypeError: $.ajax is not a function"
$(document).ready(function() {
var userName = $("#username").html();
getProfile(userName);
});
function getProfile(userName) {
var data = { username: userName };
var dataSend = JSON.stringify(data);
console.log(dataSend);
$.ajax({
url: "fetchProfile.php",
type: "POST",
data: dataSend,
dataType: "json",
success: function(data) {
console.log(data);
}
});
}
To give some back ground the variable username is coming from a php file which is generated from a php database request which is why I am doing the document.ready to ensure the username s available before making the Ajax request.
Am i missing something or do I need to look at a better way to do this