如何使用ajax检索不同的值？

Question

I have 2 div box. The first div box contains the user names i have conversed before. The second div box will display the conversation history of me and the user....

Here are my codes..

<ul style="list-style-type: none;">
    <?php  
    include 'connectDB.php';
    //retrieve all the message history of yours from the PrivateMessage table
    $query = "SELECT * FROM `messagecheck` WHERE `sender_a` = '$userId' OR `sender_b` = '$userId';";
    $result = mysqli_query($dbconnect,$query);
    if (mysqli_num_rows($result) > 0) { 
        while ($row = mysqli_fetch_assoc($result)) {    
    ?>
    <div class="openChat" style="border:2px solid red">
        <li style="color:black; width:100%; padding-top:5px" onclick="message()">
            <?php 
            //if the sender_a id is not my id, display the name
            //if sender_a is my id, then display sender_b
            //Because we dont want to see our name in the chat History
            if ($row['sender_a'] != $userId) {
                $senderName = $row['sender_a'];
                include 'connectDB.php';
                $nameSearch = "SELECT `fName`, `lName` FROM `register` WHERE `id`='$senderName';";
                $Searchresult = mysqli_query($dbconnect, $nameSearch);
                $Searchrow = mysqli_fetch_assoc($Searchresult);
                echo $Searchrow['fName'] ." ". $Searchrow['lName'];
            ?>
            <input class="IDValue" name="IDValue" value="<?php echo $row['exist']?>" >
            <?php
            } else {
                $senderName = $row['sender_b'];
                include 'connectDB.php';
                $nameSearch = "SELECT `fName`, `lName` FROM `register` WHERE `id`='$senderName';";
                $Searchresult = mysqli_query($dbconnect,$nameSearch);
                $Searchrow = mysqli_fetch_assoc($Searchresult);
                echo $Searchrow['fName'] ." ". $Searchrow['lName'];
            ?>
            <input class="IDValue" name="IDValue" value="<?php echo $row['exist']?>" >
            <?php
            } 
            ?>
       </li>
    </div>
    <?php 
        }
    }
    ?>
</ul>

In this code above, Each names will be displayed in a li list. Now when i click that a li list, lets say I am clicking the 3rd li and the id is supposed to be 34, it wont happen. It will still load the first li's Id... I cant find a fix.

Here is the code of my ajax :

function message(){
                var ID = document.querySelector('.IDValue').value;
                var xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadystatechange = function(){
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                           document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                        }
                    };
                    xmlhttp.open("POST","retrieveMsg.php?q=" +ID,true);
                    xmlhttp.send();
                }

Can somebody help me out please ? Im really tired of fixing it. Thanks it advance !

P.S : It normally shows(a chrome dev tool) http://localhost/html/retrieveMsg.php?q=16 nomatter which li i click (16 is the first li tag btw)

Answer 1

You are always getting 16 because of your selector .IDValue ( it always grabs the first match which in your case is li 16 ).

If you are dead-set on having your Javascript inline, you could pass the ID through the message function or store the id on the li itself using data-id="<?php echo $row['exist']?>":

    <li style="color:black; width:100%; padding-top:5px" 
onclick="message(<?php echo intval($row['exist']);?>)">

function message(clickedID){
                var ID = clickedID;
                var xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadystatechange = function(){
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                           document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                        }
                    };
                    xmlhttp.open("POST","retrieveMsg.php?q=" +ID,true);
                    xmlhttp.send();
                }

PS: You should look into PDO for fetching your mysql data