CODEWITHSUNDEEP
jquery
Talha Mahmood
Talha Mahmood

Reputation: 1

how to refresh div content using jquery

I know the answer is pretty simple but i'm kinda stuck right now.So this is the code that displays JSON values on my page using the id selectors.Now everytime the result is obtained the content of the divs arent refreshed but appended with the new result?

.done(function(data) {
        // Get face rectangle dimensions
        var faceRectangle = data[0].faceRectangle;
        var faceRectangleList = $('#faceRectangle');

        // Append to DOM
        for (var prop in faceRectangle) {
            faceRectangleList.append("<li> " + prop + ": " + faceRectangle[prop] + "</li>");
        }

        // Get emotion confidence scores
        var scores = data[0].scores;
        var scoresList = $('#scores');

        // Append to DOM
        for(var prop in scores) {
            scoresList.append("<li> " + prop + ": " + scores[prop] + "</li>")
        }

What i want is to refresh the contents so only the new results are displayed.

Upvotes: 0

Views: 69

Answers (1)

dilusha_dasanayaka
dilusha_dasanayaka

Reputation: 1441

Use html() instead of append().

.done(function(data) {
        // Get face rectangle dimensions
        var faceRectangle = data[0].faceRectangle;
        var faceRectangleList = $('#faceRectangle');

        // Append to DOM
        for (var prop in faceRectangle) {

              // here i replace append with html

            faceRectangleList.html("<li> " + prop + ": " + faceRectangle[prop] + "</li>");
        }

        // Get emotion confidence scores
        var scores = data[0].scores;
        var scoresList = $('#scores');

        // Append to DOM
        for(var prop in scores) {
            scoresList.html("<li> " + prop + ": " + scores[prop] + "</li>")
        }

or you can do like this,

// Append to DOM
Var str = “”;
for (var prop in faceRectangle) {

            str += "<li> " + prop + ": " + faceRectangle[prop] + "</li>";
        }
faceRectangleList.html(str);

append() is working as same as when you do,

String s = “my name is : “;
S +=”dilusha”;

html() just clear the current content and put your new content to the element. (This is not how they originally works. But seems like this is more understandable for beginner)

view jquery.html(htmlString) api referance

Upvotes: 1

Related Questions