Independent actions in tabs

Question

I have two tabs and I need to show independent information in each of the tabs. In 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? Below are some code snippets.

<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>
            

Answer 1

You will have to use ajax to pick up content from 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();
}