Independent actions in tabs

Question

Independent actions in tabs

Navigation

#1 by (0 votes)

0

I have two tabs and I need to display independent information on each of the tabs. On the first tab, I can show the information I need. However, in the second tab I need to reference the content shown using another link. In this new link, the information is already consolidated and I just need to show in the second tab. How can I reference this content in my second tab? Here are some code snippets below.

<script>
    function openCity(evt, cityName) {
        var i, x, tablinks;
        x = document.getElementsByClassName("city");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablink");
		for (i = 0; i < x.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" w3-gray", "");
		}
		document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " w3-gray";
    }
</script>

<div id="ABA1" class="w3-container w3-border city">
	***** CONTEUDO MOSTRADO E IMPLEMENTADO CORRETAMENTE *****
</div>
            
 <div id="Programador" class="w3-container w3-border city" style="display:none">
	***** CONTEUDO QUE DEVE SER MOSTRADO A PARTIR DA REFERENCIA:
	geIndicators.php?rType=STKEXPO&rFilter=PROGRAMADOR&rArea=PCM *****				
</div>

javascript html

asked by anonymous 18.10.2017 / 20:52

1 answer

Error trying to write comboBox and MaskTextBox Send user to an email app

score 0 · Answer 1

You will have to use ajax to get the contents of the other page:

function openCity(evt, cityName) {
    var i, x, tablinks;
    x = document.getElementsByClassName("city");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < x.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" w3-gray", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " w3-gray";

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById(cityName).innerHTML = xhttp.responseText;
        }
    };
    xhttp.open("GET", "url_arquivo?params", true);
    xhttp.send();
}