Jump to content

Continually Updating A HTML Element In Vanilla JavaScript


jsmith1981

Recommended Posts

Doing some great work to finally understand how to insert data into a database using JavaScript AJAX and PHP

But the problem I'm having is this, when inserting say a post (a basic commenting system is what I am doing just for a kind of proof of concept sort of thing so I can understand whats going on as such) it inserts the post but needing to refresh the page to see the new comment/post/data

Is there any better way of say doing this like so when inserting it automatically appears in the feed, have this essentially right now:
 

function getComments() {
  
  var comments = document.getElementById('comments');
  
  xmlHTTP.open('GET', 'server.php?getcomments');
  
  xmlHTTP.onreadystatechange = function() {
    if(xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
      comments.innerHTML = xmlHTTP.responseText;
    }
  }
  xmlHTTP.send(null);
}

function postComment() {

  var user = document.getElementById("user").value;
  var comment = document.getElementById("comment").value;
  var data;
  
  if(user.length == 0) {
    document.getElementById('server-response').innerHTML = '<span style="color: red;">User field can not be empty</span>';
    return;
  }
  
  if(comment.length == 0) {
    document.getElementById('server-response').innerHTML = '<span style="color: red;">Comment field can not be empty</span>';
    return;
  }
  
  // xmlHTTP.open('GET', serverScript);
  xmlHTTP.open('POST', 'server.php?postcomment');
  xmlHTTP.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  xmlHTTP.onreadystatechange = function() {
    if(xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
      // document.getElementById('server-response').innerHTML = xmlHTTP.responseText;
      var response = xmlHTTP.responseText;
      if(response == 'Comment added successfully') {
        getComments();
        document.getElementById("user").value = '';
        document.getElementById("comment").value = '';
      }
    }
  }
  
  data = 'user=' + user + '&' + 'comment=' + comment;
  xmlHTTP.send(data);
}

function deleteComment(id) {
  // alert('Delete post with id' + id);
  var postID = id;
  
  if(Number.isInteger(postID)) {
    xmlHTTP.open('GET', 'server.php?deletecomment=' + postID);
    
    xmlHTTP.onreadystatechange = function() {
      if(xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
        var response = xmlHTTP.responseText;
        if(response == 'Comment was deleted') {
          getComments();
        }
      }
    }
  } else {
    // if not a valid value to be sent to server!
  }
  xmlHTTP.send(null);
}
  <p>
    <label>User <input type="text" id="user" name="user"></label>
    <br>
    <label>Enter a comment
    <br>
    <textarea cols="40" rows="10" id="comment"></textarea></label>
    <br>
    <button type="submit" id="post-comment" name="post-comment" onClick="postComment();">Post Comment</button>
    <br>
    <span id="server-response"></span>
  </p>
  <div id="comments">
    <p>Comments</p>
  </div>

Essentially all the responseText is the results of all data from the database in a nutshell nothing complicated, a kind of guestbook of sorts, tried putting it in a while loop thats infinite but that keeps crippling the tab in the browser or nothing appears

Like I was thinking of doing it so that yeah just updates once until a post is made to the database, but then thought would it be possible to make it sort of live updating

Any helps much appreciated
Jeremy.

Edited by jsmith1981
Didnt put the language for the code
Link to comment
Share on other sites

  • 10 months later...

To create DOM nodes, there are two methods:

document.createElement(tag)

Creates a new element node with the given tag:

let div = document.createElement('div');
document.createTextNode(text)

Creates a new text node with the given text:

let textNode = document.createTextNode('Here I am');

Most of the time we need to create element nodes, such as the div for the message.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...