1

Presently, I am using a script to show/hide comments on a number of WordPress-based sites. The script works as expected on essentially every site. However, I've run into an issue with a site using the Hero theme. On the index pages, the theme pulls the content from X number of posts. Unfortunately, this has the effect of calling the script multiple times and resulting in the first post getting X number of show/hide buttons and the other posts being unaffected.

I'm uncertain as to how to modify the script in order to target each of the comment sections individually. Naturally, the task would be easier if the theme author had not assigned all comment sections on index pages the same id (#commentBox). I've looked at limiting the scope of the script (i.e., to have each instance of the script affect only the post content within which it's contained) and changing the actual functionality of the script to account for the multiple comment sections. Unfortunately, I've not yet been able to get it working as intended.

Here is a link an index page displaying the issue: http://www.sitestyling.ca/abbyphotography/blog/. The first link (i.e., the one to the script) leads to a page which has the script implemented and functioning as expected.

Any help or suggestions would be greatly appreciated.

Zyniker
  • 283
  • 3
  • 14
  • I don't believe this will aid your specific problem but if you want more background on how this is sometimes handled when you have distinct contexts you can use check this out: http://stackoverflow.com/questions/9635558/multiple-identical-ids-in-the-same-html-document – Carth Jan 04 '14 at 04:43
  • 1
    You may also want to consider changing the title of your post to something like "Handling duplicate IDs in jQuery" since this problem didn't directly relate to comment sections or the ability to show/hide selections in jQuery. – Carth Jan 04 '14 at 18:33

1 Answers1

1

So to state the obvious here, having multiple elements with the same ID is very bad mojo. To whatever extent that you can control how these WP sites are loaded I would encourage you to work to modify the repeated injection of your script into the page since even after making a change, your script would be run repeatedly since you have multiple blocks defining document.ready functions. You could ameliorate that with a global to tell if your script had already fired but that's getting a bit hackish...

What I would suggest in principle is that you add logic to your script to do the following:

  • Find the offending duplicate ID items and rename them to something unique
  • Add a class that you can reference rather than an ID
  • Refactor your code to loop through the collection of items returned from the class selector
  • If really, really necessary you could also then have kept track of your renamed IDs, go retrieve them individually and reset them to the offending original duplicate ID name thus incriminating yourself for future page user

The first couple of points here could be done pretty simply with something like this:

var uniqueAppend = 1;
var tempName = 'commentBox';
while(jQuery("#commentBox").length > 0 ){
    jQuery("#commentBox").attr('id',tempName + uniqueAppend++).addClass('commentContainer')
}

Now you can find all your comment DIVs at once with jQuery(".commentContainer") and then iterate through that collection to take whatever actions you need.

Carth
  • 2,303
  • 1
  • 17
  • 26
  • Here's the script I'm currently working with: http://pastebin.com/0GYi0Jpf. As expected, it wraps each of the individual comment sections in a container, collapses the container, and adds a button; however, clicking on any of the buttons collapses/expands **all** of the comment containers. Not sure what I need to change to fix that. – Zyniker Jan 04 '14 at 05:18
  • 1
    @Zyniker - That behavior is because on line 36 your statement "jQuery(commentsDiv).toggle..." selects all objects in the collection of items that have the commentContainer class and calls their toggle method. Try this instead "jQuery(this).closest(".commentContainer").toggle..." – Carth Jan 04 '14 at 05:59
  • I've gone ahead and moved the script into the header (at least while testing) and everything is working as expected except the toggle function. Oddly, when I make the change you suggested it simply stops toggling the comments container at all. e.g., http://www.sitestyling.ca/abbyphotography/tyler-kaylas-two-eagles-golf-course-wedding/. – Zyniker Jan 04 '14 at 06:07
  • Okay, fixed that issue. Just a matter of changing up the selection a bit because it was searching back through the DOM when it needed to go up a level and then searching siblings. Anyway, the code I am using is now: http://pastebin.com/14u7vtNL. The only remaining issue is that the comment button for **all** comment sections toggles, instead of just the clicked button. – Zyniker Jan 04 '14 at 06:20
  • 1
    Yeah I changed that to "jQuery(this).parents().eq(1).children(".commentContainer")" and it works now. I'm going to have to call it a night here but I think you're on the right track. The behavior where it's toggling all buttons is due to ln 38 "jQuery('.toggle-comments')" keep in mind that statements like this reselect from the document level, all items that match your selector. If you want to just get the current button you'll have to use the context of jQuery(this) to help you navigate the DOM and find the correct element like we did for the comment container. – Carth Jan 04 '14 at 06:26
  • That's what I've been looking at, but I'm not sure how properly to set the variable to the particular .toggle-comments I need to target. I'll keep working on it and see if I can get it functioning. Thanks for your help so far. – Zyniker Jan 04 '14 at 06:37
  • I believe I may have it functioning as desired. I'm going to mark your answer as accepted. Thank you for the help. I'll also update the first link in the thread with the additional information. – Zyniker Jan 04 '14 at 07:02