Why is Ajax only working the first time?

Asked

Viewed 740 times

0

I have a table with some values stored in it. In this table I also have two buttons where I can hide the values, leaving only the table name and another button that filters the information I want.

My problem is that the filter button is working only once, in addition to changing the behavior of the other button hide the table.

Here’s the code I’m using to manipulate the buttons:

JS 

$('#mostraLancamento').hide();

...

$("#filtroTrabalho").click(function(){
        var idusuario = $(".filtro").attr("id");
        //alert(idusuario);
        $.post("filtro.php",

            {'param':idusuario}, 

                        function(j) {
                                $('.dados').remove(); 
                                $('.conteudoAjax').load('home.php');    

                        }, "json"); 

    });


...

$('#ocultaLancamento').click(function(){
        $('#panelLancamento').hide();
        $('#ocultaLancamento').hide();
        $('#mostraLancamento').show();
    });

    $('#mostraLancamento').click(function(){
        $('#panelLancamento').show();
        $('#ocultaLancamento').show();
        $('#mostraLancamento').hide();
    });

HTML:

    <div class="pull-right">
      <button type="button" class="btn btn-default btn-xs" id="ocultaLancamento">
        <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span>
      </button>
      <button type="button" class="btn btn-default btn-xs" id="mostraLancamento">
        <span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span>
      </button>
      <button type="button" class="btn btn-default btn-xs" id="filtroTrabalho">
        <span class="glyphicon glyphicon-filter" aria-hidden="true">
       <?php 

          ...               

        ?>
       </span>
      </button>

...

Console:

 XHR finished loading: POST "http://servidor/painel/filtro.php". jquery-1.9.1.js:8526


 XHR finished loading: GET "http://servidor/painel/home.php". jquery-1.9.1.js:8526
javascript jquery ajax
  • 1

    After calling the filter option the first time, check the browser console and see if there is no error, probably the first time it is running some problem is occurring that is disabling the next runs, check this and inform/edit the question if there are any errors being presented in the console after the first run.

2 answers

4

The way you add code to the controls event ($('#ocultaLancamento').click(function(){...) will cause this association to be lost when component is recreated, and the component is recreated if it is re-rendered due to an Ajax request.

Use the method on of Jquery to associate functions with controls events. For example:

$('#ocultaLancamento').on('click', function(){
    $('#panelLancamento').hide();
    $('#ocultaLancamento').hide();
    $('#mostraLancamento').show();
});

This ensures that the function is re-associated even after the control is recreated.

1

In your HTML section I didn’t see any DIV that has the class "conteudoAjax". You may be trying to access a div that does not exist in your code, since when you requested the filter a second time, you may have disappeared with it.

Do the following test. Create a div with the class and test the load more than once:

<div class="conteudoAjax"></div>

Ensure that it will not be overwritten by any ajax and try again.

Browser other questions tagged javascript jquery ajax

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