Issue
I have been trying for days to get JQuery working on a simple hello world program. What my program does is when I press a button, is it sends an XMLHTTPRequest() to a java servlet and it changes "Hey World" to "Hello World". I am new to JQuery and javascript. I understand that there needs to be a jquery.js file in your project and it is currently in my WebContent/WEB-INF/ folder and also my JavaScript Resources folder. I am using an HTML file and the only line that uses JQuery is $("#here").html(this.responseText) and the program works correctly when I change it to document.getElementById("here").innerHTML = this.responseText;. While this JavaScript way works, I would like to learn how to do this with JQuery but i first need to get it to work.
I have looked at similar questions but they either are not clear or the solution did not work. I have tried including the
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
before my actual script, also where src="jquery-3.4.1.js" and src="WebContent/WEB-INF/jquery-3.4.1.js".
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
function change2(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200){
$("#here").html(this.responseText);
}
};
var current = document.getElementById("here").innerHTML.toString();
xmlhttp.open("GET", "helloWorld", true);
xmlhttp.send();
}
</script>
</head>
<body>
<h1 id="here">Hey World</h1>
<button type="button" onclick="change2()">Change</button>
</body>
</html>
I am utterly flabbergast.
Solution
try to use
$.ajax({url: "Your_URL", success: function(result){
$("#here").html(result);}});
it's simple and easy with jQuery
you can take a look to this article https://www.sitepoint.com/use-jquerys-ajax-function/
Answered By - Hussein Abd Elaziz
