0

Possuo duas abas e preciso mostrar informações independentes em cada uma das abas. Na primeira aba, consigo mostrar as informações na qual eu preciso. Porém, na segunda aba, preciso referenciar o conteúdo mostrado utilizando outro link. Neste novo link, as informações já estão consolidadas e eu só preciso mostrar na segunda aba. Como posso referenciar este conteúdo em minha segunda aba? Segue abaixo alguns trechos de código.

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

2
  • Essas abas são janelas diferentes ou estão dentro da mesma página?
    – Sergio
    Commented 18/10/2017 às 18:55
  • Elas estão na mesma página, Sergio. Commented 19/10/2017 às 10:18

1 Resposta 1

0

Você terá q usar ajax para pegar o conteudo da outra página:

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();
}
4
  • Brito, quando efetuei a troca de abas, o conteúdo da primeira página não era mais mostrado. Então, executei a seguinte alteração: Commented 19/10/2017 às 12:39
  • var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { document.getElementById(cityName).innerHTML = xhttp.responseText; } }; if(cityName == "Programador"){ xhttp.open("GET", "geIndicators.php?rType=STKEXPO&rFilter=CONSOPROGRAMADOR&rArea=PCM", true); xhttp.send(); } Commented 19/10/2017 às 12:42
  • Porém a página esta sendo duplicada. Aparecem dois cabeçalhos, dois rodapés e etc Commented 19/10/2017 às 12:45
  • so remover o cabeçalho e o rodape no arquivo da pagina q tu esta tentando carregar na aba. Caso tu entre nesta pagina de outra maneira alem de carregar pela aba tu pode passar um parametro GET pra ocultar o cabeçalho e o rodape ai quando tu for carregar pelo ajax tu passa o parametro na url
    – Brito
    Commented 19/10/2017 às 20:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .