Shortcode mystery!

  • Resolved mcyzyk

    (@mcyzyk)


    1 month ago

    On a single page within WordPress, I call a vendor’s shortcode three times, passing in a unique ID each time:

    [spacecapacity id=’spc_82789604453987133′]
    [spacecapacity id=’spc_135561100581561977′]
    [spacecapacity id=’spc_135557659038947762′]

    On screen, this briefly results in three different numbers/pieces of content — but then just as the whole page is rendered all three numbers/pieces of content somehow “refresh” to the value of the first shortcode.

    As I inspect the raw HTML code that’s been generated serverside and pushed out to the browser, it is correct: Three different numbers/pieces of content. And yet what I actually see on screen is the value returned by the first shortcode, three times.

    (I have gone over the Vendor’s shortcode code and all looks well to me: Each DIV it creates has a unique ID, it uses a ob_start()/return ob_get_clean(); buffer to make sure HTML is correctly captured in a buffer then returned [not echoed] out of the function, etc. etc. More, if I place each one of the shortcodes above on separate pages, all is well! They work if on separate pages.)

    What is happening in a last step of the DOM rendering that might cause three shortcodes to display the same content (always the content returned by the very first shortcode on the page) despite the fact that the HTML being pushed out to the browser is correct and has different content for each of the three shortcodes?

    A puzzler!

Viewing 9 replies - 1 through 9 (of 9 total)
  • threadi

    (@threadi)

    To judge this, we would need to know the source code used for the shortcode. Could your show it? Please use the code block for it: https://www.ads-software.com/support/forum-user-guide/block-editor/#code-block

    Thread Starter mcyzyk

    (@mcyzyk)

    Thanks! It’s not my code, it’s a Vendor’s code, so I can ‘t really post it here.

    That said, I’ve been over it again and again and it is working as expected: Witness, if I put three different shortcodes on three different pages, I get the expected results.

    The unexpected issue happens when I have multiple shortcodes on a single page. (Hence my concentration when looking at the Vendor code, making sure ob_start()/return ob_get_clean(); was correct. It is.)

    I feel like there is some kind of final stage DOM refresh that’s happening, resulting in this weird behavior. The Page sez, “Yeah, I’ve loaded the content of all three shortcodes, as you can briefly see, but now I’m going to go back, clear everything, and render all three with the value of the first one on the page.”

    ?!

    Moderator James Huff

    (@macmanx)

    What plugin is providing this shortcode’s functionality?

    Thread Starter mcyzyk

    (@mcyzyk)

    Thanks. It’s a part of a Vendor’s custom Theme, written for us. They have a shortcode that uses an API to call to get information about Room Occupancy here in our Buildings. It’s all working great, except this last, weird, refresh thing.

    threadi

    (@threadi)

    I have never experienced the phenomenon you describe. If it really is related to ob_*, it could have various causes:

    • It could be due to the PHP version. Which one do you use? Do you have the chance to change it?
    • It could be an interaction with other plugins that are active in the project. Even the theme could be a reason. Try deactivating everything and leaving only this shortcode – does that work? Then it was due to something you have deactivated.
    • And ultimately, of course, the source code of the theme itself could also be a cause. If there is an error in the structure, it can also lead to such effects. If you do not want to show the code here, contact the person you got this code from for clarification.
    Thread Starter mcyzyk

    (@mcyzyk)

    Thanks so much! Good advice.

    I just found this, in their Javascript include:

    $('<style>').text('.occupancy-report .occ-graph .circle-fill {stroke-dashoffset: '+cssFill+' !important;}').appendTo(document.head);

    Suspicious to me!

    threadi

    (@threadi)

    The code only inserts some CSS properties using JavaScript. Without seeing the bigger picture, that doesn’t explain the problem you’re describing.

    Thread Starter mcyzyk

    (@mcyzyk)

    Yeah, sorry about that.

    It is still suspicious to me because it looks like it’s changing thing by class, not unique ID.

    Searching for something that is changing things by class such that at all three instances of shortcode output would be changed….

    Thread Starter mcyzyk

    (@mcyzyk)

    OK, I think there may be Nothing To See Here, WordPress Folks:

    A thought occurred to me: What if this weird behavior is due to the last moment application of CSS?

    I disabled the CSS going against the main class in the div surrounding the shortcode output. (I disabled it by temporarily renaming the class…)

    And now, all three numbers are on screen, i.e.,

    Three shortcodes, called with three unique IDs — three results on screen.

    My conclusion: Weird behavior due to final application of CSS.

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.