CODEWITHSUNDEEP
javascriptajaxdomrefresh
James
James

Reputation: 441

Refresh DOM elements after ajax load

Here's a quick rundown of the problem I'm having:

I start off with

<container>
    <div id="foo"></div>
</container>

I then load content into the container div with Ajax

<container>
    <div id="bar"></div>
</container>

then reload the original back in

<container>
    <div id="foo"></div>
</container>

but I then can't target #foo with javascript anymore as javascript thinks it's a new element

The actual code is obviously far more complicated and I need to refresh the whole DOM after the ajax load so that I can use several elements that were previously there before hand.

Upvotes: 2

Views: 5229

Answers (1)

Brian Tompsett - 汤莱恩
Brian Tompsett - 汤莱恩

Reputation: 5893

(Question answered in the comments and by question edits. Converted to community wiki answer. See Question with no answers, but issue solved in the comments (or extended in chat) )

The OP wrote:

The problem arises because I am creating an object with the element as a variable in, so when I call that variable again, the actual element it represents no longer exists, just an element with the same id

SOLVED:

Thanks to a suggestion from @felix in the comments, I realised that the way to do this was to get the id of the element stored in the object variable and use that to target the new element in the ajax loaded content:

My object variable created from the original content: playlist.trackdiv which represents the element div#track1

when I load that div in later through ajax playlist.trackdiv no longer represents div#track1 but a completely new instance of an element with the same id. The solution is to use the id of the object like this playlist.trackdiv.id then target the new element using that: document.getElementById(playlist.trackdiv.id)

Upvotes: 1

Related Questions