JavaScript doesn't work in ajax response file aka chat.php
Question
I can't add any working JavaScript features in the chat.php. Basically I made a instant private messaging system with AJAX and JavaScript but the thing that sucks is that the chat.php show new messages constantly which is a good thing but prevents any JS to be executed that I put in chat.php.
chat.php works with php html css etc.. but not JS. Keep in mind that I removed the JS that I wanted to put in chat.php.
The posted code below works as it is design to do like show instant messaging but again if I add any JS features for example like something simple like document.write it doesn't work it seems like.
chat.php show it for a second or it just doesn't show any JS being executed I added. So what can be the problem? I just want to add working JS features in chat.php. The JS works in the index.php area not targeted to chat.php. But targeting to chat.php it gives the same results.
index.php
<?php
include("0/instructions/php/session.php");
$session = $_POST['set_session'];
$session = $_SESSION['set_session'];
$messenger_id = $user_id;
$partner_id= $_POST['partner_id'];
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<title>Chat System in PHP</title>
<link rel="stylesheet" href="style.css" media="all"/>
<script>
function ajax() {
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
if(req.readyState == 4 && req.status == 200) {
document.getElementById('chat').innerHTML = req.responseText;
}
}
req.open('GET','chat.php',true);
req.send();
}
setInterval(function(){ajax()},1000);
</script>
</head>
<body onload="ajax();">
<div class="main_container">
<div id="container">
<div id="chat_box">
<div id="chat"></div>
</div>
</div>
<form method="POST" action="">
<div style="display: none;">
<input type="text" name="conversation_id" placeholder="conversation_id" value="<?php echo $session; ?>"/>
<input type="text" name="member_name" placeholder="member_name" value="<?php echo $user_first_name;?> <?php echo $user_last_name;?>"/>
</div>
<textarea name="message" placeholder="enter message"></textarea>
<input type="submit" name="submit" value="Send it"/>
</form>
<?php
if(isset($_POST['submit'])){
$conversation_id = $_POST['conversation_id'];
$member_name= $_POST['member_name'];
$message= $_POST['message'];
$query = "INSERT INTO messages_x1 (conversation_id,member_name,message) values ('$conversation_id','$member_name','$message')";
$run = $connect->query($query);
if($run) {
echo "<div id='hide_audio'><embed loop='false' src='chat.mp3' hidden='true' autoplay='true'/></div>";
}
}
?>
</div>
</body>
</html>
chat.php
<?php
include("0/instructions/php/session.php");
$session = $_SESSION['set_session'];
$query= "SELECT * FROM messages_x1 WHERE conversation_id='$session' ORDER BY message_id DESC";
$run = $connect->query($query);
while($row = $run->fetch_array()) :
$messenger_id = $row['messenger_id'];
?>
<!DOCTYPE html>
<html>
<head>
<style>
.close_button {
position: relative;
float: right;
left: 8px;
font-size: 25px;
text-decoration: none;
cursor:pointer;
bottom: 3px;
color: white;
background-color: transparent;
width: 30px;
height: 20px;
text-align: center;
}
.close_button p{
position: relative;
top: -15px;
}
.close_button:hover {
color: red;
}
</style>
</head>
<body>
<div id="chat_data">
<span style="color:green;"><?php echo $row['member_name']; ?></span> :
<span style="color:brown;"> <?php echo "<a class='close_button' href=\"delete.php?message_id=$row[message_id]\"onClick=\"return confirm('Are you sure you want to delete?')\">×</a>";?><br><?php echo $row['message']; ?></span>
</div>
<body>
</html>
<?php endwhile;?>
1 answers
solution1
0 2017-08-31 04:23:17
You shouldn't respond with a full blown html page to an AJAX request. Just return a snippet to insert. All the CSS and JavaScript should reside in the index.php and be called as needed. If you do need to pass JavaScript from your AJAX reply, you'll have to eval it to be executed.
Usually nowadays only JSON data is returned to AJAX calls. Depending on how complex your JavaScript actions are this might actually make it easier to handle for you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.