0

I have HTML+CSS page where have two buttons:

 <!-- Tab links -->
<div class="text-center">
    <button class="tablinks" onclick="openCity(event, 'top-reviews')" id="defaultOpen">Top reviews</button>
    <button class="tablinks" onclick="openCity(event, 'most-recent')">Most recent</button>
</div>

I want "Top reviews" to be visible by default. So at the end of the page I put simple JavaScript

<script>
document.getElementById("defaultOpen").click();
</script>

which click the "Top reviews" button automatically.

Everything works well in my development environment. But when uploaded the code to the production server where CloudFlare is enabled. JavaScript click() function doesn't works.

I already wrote for the issue to CloudFlare support, but two days later is still don't have any response.

Do you have any ideas on how I can debug why this JavaScript doesn't work? Or how to make visible content of "Top reviews" via another way without need visitors to click on the button with a mouse?

CyberUser
  • 39
  • 4
  • What exactly "doesn't works" about it? Any error message? Does that script tag run in the first place? Does the element exist in the DOM when the script runs? – CertainPerformance Mar 27 '21 at 14:11
  • There are no error messages during page loading. No errors inside the browser console. Simply the button with id="defaultOpen" is not clicked. I don't see the expected content of the tab. The tab is closed. In case I click manually on the tab, it is opening (it become active) and I'm seeing the desired content. Here you are screenshots with the example i want to see this: https://ibb.co/wdx85vW but I'm seeing this: https://ibb.co/vPbzXjP So In order to see expected content I must to click on the button. – CyberUser Mar 27 '21 at 14:24
  • I can't reproduce the problem here. Check that the script tag actually runs. – CertainPerformance Mar 27 '21 at 14:25
  • 1
    Your scripts are deferred by Cloudfare. Set your javascript in `window load` event handler – A. Wolff Mar 27 '21 at 15:21

2 Answers2

1

Check this configuration

A common issue with Cloudflare is that it's trying to optimize loading process to make the site faster. But sometimes it can break javascript also because of loading resource asynchronously.

You can disable Rocket Loader with following steps:

Speed -> Optimization -> Rocket Loader -> Off
HaiTH
  • 925
  • 9
  • 9
  • This workaround most probably will work, but in practice will turn off one of the essential CloudFlare features. – CyberUser Mar 27 '21 at 19:16
  • 1
    IMHO, it's a bad feature because it interferes aggressively to front-end code and create inconsistency between development and production environment. While the benefit is unclear because most of websites providing assets with very long cached time. It just reduce a little bit time on the first loading. – HaiTH Mar 27 '21 at 20:31
0

Thank you A. Wolff

Your idea works.

I change the JavaScript loading in this way:

<body onload="LoadTopReviews()">
<!-- Skipped lines -->
<script>
function LoadTopReviews() {
    document.getElementById("defaultOpen").click();
    }
</script>

This article onload Event help me to understand what to do.

CyberUser
  • 39
  • 4