Second button replacing contents of the first

Asked

Viewed 47 times

0

With this code below when I click the button mat it brings me the data in a table. I would like to click on the button sp 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>
jquery html ajax

  • Which error shows?

  • There is no error, only thing you send to replace it puts the content of the other button below what already has.

  • I don’t understand very well, is he creating another table? With which id?

  • It does it in separate place because you’re telling it to, if you want it to replace use the same table, now if you want it to switch between tables, hide one and show the other

  • You can only upload 1 single event .html() on your page, to do this more than once, you have to use the event .delegate()

  • @Kevin. F You want to replace the content from which table when you click on #sp?

  • The contents of the table matriz by the content of saopaulo.

  • @Kevin. F excuse the persistence but is to make sure to pick up the contents of the table matriz and move on to table saopaulo?

  • No, it has 2 table contents matriz when I click on it falls its contents, and when I click on sp falls the different content that is saopaulo replacing that of matriz. I’ll edit it in the code to get a better look. See if you understand better, each button brings a different content I just want to make the matrix disappear when the exit and vice versa.

Show 4 more comments

3 answers

1


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

In the ajax of click 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

  • @Kevin. F see if this works?

  • Ball show, that was worth.

1

The constraint is here.:

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


and

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


You are inserting the content in different places or why the two tables appear.
You can put only 1 id or change to.:

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


and

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

0

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

  • Nothing happened and a button worked. And if I want to press other content on the button sp other than the Matriz.html how do I do ?

  • I ask: do you need to make two ajax requests, or can it be one? I don’t see why to make two? Also, it’s better to work with json data instead of html.

  • Two Why Each Button You Click Turns Into Content, You Can Do With a Request ?

  • Look, of course you have... you would have to load all the content, of both tables not in the click... but directly in the autoload of jquery... and the button, you put only to show the content you want to show.

  • Ideally you work the data in JSON, and then loop the table... The process is much faster.

  • I don’t know how to handle JSON.

  • JSON is like array: [{chave:valor1}, {chave:valor2}], in php would be: $data['chave'] = array('valor1','valor2');

  • OK understood, I will do a study in JSON.

  • Here’s more on that subject.

Show 4 more comments

Browser other questions tagged jquery html ajax

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