How can i access only the div with the ID of 'chat_data' and not the entire webpage using javascript

Question

i am trying to access the content in that particular id called chat_date on page load, but it is getting the entire webpage. below is the javascript code.

<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','task.php',true); 
    req.send();

    }
    setInterval(function(){ajax()},1000);
</script>

below is the other PHP page i want to get values from.

<?php 
include 'php_includes/db.php';

$query = "SELECT * FROM chat ORDER BY id DESC";
$run = $db_conx->query($query);
while($row = $run->fetch_array()) :
    ?><div class="chat chat-left"  id="chat_data">
         <div class="chat-avatar">
                                                        <a href="profile.html" class="avatar">
                                                            <img alt="" src="assets/img/profiles/avatar-02.jpg">
                                                        </a>
                                                    </div>
     <div class="chat-body">
                                                        <div class="chat-bubble">
                                                            <div class="chat-content">


              <span class="task-chat-user"><?php echo $row['name']; ?>
              </span> <span class="chat-time"><?php echo $row['date']; ?></span>

                                                                <p> <?php echo $row['msg']; ?></p>
                                                            </div>
                                                        </div>
                                                    </div>



        <?php endwhile;?>

That is the way AJAX works, it returns the whole shebang. If you want something specific you have to make something specific to be requested. — Jay Blanchard, May 21 '20 at 16:28
The next alternative? Create something that only returns what you want from the request. — Jay Blanchard, May 21 '20 at 16:30
well, if i could i would have done it, i've been researching and trying other techniques, but its not working — innocent destiny, May 21 '20 at 16:34
JQuery has a `load()` function which allows you to request a specific element from a page. It still gets the whole page back but parses it for the element that you're looking for. https://api.jquery.com/load/ — Jay Blanchard, May 21 '20 at 16:40

How can i access only the div with the ID of 'chat_data' and not the entire webpage using javascript

0 Answers0