I have the following code (remove lot of code for brevity purpose) in my index.html.
When I remove the Ajax call from the getConcepts function, I don’t get any error and all the console logs statements shows up in the console.
Howver, when I try to call the getConcepts function with Ajax call, I keep getting
ReferenceError: getConcepts is not defined index.html:1:1 Why?
<script type="text/javascript">
function getConcepts() {
console.log("Title of Research Project inside index.html");
var project_title = $("#projectTitleId").val();
console.log(project_title);
console.log("Description of Research Project inside index.html");
var project_description = $("#descriptionId").val();
console.log(project_description);
var intendedUse = sessionStorage.getItem("selectedIntendedUse");
console.log("Intended Use inside index.html");
console.log(intendedUse);
$.ajax({
type: "Post",
url: "http://localhost:8080/Datagetter/datagetter",
data:{
p_in_user_id: 'JACK',
p_in_user_application:'MyAPP',
personnel_id='12345'
},
async: true,
cache: false,
success: function(data) {
console.log("Inside success of datagetter endpoint");
console.log(data);
};
});
}
else {
}
}
}
</script>
</head>
<body>
<div id="wrapper">
<button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
</div>
<!-- /#wrapper -->
</script>
</body>
</html>
Edit - Adding actual code
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" >
<link rel="stylesheet" href="js/style.css"/>
<link href="js/jquery.growl.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<script type="text/javascript">
function getConcepts() {
alert ("yo");
/*$.ajax({
type: "Post",
url: "http://localhost:8080/Datagetter/datagetter",
data:{
p_in_user_id: 'JACK',
p_in_user_application:'MyAPP',
personnel_id='12345'
},
async: true,
cache: false,
success: function(data) {
console.log("Inside success of datagetter endpoint");
console.log(data);
};
});*/
}
</script>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" >
<img src="images/test.png" width = "210px" height = "50px" >
</a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" ></a>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row" id="main" >
<div class="col-sm-12 col-md-12 well " style="padding:0px;" id="content">
<h3>Data Getterr!</h3>
</div>
<!-- BEGIN Bootstrap form testing-->
<form class="form-horizontal" id="validateForm" method="POST" onsubmit="return false">
<div class="row">
<div class="col-md-offset-1 col-md-4">
<!--<div class="form-group">
<label class="control-label">Select your desk sets:</label>
<select id = "deskSetlist" name="deskSets" class="form-control" >
<option value=" " >Please select desk set</option>
<option value=" " >test1</option>
<option value=" " >test2</option>
</select>
</div>-->
<div class="form-group">
<label class="control-label">Description of research project:</label>
<textarea class="form-control" id = "descriptionId"name="descriptionOfResearchProject" placeholder="Enter your description here...."></textarea>
</div>
</div>
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Title of your research project:</label>
<input id = "projectTitleId" name="titleOfResearchProject" placeholder="Enter your title here...." class="form-control" type="text">
</div>
<div class="form-group">
<label class="control-label">Intended use:</label>
<select id="intendedUseList" name="intendedUse" class="form-control" >
<option value=" " >Please select one</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
</div>
<!--<div class="form-group">
<button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
</div>-->
</div>
</div>
<div class="row" id="smartSearchDisp" style= "margin-top: 25px;">
<p>A div for smart search!</p>
</div>
<button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
<!--<button class="btn btn-success" id="conceptsButton" >Request Data</button>-->
</form>
<!-- END form testing-->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div><!-- /#wrapper -->
<!-- <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="js/bundle.js"></script>
<script type="text/javascript" src="js/downloader.js"></script>
<script type="text/javascript" src="js/jquery.growl.js"></script>
<script type="text/javascript">
//Initialize function when document 'is ready'
$(document).ready(function() {
//BEGIN FORM Validations
$('#validateForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
deskSets: {
validators: {
notEmpty: {
message: 'Please select a desk set'
}
}
},
titleOfResearchProject: {
validators: {
stringLength: {
min: 5,
message: 'Please Enter the title with minimum 5 letters length'
},
notEmpty: {
message: 'Please Enter title of your project'
}
}
},
descriptionOfResearchProject: {
validators: {
stringLength: {
min: 15,
max: 100,
message: 'Please enter at least 15 characters and no more than 100'
},
notEmpty: {
message: 'Please Enter Description'
}
}
},
intendedUse: {
validators: {
notEmpty: {
message: 'Please select one option'
}
}
},
}
});
//END FORM Validations
});
//END FORM Validations
</script>
</body>
</html>
It shows the alert button when I click on Request button and as soon as I include the Ajax call related code, I keep getting ReferenceError: getConcepts is not defined index.html:1:1