CODEWITHSUNDEEP
javascripthtmlajax
David
David

Reputation: 47

How do I refresh a div element after AJAX succes?

Posting this because I found a lot of jquery answers, but no raw javascript answers.

So I have a function to post a comment to a comment section, and I want the comment section to refresh after posting a comment, But for some reason my code isn't working.

The code for loading the comment section:

function loadCommentSection() {
 console.log("loading section")
  imgid = imgid.replace("img/pic (", "");
  imgid = imgid.replace(").jpg", "");
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById("commentsection").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "commentsection.php?imgid=" + imgid, true);
  xhttp.send();
}

and the code for submitting the comment:

function submitComment() {
  var title = document.getElementById("title").value;
  var name = document.getElementById("name").value;
  var comment = document.getElementById("comment").value;

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("msg").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "comment.php?imgid=" + imgid + "&title=" + title + "&comment=" + comment + "&name=" + name, true);

  xhttp.send();
  loadCommentSection();


}

The problem is that the loadCommentSection function in the submitComment function isn't executing.

Upvotes: 1

Views: 52

Answers (1)

trincot
trincot

Reputation: 350147

You should allow the comment to be sent to the server and be registered before calling loadCommentSection. So, it is probably best to call it when the response becomes available:

function submitComment() {
  var title = document.getElementById("title").value;
  var name = document.getElementById("name").value;
  var comment = document.getElementById("comment").value;

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("msg").innerHTML = this.responseText;
      loadCommentSection(); // <<---- moved here.
    }
  };
  xhttp.open("GET", "comment.php?imgid=" + imgid + "&title=" + title + "&comment=" + comment + "&name=" + name, true);
  xhttp.send();
}

Upvotes: 4

Related Questions