Why is Ajax only working the first time?

Question

Why is Ajax only working the first time?

Navigation

#1 by (4 votes)
#2 by (1 votes)

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 name of the table and another button that filters the information I want.

My problem is that the filter button is working only once, as well as changing the behavior of the other button hiding the table.

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

asked by anonymous 15.01.2015 / 13:14

2 answers

How do I set an element via jQuery / Javascript? How to get object position (index)

score 4 · Answer 1

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

Use the on method 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 associated again even after the control is recreated.

score 1 · Answer 2

In your HTML section I did not see any DIV that has the "contentAjax" class. Maybe you are 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.

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

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

Make sure it is not overwritten by any ajax and try again.