jquery show and hide elements with click, interferes with ajax

Question

jquery show and hide elements with click, interferes with ajax

Navigation

#1 by (1 votes)

0

It worked perfect until I used ajax. Do you have any other way of doing it? * They have enough rows of data from #result followed by div.unicc

I want to give it in the + open the next .unicc Someone to solve me please.

$(".Mostrar_Tabla").click(function(){
  $trOcultar = $(this).parents(".todd").next(".unicc");

  if ($trOcultar.is(":visible")) {
      $trOcultar.css("display", "none");
  }
  else {
      $trOcultar.css("display", "");
  }
  
  //cuando use este ajax no funcionó más.
$(buscar_datos());

function buscar_datos(consulta){
	$.ajax({
		url: 'buscar.php' ,
		type: 'POST' ,
		dataType: 'html',
		data: {consulta: consulta},
	})
	.done(function(respuesta){
		$("#tabla_resultado").html(respuesta);
	})
	.fail(function(){
		console.log("error");
	});
}


$(document).on('keyup','#busqueda', function(){
	var valor = $(this).val();
	if (valor != "") {
		buscar_datos(valor);
	}else{
		buscar_datos();
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="todd col-md-12" id="resultado">
<div class="Mostrar_Tabla col-md-1"><b>+</b></div>
<div class="col-md-1">99903053</div>
<div class="col-md-1">50</div>
</div>
<div class="unicc" style="display:none;">
Aqui esta un contenido oculto
 </div>
<div class="todd col-md-12" id="resultado">
<div class="Mostrar_Tabla col-md-1"><b>+</b></div>
<div class="col-md-1">99903054</div>
<div class="col-md-1">60</div>
</div>
<div class="unicc" style="display:none;">
Aqui esta un contenido oculto
 </div>
<div class="todd col-md-12" id="resultado">
<div class="Mostrar_Tabla col-md-1"><b>+</b></div>
<div class="col-md-1">99903055</div>
<div class="col-md-1">20</div>
</div>
<div class="unicc" style="display:none;">
Aqui esta un contenido oculto
 </div>

jquery ajax

asked by Marco Torres 26.03.2018 в 22:38

source

1 answer

Edit python file Apache Virtualhost and Internet Information Services (IIS)

score 1 · Answer 1

The problem is not that the event click() interfere with the $.ajax() or vice versa but that you forgot to add the close of the instruction before executing the function $(buscar_datos()); which by the way is not the appropriate way to do it .

$(".Mostrar_Tabla").click(function() {
      $trOcultar = $(this).parents(".todd").next(".unicc");

      if ($trOcultar.is(":visible")) {
        $trOcultar.css("display", "none");
      } else {
        $trOcultar.css("display", "");
      }
    }); //esta linea es la que te faltaba

   buscar_datos(); //deberias llamar a la funcion de esta forma y no dentro del selector JQuery

    function buscar_datos(consulta) {
      $.ajax({
          url: 'buscar.php',
          type: 'POST',
          dataType: 'html',
          data: {
            consulta: consulta
          },
        })
        .done(function(respuesta) {
          $("#tabla_resultado").html(respuesta);
        })
        .fail(function() {
          console.log("error");
        });
    }


    $(document).on('keyup', '#busqueda', function() {
      var valor = $(this).val();
      if (valor != "") {
        buscar_datos(valor);
      } else {
        buscar_datos();
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="todd col-md-12" id="resultado">
  <div class="Mostrar_Tabla col-md-1"><b>+</b></div>
  <div class="col-md-1">99903053</div>
  <div class="col-md-1">50</div>
</div>
<div class="unicc" style="display:none;">
  Aqui esta un contenido oculto
</div>
<div class="todd col-md-12" id="resultado">
  <div class="Mostrar_Tabla col-md-1"><b>+</b></div>
  <div class="col-md-1">99903054</div>
  <div class="col-md-1">60</div>
</div>
<div class="unicc" style="display:none;">
  Aqui esta un contenido oculto
</div>
<div class="todd col-md-12" id="resultado">
  <div class="Mostrar_Tabla col-md-1"><b>+</b></div>
  <div class="col-md-1">99903055</div>
  <div class="col-md-1">20</div>
</div>
<div class="unicc" style="display:none;">
  Aqui esta un contenido oculto
</div>