Spoiler button not working all of a sudden

Technical Details

Forum version : #ModernBB
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Opera, Other
Who the problem concerns : All members
When the problem appeared : I noticed this problem on May 4, 2022 ~8:45 PM EDT.
Forum link : https://www.revivaldawn.com/

Description of problem

Hi there,

Users (registered and guests) seem to be having an issue on my forum at the moment that is preventing them from opening Spoiler boxes.

Normally, a spoiler box expands when you click on the header. However, we noticed today that nothing happens when you click on spoiler boxes all across the site. I have not made any changes recently to any JavaScript or CSS that could've triggered this issue (I'm the only one with access to the Admin Panel).

You can see this issue for yourself on these pages (among others):
Page 1
Page 2
Page 3

I noticed on a few other Forumotion sites that this does not seem to be an issue there (including the help site here).

Test:

I was able to replicate this issue on the following browsers:
Edge
Chrome
Firefox
Opera

Any thoughts would be much appreciated!

Did you use the spoiler button in the editor?

The topic was posted in the wrong section, so I have moved it to the correct section. Please read our forum rules:  ESF General Rules

SLGray wrote:Did you use the spoiler button in the editor?

The topic was posted in the wrong section, so I have moved it to the correct section. Please read our forum rules:  ESF General Rules

Yes, I did. After some more troubleshooting, I realized that one of my custom scripts seems to be causing this issue (I haven't narrowed down which yet). Note that I had not made any changes to these scripts recently, so, I'm assuming recent browser updates may have broken some JavaScript that's preventing the spoiler's click event from firing.

The spoilers on this page worked for me:  https://www.revivaldawn.com/t2212-thunder-thunder-pirates#12905

SLGray wrote:The spoilers on this page worked for me:  https://www.revivaldawn.com/t2212-thunder-thunder-pirates#12905

Now they are not  working.

SLGray wrote:

SLGray wrote:The spoilers on this page worked for me:  https://www.revivaldawn.com/t2212-thunder-thunder-pirates#12905

Now they are not  working.

Yes, I'm fiddling with my custom JavaScript to try and figure out what's breaking it. As mentioned before, I did not make changes to any of it recently, so, I can only imagine that recent browser updates must've broken an existing piece of code.

So you think that a browser update is conflicting with your JavaScripts?   Firefox did just have an update (100.0).

hello

we had some problems yesterday can you please try to clear your browser cache and retry please

thank you

Hello, 

This is a problem on our side, this will be solved soon. 

Thank you for reporting, we get back soon.

Hello,

All problems with spoiler should be solved now. Could you confirm please?

Thank you,
Best regards

I had narrowed down the part of my custom JavaScript that was causing the issue.

In my JavaScript code, I do a search through the .postbody and replace the HTML, which unfortunately seems to be unbinding the click events for spoilers.

Code:

$('.postbody').each(function () {
        var posthtml = "";
        posthtml = $(this).html();
        for (var i = 0; i < spchBBCode.length; i++) {
            posthtml = posthtml.replaceAll(spchBBCode[i], spchSpan[i]);
        };
        posthtml = posthtml.replaceAll('[/npc]', '</span>');
        posthtml = posthtml.replaceAll('[/plyr]', '</span>');
        $(this).html(posthtml);
    });

Note that I have had the above code for a while and it was working fine until now.

I ended up adding the following code to my custom JS yesterday to make the spoiler boxes work temporarily:

Code:

    $(document).on('click', '.spoiler_title', function () {
        var $spoilerbox = $(this).next().children().first();
        if ($spoilerbox.attr("hidden") == "hidden") {
            $spoilerbox.removeAttr("hidden");
        } else {
            $spoilerbox.attr("hidden", "until-found");
        }
    });

If I remove this temporary code, the spoiler boxes still do not work.

Do you have any clues as to why my custom code was working before but does not work anymore?

Thanks!

Luzz wrote:Hello,

All problems with spoiler should be solved now. Could you confirm please?

Thank you,
Best regards

@Gray did you read this post made by Luzz ?
Try and add your old code back and see if it works now but before trying this clear your browser cache

Ape wrote:

Luzz wrote:Hello,

All problems with spoiler should be solved now. Could you confirm please?

Thank you,
Best regards

@Gray did you read this post made by Luzz ?
Try and add your old code back and see if it works now but before trying this clear your browser cache

Yes, I did indeed read that post. Sorry if I was not clear in my reply. Even after the fix Luzz mentioned, spoiler tags are not working in my forum with my old code (I made sure to hard refresh and also cleared my cache). As mentioned in the previous post, I'm temporarily making them work with the following additional bit of custom JS:

Gray wrote:

Code:

    $(document).on('click', '.spoiler_title', function () {
        var $spoilerbox = $(this).next().children().first();
        if ($spoilerbox.attr("hidden") == "hidden") {
            $spoilerbox.removeAttr("hidden");
        } else {
            $spoilerbox.attr("hidden", "until-found");
        }
    });

Can i ask the code your having problems with what is it meant to do?

Hi!

we also have problems with spoilers and nothing has changed, although the problem was supposedly fixed. What should we do? Are you still fixing it?

Luzz wrote:Hello,

All problems with spoiler should be solved now. Could you confirm please?

Thank you,
Best regards

Hi Luzz,

I'm having the same problem with my forum. It started a couple of days ago and we haven't made any changes to scripts since. I've tried clearing cache to no avail. Link to forum with spoilers. Please help!

Many thanks,
Balladeer

EDIT:

I have made a report about this we was in hope that this bug was fixed but as you are still having problems we will look in to this more tomorrow.

Hello,

Thank you for your reporting.

Normally it should be comletely solved for you now (clean the cache if necessary), as we made a rollback today.

If not, please let us know We apologize for all the inconvenience caused..

Working now, thanks!

Luzz wrote:Hello,

Thank you for your reporting.

Normally it should be comletely solved for you now (clean the cache if necessary), as we made a rollback today.

If not, please let us know We apologize for all the inconvenience caused..

Unfortunately it still isn't working for us :c i cleared cache and cookies as you said, I even tried to delete spoiler's css but it didn't help.
Here is an opened for guests topic so you can see the problem.

Ok, thank you @Juviia ,

The technician is lookig at your problem (there is some conflict with JS).

(In fact, my previous message was not really right - sorry for that, there was some misunderstanding on my side, - we did not make a rollback but something to avoid all sorts of conflicts between our update and your custom codes. So our developper is looking why it did not work for you )

@Juviia ,

Sorry, finaly it is not so evident to find which of yours JS is creating a problem. We are afraid it will be not possible to find for us before the WE... And our developper cannot of coarse allow himself to make expierences with your JS and test with your codes

I will have to ask you to proceed like this :

Disable please the JS on your forum and verify if it works for your spoilers. (It should )

If so - reactivate and disable the js one by one, until you find the source of the problem.

Thank you!
Best regards

I found it! Thank you very much

Luzz wrote: @Juviia ,

Sorry, finaly it is not so evident to find which of yours JS is creating a problem. We are afraid it will be not possible to find for us before the WE... And our developper cannot of coarse allow himself to make expierences with your JS and test with your codes

I will have to ask you to proceed like this :

Disable please the JS on your forum and verify if it works for your spoilers. (It should )

If so - reactivate and disable the js one by one, until you find the source of the problem.

Thank you!
Best regards

Thank you for looking into this once again!

I had already found the code that was causing the JS conflict and posted it earlier in this thread. I will post the full snippet once again in this post.

Below is the custom code I'm using. This code was working fine, and it was not breaking the spoiler boxes before the recent update from your team.

Code:


/**COLOUR DIALOGUE************************************************/
    var spchBBCode = [
        "[npc=wgov]",
        "[npc=cpol]",
        "[npc=navy]",
        "[npc=bhun]",
        "[npc=revo]",
        "[npc=pirt]",
        "[npc=misc]",
        "[plyr=wgov]",
        "[plyr=cpol]",
        "[plyr=navy]",
        "[plyr=bhun]",
        "[plyr=revo]",
        "[plyr=pirt]",
        "[plyr=misc]"
    ];

    var spchSpan = [
        '<span class="wgov">',
        '<span class="cpol">',
        '<span class="navy">',
        '<span class="bhun">',
        '<span class="revo">',
        '<span class="pirt">',
        '<span class="misc">',
        '<span class="plyr wgov">',
        '<span class="plyr cpol">',
        '<span class="plyr navy">',
        '<span class="plyr bhun">',
        '<span class="plyr revo">',
        '<span class="plyr pirt">',
        '<span class="plyr misc">'
    ];   
   
    $('.postbody').each(function () {
        var posthtml = "";
        posthtml = $(this).html();
        for (var i = 0; i < spchBBCode.length; i++) {
            posthtml = posthtml.replaceAll(spchBBCode[i], spchSpan[i]);
        };
        posthtml = posthtml.replaceAll('[/npc]', '</span>');
        posthtml = posthtml.replaceAll('[/plyr]', '</span>');
        $(this).html(posthtml);
    });

    posthtml = null;
    spchSpan = null;
    spchBBCode = null;

    /***********************************************************************/


The exact line in my above snippet that is breaking the spoiler boxes after your recent update is line 45. I believe the reason for this is that replacing the HTML is unbinding the click events on the spoiler boxes.

I'm temporarily making the spoiler boxes work by adding the following code to my custom JS:

Code:

    $(document).on('click', '.spoiler_title', function () {
        var $spoilerbox = $(this).next().children().first();
        if ($spoilerbox.attr("hidden") == "hidden") {
            $spoilerbox.removeAttr("hidden");
        } else {
            $spoilerbox.attr("hidden", "until-found");
        }
    });

I hope this helps your developer narrow down which changes caused my pre-existing custom code to break.

Thanks!

Hi,

We've also experienced similar issue with spoilers on our forum using script from Tips&Tricks:

https://help.forumotion.com/t144115-hide-the-sentence-last-edited-by-on-specific-or-all-messages#984268

It seems that changes in DOM HTML content through this script prevents attaching click EventListener to spoilers

Hello ,
@Gray @mremmet and all who still had problems with spoilers - our developper made some improvement concerning the treatement of JS,

could you please try again, with your own JS activated, if the spoilers are displayed correctly now ? And if not, could you give us the URS of the messages or topics where the problem occure ?

Thank you a lot.

Regards

Luzz wrote:Hello ,
@Gray @mremmet and all who still had problems with spoilers - our developper made some improvement concerning the treatement of JS,

could you please try again, with your own JS activated, if the spoilers are displayed correctly now ? And if not, could you give us the URS of the messages or topics where the problem occure ?

Thank you a lot.

Regards

I'm no longer experiencing this issue with my old code! The latest improvement from your developer seems to have resolved the problem. Thank you very much!

I also confirm that issue no longer occurs on old code