• Resolved ooker

    (@ooker)


    I have multiple graphs to display and want to sort them using the Advanced Tab Block. In each tab the content is like this:

    <code class="beliefnetwork" id="tab2" cypherstring="match (n)-[r]-(m) where n.gid='Kt' and m.gid='Kt' return n,r,m"></code>

    When the page first reload, the first tab does generate the graph. But if I switch tab 2, the graph in tab 2 doesn’t show up. If I switch back to tab 1, the graph in tab 1 disappears.

    Why does this happen? Here is the test page. If you open the view source you can see the js script that generates the graph. I don’t post it here because it’s quite long, and I don’t think it has much relevance to this issue.

    • This topic was modified 2 years, 11 months ago by ooker.
Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author htmgarcia

    (@htmgarcia)

    Hi @ooker,
    please share the HTML from Code editor. Use an online service such as Google Drive to share the content.

    Regards

    Thread Starter ooker

    (@ooker)

    Here is the pastebin. What is interesting is, when I visit it again the issue has partly disappeared. The each tab I have two elements to test: <div> and <code>. <div> works, but <code> doesn’t, even though outside of the tab <code> still works. But if you look at the tab 3, it still works

    • This reply was modified 2 years, 11 months ago by ooker.
    Plugin Author htmgarcia

    (@htmgarcia)

    Thanks!

    1. Is the script tag inserted inside the post? If that’s the case, don’t load the javascript through the post content.
    2. The third tab has a paragraph as only content. The code for this tab is outside. This can be seen in List view. https://ibb.co/JqqLXZV

    Thread Starter ooker

    (@ooker)

    1. Yes, the js script is inserted via the custom HTML block. What do you mean by not loading it through the post content?
    2. Yes sorry. I somehow mistaken this test version with an old version test. The code outside is to test that it still work outside the block. We only need 2 tabs to test this. The problem of “<div> works, but <code> doesn’t” is still correct for the first two tabs.

    Anyhow, can you reproduce the problem?

    • This reply was modified 2 years, 11 months ago by ooker.
    Plugin Author htmgarcia

    (@htmgarcia)

    1. Javascript is recommended to be added through the theme, plugin, etc.
    2. Inside the tab content add a group block and inside the group place the code. See if makes a difference.

    Please double check the structure is fine in Editor List view.

    Thread Starter ooker

    (@ooker)

    1. I see. Can I insert it via shortcode? (Btw, I open a discussion in WordPress Stack Exchange about this. You can comment on this further if you like Why is it recommended to insert JS through the theme, plugin, etc rather than in the post directly?)
    2. I add a group block and inside the group I place the div and code elements. Now the code element does show the graph at the first time, but then if I switch to another tab and switch back, it disappears.

    Is this structure fine? https://i.imgur.com/JrTKQcr.png. I’ve also updated the pastebin

    • This reply was modified 2 years, 11 months ago by ooker.
    Plugin Author htmgarcia

    (@htmgarcia)

    1. The first comment on WP Slack provide valid reasons why JS shouldn’t be added via post content.
    2. Looks fine to me, however there is extra content after the Tabs. If this is the desired result, then all is fine.

    Regards

    Thread Starter ooker

    (@ooker)

    2. If you visit the test page you will see that the problem still exists

    Plugin Author htmgarcia

    (@htmgarcia)

    May you elaborate?

    Plugin Author htmgarcia

    (@htmgarcia)

    Closing after 1 month of no reply.

    Regards

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Advanced Tab Block: switching tabs losing the content generated by a script’ is closed to new replies.