Let us know when the information on a different tab is updated

Question

Let us know when the information on a different tab is updated

I have multiple tabs and I want to indicate when a change occurs on another tab that the user hasn't clicked. For example, if the user hits the run button while on the Data pane, I would like the Errors tab to change to red to show that there was a change on that tab as well. How can I achieve this? Conversely, if they're on the error tab, the Data tab should turn red. Also, once the tab is clicked, I want to remove the red color. Any assistance would be appreciated!

Desired Output

runCode = () => {
   document.getElementById("dataOutput").innerHTML = "Paragraph changed!";
   document.getElementById("errorOutput").innerHTML = "Error Occurred";
 }

.fab {
  width: 60px;
  height: 60px;
  background-color: #A7C0CD;
  border-radius: 50%;
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transition: all 0.1s ease-in-out;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  text-align: center;
  line-height: 58px;
  float: right;
  margin: 8px;
  z-index: 5000;
  position: absolute;
  right:0;
  top:0;
}

.fab:hover {
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transform: scale(1.05);
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  </head>
    <!-- Visual appearance -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"></script>
  <body>

<div class="fab" id="runCode" onclick="runCode();">RUN</div>
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#data">Data</a></li>
          <li><a data-toggle="tab" href="#error">Errors</a></li>
        </ul>

        <div class="tab-content">
          <div id="data" class="tab-pane fade in active">
            <div id="dataOutput"></div>
          </div>
          <div id="error" class="tab-pane fade">
            <div id="errorOutput"></div>
          </div>
        </div>

  </body>
</html>

javascript css

Answer 1

Answer №1

Utilizing MutationObservers, I believe I have successfully achieved your desired outcome. Although it may require some restructuring, the essence should be clear:

// To reuse our tabs, we store a reference to them
const data = document.getElementById("dataOutput");
const error = document.getElementById("errorOutput");
const runCode = () => {
  data.textContent = "Paragraph changed!";
  error.textContent = "Error Occured";
};

// Remove the 'changed' class from clicked tabs
const tabs = document.querySelector('.nav-tabs');
tabs.onclick = ({ target }) => target.classList.remove('changed');

// Watch for mutations in our output elements
new MutationObserver(observe).observe(data, { childList: true });
new MutationObserver(observe).observe(error, { childList: true })

function observe(mutations) {
  const target = mutations[0].target;
  // Extract the name of the changed tab by removing 'Output' from the target's id
  const tabName = target.id.slice(0, target.id.indexOf('O'));
  const tab = document.querySelector(`a[href="#${tabName}"]`);
 
  // Add the 'changed' class to the corresponding tab if it's not currently active
  if (!target.parentNode.classList.contains('active')) {
    tab.classList.add('changed');
  }
}

.fab {
  width: 60px;
  height: 60px;
  background-color: #A7C0CD;
  border-radius: 50%;
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transition: all 0.1s ease-in-out;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  text-align: center;
  line-height: 58px;
  float: right;
  margin: 8px;
  z-index: 5000;
  position: absolute;
  right:0;
  top:0;
}

.fab:hover {
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transform: scale(1.05);
}

a.changed {
  color: red
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <head>
    <!-- Visual appearance -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f150e0a1a0d063f4c514b514e">[email protected]</a>/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081df9c989fdf9b82b1c2dfc2dfc4">[email protected]</a>/bootstrap.min.js"></script>
  </head>
  <body>

<div class="fab" id="runCode" onclick="runCode();">RUN</div>
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#data">Data</a></li>
          <li><a data-toggle="tab" href="#error">Errors</a></li>
        </ul>

        <div class="tab-content">
          <div id="data" class="tab-pane fade in active">
            <div id="dataOutput"></div>
          </div>
          <div id="error" class="tab-pane fade">
            <div id="errorOutput"></div>
          </div>
        </div>

  </body>
</html>

Answer 2

Utilizing MutationObservers, I believe I have successfully achieved your desired outcome. Although it may require some restructuring, the essence should be clear:

// To reuse our tabs, we store a reference to them
const data = document.getElementById("dataOutput");
const error = document.getElementById("errorOutput");
const runCode = () => {
  data.textContent = "Paragraph changed!";
  error.textContent = "Error Occured";
};

// Remove the 'changed' class from clicked tabs
const tabs = document.querySelector('.nav-tabs');
tabs.onclick = ({ target }) => target.classList.remove('changed');

// Watch for mutations in our output elements
new MutationObserver(observe).observe(data, { childList: true });
new MutationObserver(observe).observe(error, { childList: true })

function observe(mutations) {
  const target = mutations[0].target;
  // Extract the name of the changed tab by removing 'Output' from the target's id
  const tabName = target.id.slice(0, target.id.indexOf('O'));
  const tab = document.querySelector(`a[href="#${tabName}"]`);
 
  // Add the 'changed' class to the corresponding tab if it's not currently active
  if (!target.parentNode.classList.contains('active')) {
    tab.classList.add('changed');
  }
}

.fab {
  width: 60px;
  height: 60px;
  background-color: #A7C0CD;
  border-radius: 50%;
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transition: all 0.1s ease-in-out;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  text-align: center;
  line-height: 58px;
  float: right;
  margin: 8px;
  z-index: 5000;
  position: absolute;
  right:0;
  top:0;
}

.fab:hover {
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transform: scale(1.05);
}

a.changed {
  color: red
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <head>
    <!-- Visual appearance -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f150e0a1a0d063f4c514b514e">[email protected]</a>/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081df9c989fdf9b82b1c2dfc2dfc4">[email protected]</a>/bootstrap.min.js"></script>
  </head>
  <body>

<div class="fab" id="runCode" onclick="runCode();">RUN</div>
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#data">Data</a></li>
          <li><a data-toggle="tab" href="#error">Errors</a></li>
        </ul>

        <div class="tab-content">
          <div id="data" class="tab-pane fade in active">
            <div id="dataOutput"></div>
          </div>
          <div id="error" class="tab-pane fade">
            <div id="errorOutput"></div>
          </div>
        </div>

  </body>
</html>

Answer 3

Answer №2

To illustrate how this can be achieved:

executeCode = () => {
   document.getElementById("dataOutput").innerHTML = "Updated paragraph!"
   document.getElementById("errorOutput").innerHTML = "An Error Occurred"
   document.querySelector("li:not(.active) > a").style.color = "Blue"
 }

.fab {
      width: 60px;
      height: 60px;
      background-color: #A7C0CD;
      border-radius: 50%;
      box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
      transition: all 0.1s ease-in-out;
      font-size: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      color: white;
      text-align: center;
      line-height: 58px;
      float: right;
      margin: 8px;
      z-index: 5000;
      position: absolute;
      right:0;
      top:0;
    }

    .fab:hover {
      box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
      transform: scale(1.05);
    }

 <html>
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      </head>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jsdelivr@16.5.6/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/jsdelivr@13.48.32/bootstrap.min.js"></script>
      </head>
      <body>

    <div class="fab" id="executeCode" onclick="executeCode();">EXECUTE</div>
            <ul class="nav nav-tabs">
              <li class="active"><a id="dataTab" data-toggle="tab" href="#data">Data</a></li>
              <li><a id="errorTab" data-toggle="tab" href="#error">Errors</a></li>
            </ul>

            <div class="tab-content">
              <div id="data" class="tab-pane fade in active">
                <div id="dataOutput"></div>
              </div>
              <div id="error" class="tab-pane fade">
                <div id="errorOutput"></div>
              </div>
            </div>
      </body>
    </html>

For a more interactive approach, Javascript can identify the displayed text in a tab and change the corresponding tab's color to red.

Simply assign IDs to the tabs and adjust the css property for "color".

Answer 4

To illustrate how this can be achieved:

executeCode = () => {
   document.getElementById("dataOutput").innerHTML = "Updated paragraph!"
   document.getElementById("errorOutput").innerHTML = "An Error Occurred"
   document.querySelector("li:not(.active) > a").style.color = "Blue"
 }

.fab {
      width: 60px;
      height: 60px;
      background-color: #A7C0CD;
      border-radius: 50%;
      box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
      transition: all 0.1s ease-in-out;
      font-size: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      color: white;
      text-align: center;
      line-height: 58px;
      float: right;
      margin: 8px;
      z-index: 5000;
      position: absolute;
      right:0;
      top:0;
    }

    .fab:hover {
      box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
      transform: scale(1.05);
    }

 <html>
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      </head>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jsdelivr@16.5.6/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/jsdelivr@13.48.32/bootstrap.min.js"></script>
      </head>
      <body>

    <div class="fab" id="executeCode" onclick="executeCode();">EXECUTE</div>
            <ul class="nav nav-tabs">
              <li class="active"><a id="dataTab" data-toggle="tab" href="#data">Data</a></li>
              <li><a id="errorTab" data-toggle="tab" href="#error">Errors</a></li>
            </ul>

            <div class="tab-content">
              <div id="data" class="tab-pane fade in active">
                <div id="dataOutput"></div>
              </div>
              <div id="error" class="tab-pane fade">
                <div id="errorOutput"></div>
              </div>
            </div>
      </body>
    </html>

For a more interactive approach, Javascript can identify the displayed text in a tab and change the corresponding tab's color to red.

Simply assign IDs to the tabs and adjust the css property for "color".

Let us know when the information on a different tab is updated

Desired Output

Answer №1

Answer №2

Similar questions

Would it be considered poor design to send back a partial view with just a simple JavaScript alert in my ASP.NET MVC application?

What steps can be taken to issue an alert when the table does not contain any records?

Utilize JavaScript to redirect based on URL parameters with the presence of the "@ symbol"

What is the best way to ensure the search box remains fixed in the top navigation bar while maintaining a fluid and responsive design?

Stop the promise chain when the first error callback is encountered

Enhancing WordPress Icons for Parent and Child Elements

Verifying dynamic number inputs generated using JavaScript values and calculating the total with a MutationObserver

Utilizing JavaScript to enable HTML checkbox to be checked automatically

Having trouble with AngularJs and moment.js integration?

Hide Material UI Drawer when clicking elsewhere

Update the color of the angular material input text box to stand out

Enable seamless SCSS inclusion in Vue components through automatic importing

Toggle display of list items using jQuery on click event

Creating a Navigation Bar using the Flexbox property

The code is triggering IE 8 to switch to compatibility mode resembling IE7

Passport JS fails to pass req.user data to Angular Controller

Does JSON have a special reserved key for identifying the time?

What is the best way to iterate through an array containing multiple objects in order to create a graph?

Angular 2 encountered a fatal error: Issues with parsing the template:

I am currently struggling with the mapquest GeoJson integration within my Node/Express application. I keep encountering an error message that reads "body used already."