I have the following html page:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>Message wall</title>
<style>
#messages {
overflow-y: scroll;
border: black;
height: 20em;
width: max-content;
}
#back {
position: fixed;
top: 0;
right: 0;
margin-right: 5px;
background-color: gainsboro;
}
#message-sender {
position: fixed;
bottom: 0;
}
form {
margin-bottom: 5px;
}
#message-input {
padding-right: 10em;
}
</style>
</head>
<body>
<div id="messages"></div>
<div id="back">
<h3 style="margin: 0;"><a href='http://localhost'>Main Page</a></h3>
</div>
<div id="message-sender">
<form>
<h3>Input message: </h3>
<input id="message-input" type="text">
<input id="message-send-btn" type="button" value="Send">
</form>
</div>
<script>
function usernameExists() {
user = localStorage.getItem('user')
return !(user == null || user == "null" || user == '')
}
function promptUsername() {
let input = prompt('Please enter a username: ')
if (input.length <= 20 && !(input.includes(' '))) {
localStorage.setItem('user', input)
} else if (input.length > 20) {
alert('Username must be less than 21 characters!')
} else /* if (input.includes(' ')) */ {
alert('Spaces are not allowed in usernames!')
}
}
if (!usernameExists()) {
promptUsername()
} else {
console.log(localStorage.getItem('user'))
}
function updateMsgs() {
$.ajax({
url: "http://localhost/testing/getmsgs",
success: function (response) {
document.getElementById('messages').innerHTML = response
}
})
}
updateMsgs()
document.getElementById('message-send-btn').addEventListener('click', () => {
while (!usernameExists()) {
promptUsername()
}
let msg = document.getElementById('message-input').value
if (msg == null) {
return
} else {
$.ajax({
url: "http://localhost/testing/sendmsg?msg=" + msg + "&user=" + localStorage.getItem('user'),
success: function(response) {
document.getElementById('message-input').value = ''
updateMsgs()
}
})
}
})
while (true) {
updateMsgs()
}
</script>
</body>
</html>
I tried loading this page using Django, it was unresponsive when my 2 other pages were. Same when using the file path to load it. I quickly realized that jQuery was the problem, for when I changed:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
to:
<!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->
The webpage became responsive, but without jQuery, it became non-functional.