I've been really struggling trying to learn AJAX so that I can simply update my webpages with new text from the database dynamically because it seems like all the ajax tutorials are more complex examples that involve writing data to the database
The page im working on is simply a PHP script that requires a registration and id number to be posted to it, and it turn displays messages (which are frequently updated) from the database. I currently have an "Update Messages" button at the top of my page which sends the command to update messages, but it requires a page refresh to work.
I would simply like to use ajax to refresh the messages dynamically. Here is what i've written so far, based on what I found at Using Jquery Ajax to retrieve data from Mysql , but it isn't functional since I don't know how to pass in the registration and id number as parameters to the php script using ajax and display the response.
Note that the sendPushNotification
function is unrelated and works properly(used to send the command to update messages).
readmessages.php
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inbox</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
function sendPushNotification(id){
var data = $('form#'+id).serialize();
$('form#'+id).unbind('submit');
$.ajax({
url: "send_message.php",
type: 'GET',
data: data,
beforeSend: function() {
},
success: function(data, textStatus, xhr) {
$('.txt_message').val("");
},
error: function(xhr, textStatus, errorThrown) {
}
});
return false;
}
function updateText(registration, rowid) {
$.ajax({ //create an ajax request to readmessages.php
type: "GET",
url: "readmessages.php",
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
}
});
}
</script>
</head>
<body>
<?php
// receive data from HTML readmessages request
$rName=$_POST["registration"]; //POST information required to read information from the database
$rowId=$_POST["rowid"];
require_once 'access.php';
if (!userIsLoggedIn()) {
include 'login.php';
exit();
}
include_once './db_functions.php';
$db = new DB_Functions();
?>
<form id="<?php echo $rowId ?>" name="" method="post" onsubmit="return sendPushNotification('<?php echo $rowId ?>')">
<input type="hidden" name="message" value="readmessages" />
<input type="hidden" name="regId" value="<?php echo $rName ?>"/>
<input type="submit" class="send_btn" value="Update Messages" onclick="return updateText(<?php echo $rName ?>, <?php echo $rowId ?>);"/> //Attempts to call function to update text once button is pressed (not functioning)
<?php
$messagelist = $db->getInbox($rName); //calls the database to retrieve messages
echo nl2br($messagelist); //Displays message list that I want to update
include './logout.php';
?>
</body>
</html>
Any help would be greatly appreciated!
EDIT: Updated line to contain proper quotes:
<input type="submit" class="send_btn" value="Update Messages" onclick="return updateText('<?php echo $rName ?>', '<?php echo $rowId ?>')"/>