How to keep a particular div active inside the DOM after AJAX update

[computerbarry]

Hi all

I have a page with a selection of different AJAX calls, simple getJSON which updates the main results container <div id="results"></div>.

Example

<div id="results"></div> // all json is render here
<div id="content"></div> // div used outside of the results dataset

If somebody clicks on a link within any of the data items, the results are then updated so the <div id="content"></div> is positioned below the item clicked, like so:

<div id="results">
data
data (clicked)
<div id="content"></div>
data
data
</div>

This is good and exactly how its supposed to work.

Though the problem is, if a user now requests another dataset (getJSON) everything inside <div id="results"></div> is removed and replaced - including <div id="content"></div> which is needed for the next dataset.

So now, I only have

<div id="results"></div> // all json is render here

I’m wondering is there a way to save/keep <div id="content"></div> on the page and not be lost/removed when the results are updated?

Thanks,
Barry

[computerbarry]

Just realised I could maybe use .after AJAX success:

success: function (data) {
        ...
        $('#results').html(html);
        $('#results').after('<div id="content"></div>');
      },

Would this be the best way?

The <div id="content"></div> container also has a lot of markup and html elements within. So can become a little messy pasting all this into the success method.

Barry

[m3g4p0p]

You can simply keep a reference to the #content element like so:

var $results = $('#results')
var $content = $('#content')

// Then at some point
$results.after($content)

That reference will be kept even after the element got removed from the DOM.

[computerbarry]

Arrh, yes this could work.
Would that keep all the elements within the content container?

Example:
Minified for viewing

<div id="content" class="content flexInner">
  <div class="data">
    <div id="item"></div>
    <div class="column" style="margin-top: 15px;">
      <div class="related">
       ...
      </div>
    </div>
  </div>
</div>

So if I use below snippet, this would store all the above into this $content var?
var $content = $('#content')

That reference will be kept even after the element got removed from the DOM

Silly question, but does that mean it is kept in memory even though it has been removed from the page?

– another possibility
I was just looking at a possible .clone, though I think what you suggest with the reference is better.

$("button").click(function(){
    $("#content").clone().appendTo("body");
});

Thanks, Barry

[m3g4p0p]

@computerbarry

So if I use below snippet, this would store all the above into this $content var?

@computerbarry

Silly question, but does that mean it is kept in memory even though it has been removed from the page?

Yes and yes… as for garbage collection, it’s kept as long as the variable referencing that element can still be reached from anywhere in your code. For example, in this case

$('#my-button').click(function () {
  var $content = $('#content')

  $content.remove()
})

the element will get removed from memory when the callback finishes. But in this case

var $content = $('#content')

$('#my-button').click(function () {
  $content.remove()
})

the reference is kept as long as the event listener is active… have a look here for details.

@computerbarry

I was just looking at a possible .clone

That would generally be possible too, but then you have the same element in the DOM twice without any need… and an immediate problem would be the duplicate ID.

[computerbarry]

@m3g4p0p

the reference is kept as long as the event listener is active… have a look here for details.

Nice to know, just reading up on this thanks.

@m3g4p0p

That would generally be possible too, but then you have the same element in the DOM twice without any need… and an immediate problem would be the duplicate ID.

As I found out today. Lots of duplication.

If the button wasn’t clicked, the #content would not be removed. Resulting in duplication when other json calls were called as the #content was initially outside of #results.

I was excited hoping to get everything working today

For some reason, even though the new #content was replaced in the correct area the click event wasn’t firing, or something wasn’t fitting together.

I’m going to build a test suite using a similar approach so you can see what the problem might be. Tricky one, just can’t figure out what’s going wrong

Will post back once I have everything built.

---

Also looking to build some sort of AJAX modular/function as page is becoming very saturated with DRY AJAX calls, only the parameters are changing. Probably open a new thread for this.

Chat soon,
Barry

[computerbarry]

Hi @m3g4p0p

This is not an exact duplicate of my setup, though everything is working in a similar way.
After striping this down, the issue seems it could maybe be with the .more click event I have setup, the function that positions the #content under the .wrapblock divs.

In order

1. Click a couple of more links - this will position the #content under the row of divs which stays under the row/div also on resize.
2. Now with the #content active and showing, select another category from the dropdown - this will refresh the results
3. Click on the more links again, and you’ll see the #content div always stays at the bottom

I need it to work as things do before we make the change with the dropdown.
And the data inside #content holder is just for viewing purposes, full list of people.

