Second button replacing content of the first

Question

Second button replacing content of the first

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

With this code below when I click the mat button it brings me the data in a table. I would like that by clicking the sp button replace the contents of the table with another.

Code:

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

html jquery ajax

asked by anonymous 14.04.2016 / 16:30

3 answers

1

The constraint is here:

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

and

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

You are entering the content in different places so that the two tables appear. You can enter only 1 id or change to:

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

and

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

14.04.2016 / 17:05

0

I believe that if you do this way it will solve your problem, I have not tested it, but if it does not work, try to put the delegate for each of the 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");
});

14.04.2016 / 18:33

Click on a centered image and drag it to the left link or right link? I can not change the layout on android

score 1 · Accepted Answer

Just add within the function of done in ajax before assigning the return in method .html(...); add the following line:

In the click ajax of sp :

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

Same thing in click ajax mat :

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