Why innerHTML is not working with Html elements in response text via AJAX?

Question

NOTE: please Don't mark this question [duplicate]

I am trying to create Blog posts dynamically using php on my website. The problem is that when the response is received by the browser it is not able to put the blogPosts inside the section Tag on my web site using 'innerHTML'

Here is my HTML code:

<section id="contentSection">
</section>
    <button name="LOAD_MORE_REQUEST" id="LoadMoreButton" onclick="loadContent();" value="loadMoreButton">Load more</button>

CSS code:

#contentSection{
                height: 1000px;
                width: 100%;
                background-color: white;
                overflow: scroll;
            }

            .ArticleSection1{
                height: 450px;
                width: 48%;
                float: left;
                margin-left: 1.3%;
                margin-bottom: 30px;
                box-shadow: 0px 0px 10px 4px rgb(180, 180, 180);
            }
            .imageDivArticleSection1{
                height: 50%;
                width: 100%;
                overflow: auto;
            }
            .PreviewTextDiv{
                height: 50%;
                width: 100%;
                overflow: auto;
                background-color: rgba(255, 255, 255, 0.904);
            }
            .ArticleSection1 > div > h1{
                padding-left: 2%;
                padding-top: 15px;
                font-size: 28px;
                float: left;
                font-weight: 100;
                display: table-cell;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }
            .PreviewTextDiv{
                padding-left: 2%;
                padding-top: 15px;
                font-size: 16px;
                float: left;
                font-weight: 100;
                display: table-cell;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }
            .ArticleSection1 > div > button{
                width: 20%;
                height: 40px;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-weight: 100;
                color: black;
                font-size: 16px;
                border: 1px solid deepskyblue;
                background-color: transparent;
                margin-left: 2%;
                margin-top: 20px;
            }

JS code:

var loadMoreButton = document.getElementById("LoadMoreButton").value;
    var sendLoadContentRequest = new XMLHttpRequest();
    requestQuery_Data = new FormData();
    requestQuery_Data.append("LOAD_MORE_REQUEST", loadMoreButton);
    sendLoadContentRequest.open("POST", "LoadContent.php", true);
    sendLoadContentRequest.send(requestQuery_Data);
    DefaultText = document.getElementById("contentSection").innerHTML;
    response = sendLoadContentRequest.responseText;
    document.getElementsByTagName("contentSection").innerHTML = DefaultText +  response;

And PHP code:

<?php
if(isset($_POST["LOAD_MORE_REQUEST"])){
    loadContentOnPage();
}
else{
    echo("Error");
}


function loadContentOnPage(){
    $response = '
    <section class="ArticleSection1">
    <div class="imageDivArticleSection1"></div>
    <div class="PreviewTextDiv">
        <h1>Code editors to use</h1>
        <br>
        <p>
                Though this is the era of visual presentations than the text or articles but even after that many blog-
                -ers and bloging engines use text teditors but if you are and coding your own blogging website you
                may also need to put one on your website though there are many prewritten texteditors are avilable 
        </p>
        <button>Read more</button>
    </div>
</section>
    ';

    for($a = 0; $a < 4; $a++){
        echo($response); 
    }
}

?>

I am trying to fix this from past 2 days and after surfing most of the questions were "the case-sensitive" error.

try use DOMParser() to your response in js. You can read more about it here stackoverflow.com/questions/3103962/… — Krystian Kazimierczak
– Krystian Kazimierczak, Commented Nov 3, 2018 at 17:51
You are using an async method, the request hasn't finished by the time your innerHTML line is reached — Patrick Evans
– Patrick Evans, Commented Nov 3, 2018 at 17:59
Is the button in a form? If so, it will submit the page, i.e. reload. — Mr Lister
– Mr Lister, Commented Nov 3, 2018 at 18:20

suresh bambhaniya · Accepted Answer · 2018-11-04 13:26:42Z

1

as @Patrick Evans mentioned You are using an async method, the request hasn't finished by the time your innerHTML line is reached

var loadMoreButton = document.getElementById("LoadMoreButton").value;
    var sendLoadContentRequest = new XMLHttpRequest();
    requestQuery_Data = new FormData();
    requestQuery_Data.append("LOAD_MORE_REQUEST", loadMoreButton);
    sendLoadContentRequest.open("POST", "LoadContent.php", true);
    sendLoadContentRequest.send(requestQuery_Data);
    DefaultText = document.getElementById("contentSection").innerHTML;

    sendLoadContentRequest.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("contentSection").innerHTML = DefaultText +  responseText;
       }
    };

edited Nov 4, 2018 at 13:26

answered Nov 3, 2018 at 18:20

suresh bambhaniya

1,6871 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tech guy Over a year ago

Thank you It is working to some extent but I don't understand what is going under the hood. response was successful by the method I used earlier but innerHTML was not working but it worked now. What is the reason?

Collectives™ on Stack Overflow

Why innerHTML is not working with Html elements in response text via AJAX?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related