Codepen

Hope you can help, any questions let me know.

And are the references positioning correctly - global vars at this point.

var $results = $('#results')
var $content = $('#content')

Barry

[m3g4p0p]

The problem is that you also set

$allBlocks = $('.wrapblock');

but when you replace the HTML of the results, those elements stored in $allBlocks won’t be attached to the DOM any more, so your .filter() function won’t work. So in this case, you actually do have to query for the blocks anew (or at any rate update the collection after the result list got populated).

[computerbarry]

Thanks @m3g4p0p

I was tinkering around with this a while back. Trying to run the function within the ajax success.
This makes sense now that you mention.

@m3g4p0p

So in this case, you actually do have to query for the blocks anew (or at any rate update the collection after the result list got populated).

How would I do that?
Do I need to move the below function

$(function(){
	$allBlocks = $('.wrapblock');
})

An example maybe

Cheers, Barry

[m3g4p0p]

Instead of

$(function () {
  $allBlocks = $('.wrapblock')
})

// ... inside AJAX succes callback
  $allBlocks
    .filter(function (idx, ele) {
      return $(ele).position().top === position.top
    })
    .last()
    .after($('#content'))

just

$('.wrapblock')
  .filter(function (idx, ele) {
    return $(ele).position().top === position.top
  })
  .last()
  .after($content)

It’s generally good practice to store $() results in variables, but this is one occasion where you need a “fresh” query.

PS: But you can (and should) reuse the $content variable here – that element won’t change.

[computerbarry]

@m3g4p0p

It’s generally good practice to store $() results in variables

Yes I’ll make note of this seems a lot cleaner.
Thanks in advance.

And sorry for my ignorance @m3g4p0p, but I just don’t understand how I can fit this together.

All the work is done within the click .more click event.
Do I need to add the logic from this into both AJAX success calls and still have this within the click event?

I ran a few tests but keep getting the error

Uncaught ReferenceError: position is not defined

Would be great if you could update/amend the Codepen

Barry

[computerbarry]

I’ve slightly cleaned up the Codepen if this helps, thanks.

Barry

[m3g4p0p]

Here you go…

[computerbarry]

Thanks a lot
And sorry for the pestering @m3g4p0p been heavy involved with this for days

This is working very good, much appreciated!

I see you completely removed

var $allBlocks = [];
$(function(){
	$allBlocks = $('.wrapblock');
})

And replaced

$allBlocks.filter(function(idx, ele){
    return $(ele).position().top == position.top;
  })

with

$('.wrapblock').filter(function(idx, ele){
    return $(ele).position().top == position.top;
  })

Much cleaner and less code
I’ll just need to digest how this is working now.

Further testing with some live data, hopefully no glitches

Cheers, Barry

[m3g4p0p]

No worries! :-)

[computerbarry]

Just one small issue that keeps popping up.

Uncaught DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The new child element contains the parent.

This only happens sometimes, and mainly on the top three items.

The error points to .after($content) inside the more click handler:

$(document).on('click', '.more', function() {
  ...
  .after($content); //this line is hightlight as the error
});

Maybe this has something to do with my current setup, though if you have any brain storms or knowledge why this would happen. Great to hear back.

Thanks,
Barry

[m3g4p0p]

@computerbarry

This only happens sometimes, and mainly on the top three items.

Can you provide the exact steps necessary to reproduce the problem?

[computerbarry]

A little tricky to build the exact steps, lots of files running within a CMS not sure what is casuing this. I’ll see if I can fix it or build a test case to show.

It seems only the top 3 items have this issue and a second click makes the page jump to the top bypassing preventdefault. I currently have 3 items per row which has me thinking maybe something to do with the positioning.

But, just guess work really.
Could be other files conflicting. Though as the error says, pointing to .after($content);

Cool, was just wondering maybe you had ran into this issue before.

No worries, thnaks anyhow - so close

Barry

[m3g4p0p]

@computerbarry

I’ll see if I can fix it or build a test case to show.

Oh I thought it would occur in the pen too… well generally speaking this error means that somehow the .wrapblock elements slipped into the $content. Under the hood, the jQuery .after() method uses .insertBefore(); a vanilla JS implementation might look roughly like this:

function after (node) {
  this.parentNode.insertBefore(node, this.nextSibling)
}

And if node in the above snippet contains this.parentNode, you’ll get that error as you can’t insert a node into itself.

But yeah I know reproducing a bug can be harder than actually fixing it… ^^