How to clean only the current tab!

Question

How to clean only the current tab!

Navigation

#1 by (2 votes)

1

I have a menu of tabs, and I would like to refresh only the tab I'm in, keeping the other's data.

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>

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

example: JSF

javascript html

asked by anonymous 03.07.2014 / 16:49

1 answer

Editing tables, DateField field String with spaces - Regex IsMatch returns true when it should return false

score 2 · Accepted Answer

You need to insert (preferably in 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 in JSFiddle. Hope it helps!