Ajax success callback- DOM not updating

Question

I am running a $.ajax function. The data I want is successfully returned in json format, and I am able to parse it and get the properties I want. Then, when I try to change the DOM, it isn't changing. console.log() statements show things changing, but when I view the source of the page the original element is still there.

Code:

$.ajax({
    success: function (jsonImageString) {
        if (jsonImageString.length > 0) {
            var embeddedImages = $.parseJSON(jsonImageString);                        

            $.each(embeddedImages, function () {
                var currPin = this.pin;
                var currUrl = this.url;
                var currTitle = this.title;

                //statement displays correct pin
                console.log(currPin);

                //statement shows correct original html
                console.log($("a[href='" + currPin + "']").html());

                //nothing changes- viewing source of page shows original elements
                $("a[href='" + currPin + "']")
                    .addClass("displayLink")
                    .html("<img src='" + currUrl + "' alt='" + currTitle + "' />");

                    //shows what would be if something had actually changed...
                    console.log($("a[href='" + currPin + "']")[0].outerHTML);
                });

            }
        }
    });

How are you viewing the source? Generally the browser's "View Source" menu option shows the *original* source that was fetched from the server. To see updated changes you would want to use a DOM explorer, generally part of a browser's debugging tools. — David, Sep 10 '14 at 18:01
Maybe this post could help you... [http://stackoverflow.com/questions/9654737/content-of-html-page-changed-by-jquery-but-view-source-dont-reflect-the-chang][1] [1]: http://stackoverflow.com/questions/9654737/content-of-html-page-changed-by-jquery-but-view-source-dont-reflect-the-chang — Chris Rosete, Sep 10 '14 at 18:05
@David: You were right! If you write your comment as an answer I'll accept it. — dmr, Sep 10 '14 at 18:06

score 2 · Accepted Answer · answered Sep 10 '14 at 18:06

2

when I view the source of the page

How are you viewing the source?

Presumably you're using the "View Source" menu option in the browser? Generally the browser's "View Source" menu option shows the original source that was fetched from the server. To see updated changes you would want to use a DOM explorer, generally part of a browser's debugging tools.

The DOM is being updated, it's original source isn't.

answered Sep 10 '14 at 18:06

David

208,112
36
198
279

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – Patrick Kostjens Sep 10 '14 at 18:23
@PatrickKostjens: I disagree, this *does* answer the question. The question asked, "When I change the DOM in JavaScript and view the source it hasn't been changed, Why?" The answer is that the OP is viewing the original source and instead needs to view a DOM explorer. – David Sep 10 '14 at 18:25

Ajax success callback- DOM not updating

1 Answers1