0

Com esse código abaixo quando clico no botão mat ele me trás os dados em uma table. Gostaria que ao clicar no botão sp substitua o conteúdo da tabela por outro.

Código:

<button id="mat" class="button"></button>
<button id="sp"></button>
    <table id="matriz">

    </table>
    <table id="saopaulo">

    </table>

 

    <script>      
        $(document).ready(function(){
            $("#matriz").hide();
                $("#mat").click(function(){
                    if($("#matriz").is(":visible")){
                            $("#matriz").hide();
                        } else{
                            $("#matriz").show();
                        }                   
                    $.ajax({
                        url: "../Conteudo/Matriz.html",
                        cache: false,
                        dataType: 'html'
                    })
                    .done(function(retorno) {
                        $("#matriz").html(retorno);
                    })
                    .fail(function() {
                        alert("Algo está errado");
                    });
                });
            $("#saopaulo").hide();
                $("#sp").click(function(){
                    if($("#saopaulo").is(":visible")){
                            $("#saopaulo").hide();
                        } else{
                            $("#saopaulo").show();
                        }                   
                    $.ajax({
                        url: "../Conteudo/saopaulo.html",
                        cache: false,
                        dataType: 'html'
                    })
                    .done(function(retorno) {
                        $("#saopaulo").html(retorno);
                    })
                    .fail(function() {
                        alert("Algo está errado");
                    });
                });
            });
     </script>
9
  • Qual erro apresenta? Commented 14/04/2016 às 14:46
  • Não apresenta erro, unica coisa que envés de substituir ele poe o conteúdo do outro botão embaixo do que já tem.
    – Kevin.F
    Commented 14/04/2016 às 14:48
  • Nao entendi muito bem, ele ta criando outra tabela? Com qual id? Commented 14/04/2016 às 14:56
  • Ele faz em lugar separado porque você está dizendo pra fazer, se quer que ele substitua utilize a mesma tabela, agora se quer que ele alterne entre as tabelas, esconda uma e mostre a outra Commented 14/04/2016 às 15:06
  • Você só pode carregar 1 únivo evento .html() na sua página, para fazer isso mais de uma vez, tem que usar o evento .delegate() Commented 14/04/2016 às 16:21

3 Respostas 3

1

Basta adicionar dentro da function do done no ajax antes de atribuir o retorno no método .html(...); adicionar a seguinte linha:

No ajax de do click sp:

$("#matriz").empty(); //remove todos os nós filhos da table

Mesma coisa no ajax do click mat:

$("#saopaulo").empty(); //remove todos os nós filhos da table
2
  • @Kevin.F vê se isto resolve?
    – Igor Mello
    Commented 14/04/2016 às 19:53
  • Show de bola, era isso valeu.
    – Kevin.F
    Commented 14/04/2016 às 20:04
1

O constragimento está aqui.:

$("#matriz").html(retorno);


e

$("#saopaulo").html(retorno);


Está a inserir o conteudo em sitios diferentes o por isso de aparecer as duas tabelas.
Poderá colocar apenas 1 id ou então alterar para.:

$("#matriz").html(retorno);
$("#saopaulo").html('');


e

$("#saopaulo").html(retorno);
$("#matriz").html('');
0

Eu acredito que se você fizer desta maneira irá resolver o seu problema, eu não testei, mas se não funcionar, tente colocar o delegate para cada um dos eventClick:

$(function() {
   $("#matriz, #saopaulo").hide();      
        function eventClick(elClick, elEvent, otherElement, url) {

         $(document).delegate(elClick, 'click', function() {
            if (!$(elEvent).is(":visible")) {
                $(elEvent).show();
            } else {
                $(elEvent).hide();
            }       
              $.ajax({
                        url: url,
                        cache: false,
                        dataType: 'html'
                    })
                    .done(function(retorno) {
                        $(elEvent).html(retorno);
                        $(otherElement).html('');
                    })
                    .fail(function() {
                        alert("Algo está errado");
                    });
             });
       }
      eventClick('#matriz', '#mat', '#saopaulo', "../Conteudo/Matriz.html");
      eventClick('#saopaulo', '#sp', '#matriz',"../Conteudo/Matriz.html");
});   
9
  • Não aconteceu nada nem um botão funcionou. E se eu quiser carregar outro conteúdo no botão sp que não seja o Matriz.html como faço ?
    – Kevin.F
    Commented 14/04/2016 às 17:30
  • Pergunto: precisa fazer duas requisições ajax, ou pode ser uma só? Eu não vejo porque fazer duas? Além disso, é melhor trabalhar com dados em json, em vez de html. Commented 14/04/2016 às 18:08
  • Duas por que cada botão que clicar vira um conteúdo, tem como fazer com uma requisição isso ?
    – Kevin.F
    Commented 14/04/2016 às 18:15
  • Olha, claro que tem... você teria que carregar todo o conteúdo, de ambas as tabelas não no click... mas direto no autoload do jquery... e no botão, vc coloca só para mostrar o conteúdo que vc quer mostrar. Commented 14/04/2016 às 18:17
  • O ideal é vc trabalhar os dados em JSON, e depois dar um loop na tabela... O processo é bem mais rápido. Commented 14/04/2016 às 18:19

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 .