Detect if two elements have the same ID on a page

Question

On page load, 5 items are selected from the database. As the user scrolls down, 5 more posts are loaded, etc.

To prevent duplicate posts when sorting by 'new', I place the page load time in a hidden input to be used in JavaScript:

<input id="loadTime" type="hidden" value="<?php echo time(); ?>">

Then when fetching more posts while scrolling I only select new ones from before that time to prevent duplicate posts.

WHERE s.date < :loadTime

However, my issue is when sorting by Hot or Top, because it doesn't use the same logic.

Is it possible to detect if two elements on the page have the same ID? Because when a duplicate post is appended to the page, it will have the same ID as one already on it. Some sort of $(window).scroll() have a function that removes the duplicate ID afterwards so that the user doesn't see duplicate posts?

It would be better to change the logic so that it's not possible to append a repeated element instead of detecting when it is added to the DOM. — Rory McCrossan, Mar 11 '16 at 09:06
@RoryMcCrossan I do that with `new` (as I described) but I don't know how to do it with hot or top sorting. — frosty, Mar 11 '16 at 09:08
@frosty In which case we can't really help you without seeing your code — Rory McCrossan, Mar 11 '16 at 09:12
@Caesar if the user sorts by `new` and in the span it takes for the user to scroll down, it's possible to see the exact same 5 posts again if 5 new ones got uploaded. That's what the loadTime prevents. — frosty, Mar 11 '16 at 09:15

score 2 · Answer 1 · edited May 23 '17 at 12:15

2

I was able to solve it:

In the success function after I append the new posts, I loop through all the IDs on the page (taken from this answer then remove the last element with that id.

$('[id]').each(function(){
    var ids = $('[id="'+this.id+'"]');
        if (ids.length>1 && ids[0]==this){
            $("#"+this.id).last().remove();
        }
 });

edited May 23 '17 at 12:15

Community

1
1

answered Mar 11 '16 at 09:55

frosty

2,779
6
34
63

So it is a duplicate question. `:)` – Rino Raj Mar 11 '16 at 09:56
any time. Happy coding – Rino Raj Mar 11 '16 at 09:59

score 0 · Answer 2 · answered Mar 11 '16 at 09:16

How about instead of passing the initial load time with the JavaScript request, store and send the ID of the last post you received in the previous group of 5?

Your server-side logic can then (in a transaction) read out the "hotness" or "topness" or creation date, or whatever value you're sorting by, of the last post that the user has seen, before selecting the 5 next posts with a value less than that post's value.

Rino Raj · Answer 3 · 2016-03-11T09:23:30.660

0

►Is it possible to detect if two elements on the page have the same ID?

It is possible to find elements with duplicate Id. You can use selection with attribute id.

DEMO

if($('[id="same"]').length > 1){
  alert("duplicate id")
}

// To remove last inserted element with duplicate ID
$('[id="same"]').last().remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="same">
<input type="text" id="same">
<input type="text" id="same">
<input type="text" id="same" value="Last element">

edited Mar 11 '16 at 09:23

answered Mar 11 '16 at 09:17

Rino Raj

6,264
2
27
42

If I do `$("#same").remove();` will it always remove the last element with that id? Or remove all of them? – frosty Mar 11 '16 at 09:20
@frosty No I guess. I will update the answer. I am working on it – Rino Raj Mar 11 '16 at 09:21
@frosty use `$('[id="same"]').last().remove()` last inserted element. I have updated my answer. Please check – Rino Raj Mar 11 '16 at 09:24
What if I don't know the name of the ID beforehand though? Just to detect duplicate IDs? – frosty Mar 11 '16 at 09:27
@frosty good question. We have to filter it some how. Loop each element to find duplicate id. That is not a good way. But here we are forced to – Rino Raj Mar 11 '16 at 09:31
store the database result set in an array and remove duplicates before appending it to document. That is the easiest way – RRR Mar 11 '16 at 09:32

Detect if two elements have the same ID on a page

3 Answers3