I am currently encountering an issue with sending data to another page without refreshing. I am able to send the data as text, but for some reason, I am unable to send it as a modal. Why might this be happening?
Here is an image of my current page https://i.stack.imgur.com/MLXYa.png
Below is the code snippet from ajax4.html
This section handles data submission and inserts
<h1>AJAX POST FORM</h1>
<form id="postForm">
<input type="text" name="name" id="name2">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('postForm').addEventListener('submit', postName);
function postName(e){
e.preventDefault();
var name = document.getElementById('name2').value;
var params = "name="+name
;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'process.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function(){
console.log(this.responseText);
}
xhr.send(params);
}
</script>
Code snippet from ajax5.html
This part fetches the data and aims to display it within a modal
**EDIT** Here's the current HTML
<h1>Users</h1>
<div id="users"></div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">User List</h4>
</div>
<div class="modal-body" id="user-list">
<p>User list here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
var still_fetching = false;
// Fetch data every 3 seconds (3000)
setInterval(function(){
if (still_fetching) {
return;
}
still_fetching = true;
loadUsers();
}, 3000);
// Need to update this function slightly
function loadUsers(){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'users.php', true);
xhr.onload = function(){
if(this.status == 200){
var users = JSON.parse(this.responseText);
var output = '';
for(var i in users){
output += '<div id="myModal" class="modal">' +
'<div class="modal-content">' +
'<span class="close">×</span>' +
'<p>'+users[i].id+'</p>' +
'<p>'+users[i].name+'</p>' +
'</div>' +
'</div>';
}
document.getElementById('user-list').innerHTML = output;
document.getElementById('myModal').style.display = "block";
still_fetching = false;
}
}
xhr.send();
}
</script>
</body>
</html>
process.php
<?php
$conn = mysqli_connect('localhost','root','','ajaxtest');
echo 'Processing....';
if(isset($_POST['name'])){
$name = mysqli_real_escape_string($conn, $_POST['name']);
$query = "INSERT INTO users(name) VALUES('$name')";
if(mysqli_query($conn, $query)){
echo 'User Added...';
}else{
echo 'ERROR: '.mysql_error($conn);
}
}
if(isset($_GET['name'])){
echo 'GET: Your name is '. $_GET['name'];
}