Nrthugu

I know this is a very concrete issue but I've struggled with this code for the last 2 hours and I can't find anything on the topic or figure out how to solve it.

I have an issue with a jQuery Ajax Post request. I am trying to make a section on my page where I display the users current level. When a user interacts and does something that increases the level on the site the level should also increase in the DOM/client's browser. Therefore I've added a setinterval that allows the request to run every 5th second. And if the $(response).text() is different from the current div's .text() where i am rendering the current level I want to append this new response from the ajax request.

Maybe the answer is more obvious than I think.... I have added the code below

Ajax page:

$(document).ready(function () {



    function getLevel() {



        var getLvlData = $.ajax({

            url: "AjaxRequests.php",

            type: "POST",

            data: {type: "4", lvl_r_type: 1}

        });



        getLvlData.done(function (response, textStatus, jqXHR) {

            var innerLevelHTML = $("#LevelContainer");



            if (($(response).text()) != ($(innerLevelHTML).text())) {

                innerLevelHTML.html("");

                innerLevelHTML.append(response);



            }

            if ($(response).text() == $(innerLevelHTML).text()) {

                alert("the same");

            }

        });



    }



    var levelChecker = setInterval(function () {

        getLevel();

    }, 1000);

    getLevel();



});

AjaxRequests.php:

    if ($_POST["type"] == "4" && isset($_POST["lvl_r_type"])) {



                $returnVal = htmlentities($_POST["lvl_r_type"]);



                if (!empty($returnVal)) {

                    if ($returnVal == 1) {



                ?>



                    <div id="chartWrapper">

                        <div>

                            <canvas id="doughnut-chart"></canvas>

                        </div>

                        <div id="chart-center">

                            <div>

                                <div><h1>0%</h1></div>

                                <div><p>GX 0 / 1</p></div>

                            </div>

                            <div><p>LVL 0</p></div>

                        </div>

                    </div>



                    <div id="progressList">

                        <div><p>View tasks</p></div>

                    </div>



                <?php 



                        } 

         }

}

    ?>

html page

                    <div id="LevelContainer"></div>

Try using trim since a white space could be treated as a part of the text.

if (($(response).text().trim()) != ($(innerLevelHTML).text().trim())) {

...

One alternative approach I can think of, off of my head is, to set a hash inside a data attribute say data-hash="" whenever you set the html of that div, and then whenever you have a new ajax response you can generate a hash on the fly and compare that to the existing one and if a change is found just update the html and the hash value for that attribute.

This process minimises the confusion that may be caused due to dom being updated by some script.

Also, Instead of

innerLevelHTML.html("");

innerLevelHTML.append(response);

Why not just just set the html directly as

innerLevelHTML.html(response);