How to clean only the current tab!

Asked

Viewed 340 times

1

I have a menu of tabs, and would like to clean (refresh) only in the tab where I am, keeping the data of other.

Menu:

<body onLoad="AlternarAbas('td_cada','div_cada')">
<table width="100%" height="100"  align="left" valign="top" cellspacing="0" cellpadding="0" border="0" style="border-left: 1px solid #0000FF;">
    <tr>
        <td style="border-color:blue"  height="20" width="50" class="menu" id="td_cada" onClick="AlternarAbas('td_cada','div_cada')">Incluir</td>
        <td style="border-color:blue"  height="20" width="50" class="menu" id="td_cons" onClick="AlternarAbas('td_cons','div_cons')">Consultar</td>
    </tr>

<tr>
    <td height="200" style="border-color:blue"  width="300" class="tb-conteudo" valign="top" colspan="2" >
        <div id="div_cada" width="100" class="conteudo" style="display: block; padding-top:5px;">
            <table border="0" width="50%">
                <tr>
                    <td >
                        <iframe style="border-radius:20px;"  scrolling="no" src="../sai_cada_usua/sai_frm_incl_usua.php" width="830" height="310" >
                        </iframe>
                    </td>
                </tr>
          </table>
       </div>

        <div id="div_cons" class="conteudo" style="display: block; padding-top:5px;">
            <table border="0" width="50%">
                <tr>
                    <td>
                        <form>
                            <button type="button" value="Atualizar" style="height:26" style="width:5"  size="10" onclick='javascript:parent.location.replace("../sai_cada_usua/sai_cons_usua.php")' width="830" height="300" >
                                                                    <image src="../sai_imag/refresh.ico"> </button>
                        </form>
                        <iframe style="border-radius:20px;" scrolling="" src="../sai_cada_usua/sai_cons_usua.php" width="830" height="290" >
                        </iframe>
                    </td>
                </tr>
          </table>
       </div>

Nessa div ~> <div id="div_cons" class="conteudo" style="display: block; padding-top:5px;">, I have a button that makes the screen call again ("a atualizar"). But, as he calls all screens, he erases what may have content in the others. Is there any way to make a refresh only on it? Some specific button, etc?

example : JSF

javascript html

  • you should use ajax, to swap the contents of a single tab dynamically doing so refresh

  • Um' thanks for the tip!

1 answer

2


You need to insert (preferably into a separate .JS file) the following script, which implements the technique popularly known as AJAX.

function atualizar(divResultado, url){

    // Conforme tutorial da W3Schools: http://www.w3schools.com/ajax/default.ASP

    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById(divResultado).innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

So, just modify your <button> to call this new feature:

<button type="button" value="Atualizar" style="height:26" style="width:5" size="10" onclick="atualizar('div_cons', '../sai_cada_usua/sai_cons_usua.php');" width="830" height="300">
    <image src="../sai_imag/refresh.ico">
</button>

Remembering that if there is a similar button on sai_cons_usua.php, you should also update it.

If necessary, here is the test that I did on Jsfiddle. I hope it helps!

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.