CODEWITHSUNDEEP
phpjqueryajax
user3765419
user3765419

Reputation:

Using AJAX to dynamically update text from a database

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 sendPushNotificationfunction 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 ?>')"/>

Upvotes: 2

Views: 4081

Answers (2)

ErickBest
ErickBest

Reputation: 4692

To communicate between AJAX and PHP, you have to know two things:

1) If you are using PHP's $_POST, your AJAX must as well denote Posting of Data, and,

2) If you are using PHP's $_GET, your AJAX must as well denote Getting of Data.

So, You CANNOT do:

$.ajax({    //create an ajax request to readmessages.php
                    type: "GET",//NOTICE THIS GET thingi...
                    url: "readmessages.php",             
                    dataType: "html",   //expect html to be returned                
                    success: function(response){                    
                    $("#responsecontainer").html(response); 
        }

And do:

<?php
    // receive data from HTML readmessages request
    $rName=$_POST["registration"]; //NOTICE THE $_POST guy..  //POST information required to read information from the database
    $rowId=$_POST["rowid"];

You'd rather use 'POST' or 'GET' on both sides

So, if you want to simply POST, your AJAX might simply look like:

$.post('url_goes_here.php',{myDataXXX:comes_here},function(response_here){

console.log(response_here);
})

and your PHP

<?php

var_dump($_POST['myDataXXX'])
?>

And if you want to simply GET, your AJAX might simply look like:

$.get('url_goes_here.php',{myDataXXX:comes_here},function(response_here){

console.log(response_here);
})

and your PHP

<?php

var_dump($_GET['myDataXXX'])
?>

Hope that helps...

Upvotes: 4

Kylie
Kylie

Reputation: 11749

You need to include the data along with the ajax request,

data: {registration: registration, rowid: rowid},

and also set the type to POST since on the php side youre retrieving the POST variables.

So like this....

function updateText(registration, rowid) {
            $.ajax({    //create an ajax request to readmessages.php
                type: "POST",
                url: "readmessages.php",             
                dataType: "html",   //expect html to be returned  
                data: {registration: registration, rowid: rowid},
                success: function(response){                    
                $("#responsecontainer").html(response); 
    }

Upvotes: 3

Related Questions