Ajuste de funções de um botão com Jquery

[Rogerio Pancini 0]

Bom dia pessoal.

 

Quase consegui finalizar a idéia que tive para um trabalho. Vou explicar de forma reduzida o que eu fiz: na página home tenho quatro botões em Jquery que fazem uma consulta ao banco de dados MySql, via Php.

Seriam estes exemplos:

$(document).ready(function() {
    $("#display_1").click(function() {                
        $.ajax({    //create an ajax request to load_page.php
            type: "GET",
            url: "scripts/display_1.php",        
            dataType: "html",   //expect html to be returned                
            success: function(response){                    
            $("#responsecontainer_1").html(response);
            //alert(response);
            }
        });
    });
});

$(document).ready(function() {
    $("#display_2").click(function() {                
        $.ajax({    //create an ajax request to load_page.php
            type: "GET",
            url: "scripts/display_2.php",        
            dataType: "html",   //expect html to be returned                
            success: function(response){                    
            $("#responsecontainer_2").html(response);
            //alert(response);
            }
        });
    });
});

 

Que pesquisam através desta página (display_1.php por ex):

<?php
include ("../Connections/config.php");
$conexao = mysql_connect("$hostname_config","$username_config","$password_config")
           or die($mysql_error());
mysql_set_charset('utf8',$conexao);               
$db = mysql_select_db("$database_config")
      or die($mysql_error());

$sel_tema = mysql_query("SELECT id, tema FROM tb_temas WHERE status = 'S' ORDER BY tema ASC")
                or die(mysql_error);
if(@mysql_num_rows($sel_tema <= '0')){
    echo "Erro ao selecionar dados";
}else{
    while($res_sel_tema = mysql_fetch_array($sel_tema)){
        $id_tema = $res_sel_tema[0];
        $tema      = $res_sel_tema[1];

        echo "<tr>";
        echo "<td align=center>$tema</td>";
        echo "</tr>";
    }
}
?>

 

E exibem o restulado na na página home:

<input type="button" id="display_1" value="Mais pedidos" />
<div id="responsecontainer_1" align="center"></div>


<input type="button" id="display_2" value="Outra pesquisa" />
<div id="responsecontainer_2" align="center"></div>

 

Está funcionando toda a estrutura, mas o que acontece é o seguinte:

eu clico no primeiro botão e ele exibe o resultado e, se eu clicar no segundo botão, ele vai exibir o resultado na sequencia.

Teria alguma forma do botão seguinte "limpar" a ação do botão anterior para poder exibir os resultados dele?

 

Esta é a segunda vez que uso o fórum e tentei explicar da melhor e mais resumida forma possível.

Se for necessário acrescentar mais alguma informação, por favor me avisem.

 

Desde já agradeço a atenção

[Lucas Guima 164]

Se entendi:

 $('#responsecontainer_1').html(response);
 $('#responsecontainer_2').html('');

E:

 $('#responsecontainer_2').html(response);
 $('#responsecontainer_1').html('');