Почему в начале появляется 2 панели мониторинга, а одна из них исчезает только после нажатия кнопки?

ProgramBox

Почему в начале появляется 2 панели мониторинга, а одна из них исчезает только после нажатия кнопки?

Post author:admin
Запись опубликована:25 февраля, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

В настоящее время я пытаюсь отобразить 2 панели мониторинга на своем веб-сайте. Они предназначены для разделения кнопкой переключения, что означает, что пользователь никогда не должен видеть, как они отображаются на одной странице.

Однако каждый раз, когда я впервые запускаю веб-сайт, я всегда вижу, что на первой странице появляются как первая, так и вторая панели мониторинга, где должна быть только первая панель мониторинга. И как только я дважды нажму кнопку переключения и вернусь на ту же страницу, вторая панель мониторинга исчезнет. Почему это происходит и как сделать так, чтобы вторая панель мониторинга никогда не появлялась на странице первой панели мониторинга даже с самого начала?

Код JavaScript ниже:

 <!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript"
        src="https://public.tableau.com/javascripts/api/tableau-2.min.js"> 
    </script>


    <script>
      function toggle() {
        var x1 = document.getElementById("dashboard1");
        var x2 = document.getElementById("dashboard2");
        var bl = document.getElementById("button1");

        if (x1.style.display === "none") {
          x1.style.display = "block";
          x2.style.display = "none";
          bl.firstChild.data = "To Data B";
        } else {
          x1.style.display = "none";
          x2.style.display = "block";
          bl.firstChild.data = "To Data A";
        }
      }

    function initialize() {

      var containerDiv1 = document.getElementById("dashboard1"),
      url1 = "https://public.tableau.com/views/liveintegration1/Dashboard1",
      options1 = {
                      hideTabs: true,
                      onFirstInteractive: function () {
                          console.log("Run this code when the viz has finished loading.");
                      }
                  };
      var viz1 = new tableau.Viz(containerDiv1, url1, options1);



      var containerDiv2 = document.getElementById("dashboard2"),
      url2 ="https://public.tableau.com/views/LearnEmbeddedAnalytics/SalesOverviewDashboard",
      options2 = {
                      hideTabs: true,
                      onFirstInteractive: function () {
                          console.log("Run this code when the viz has finished loading.");
                      }
                  };
      var viz2 = new tableau.Viz(containerDiv2, url2, options2);

    }

    </script>

    <style>
    #dashboard1 {
      width:800px; 
      height:700px;
      width: 100%;
      margin-top: 20px;
    }
    #dashboard2 {
      width:800px; 
      height:700px;
      width: 100%;
      margin-top: 20px;
    }
    </style>
  </head>
  <body onload="initialize()">

    <button id="button1" onclick="toggle()">To Data B</button>

    <div id="dashboard1" style="width:800px; height:700px;"></div>

    <div id="dashboard2" style="width:800px; height:700px;"></div>

  </body>
</html>

1. onload — это не то же самое, что document.ready. Попробуйте Jquery, ваша функция будет вызвана позже. Также примените CSS к панели мониторинга, которую вы хотите скрыть с помощью display:none

2. @VisakhVijayan Я попытался добавить display: none, как следует из первого ответа, хотя это может удалить вторую панель мониторинга на первой странице, но при этом вторая панель мониторинга на второй странице также исчезнет. страница. Есть ли решение, чтобы они отображались так, как задумано?

3. Если у вас разные URL-адреса, вы можете запустить функцию и проверить, какой это URL. Если это панель dashboard1Url, добавьте display:none в button2 и наоборот

Ответ №1:

Добавьте display: none; ко второй панели стили

     #dashboard2 {
      display: none;
      width:800px; 
      height:700px;
      width: 100%;
      margin-top: 20px;
    }

1. Я пытался, хотя это может удалить вторую панель мониторинга на первой странице, но это приведет к исчезновению второй панели мониторинга на второй странице. Есть ли решение, чтобы они отображались так, как задумано?

Ответ №2:

Добавьте это в функцию initialize() {}

 containerDiv2.style.display = 'none';

Нравится

     function initialize() {

      var containerDiv1 = document.getElementById("dashboard1"),
      url1 = "https://public.tableau.com/views/liveintegration1/Dashboard1",
      options1 = {
                      hideTabs: true,
                      onFirstInteractive: function () {
                          console.log("Run this code when the viz has finished loading.");
                      }
                  };
      var viz1 = new tableau.Viz(containerDiv1, url1, options1);



      var containerDiv2 = document.getElementById("dashboard2"),
      url2 ="https://public.tableau.com/views/LearnEmbeddedAnalytics/SalesOverviewDashboard",
      options2 = {
                      hideTabs: true,
                      onFirstInteractive: function () {
                          console.log("Run this code when the viz has finished loading.");
                      }
                  };
      var viz2 = new tableau.Viz(containerDiv2, url2, options2);
    containerDiv2.style.display = 'none';
    }

1. Я настоятельно не рекомендую устанавливать стили определенных элементов с помощью js: настройка класса более плавная и простая для чтения. #hidden {display:none;} #shown {display: block;} а затем при необходимости установите класс