2

Tengo el siguiente código en JQuery para en este caso un botón con el ID #Ant:

$('body').on('click', '#Ant', function(e) {
e.preventDefault();
    $(".Tips").hide();
    $("#Ant").prop('disabled',true);
    var dataString = $("#FrmBus").serialize()+ '&' + encodeURI("Ant")+ '='+encodeURI($("input[name$='Ant']").val());
    $.ajax({
        url: "http://localhost:81/Prueba/",type: "POST",data:dataString,cache:false,success:function(data)
        {
        $(".Tips").show();
            var $response=$.parseHTML(data);
            $response=$('.Tips',$response).html();
            $(".Tips").html($response);
            $("input:button").button();
            $("#Ant").prop('disabled',false);
        }});
            return false;});

Lo que quiero saber es si puedo poner allí también otro botón que será el que tiene el ID #Sig. Esto es para hacerlo todo en la misma función y no crear otra para ese botón siguiente. Yo luego desde PHP hago lo demás. Por ejemplo, aunque si se puede realizar no sé cómo sería el código ('#Ant #Sig' o bien '#Ant,#Sig'), quedaría algo así:

$('body').on('click', '#Ant #Sig', function(e) {
e.preventDefault();
    $(".Tips").hide();
    $("#Ant").prop('disabled',true);
    var dataString = $("#FrmBus").serialize()+ '&' + encodeURI("Ant")+ '='+encodeURI($("input[name$='Ant']").val()) + encodeURI("Sig")+ '='+encodeURI($("input[name$='Sig']").val());
    $.ajax({
        url: "http://localhost:81/Prueba/",type: "POST",data:dataString,cache:false,success:function(data)
        {
        $(".Tips").show();
            var $response=$.parseHTML(data);
            $response=$('.Tips',$response).html();
            $(".Tips").html($response);
            $("input:button").button();
            $("#Ant").prop('disabled',false);
            $("#Sig").prop('disabled',false);
          }});
            return false;});

Es que yo solo de JQuery quiero lo de ajax para que no refresque toda la página, la particularidad de cada botón lo hago desde PHP. La idea es no poner tanto código. Se puede unificar ambos botones (Anterior y Siguiente) en una sólo función o debo hacer una función para cada caso.

En HTML5 lo tengo así:

<div class="Tips">
    <form id='FrmBus' method='post' action=''>
        <p style='text-align:center'>
            <input type='button' name='Ant' id='Ant' value='Anterior'>
            <input type='button' name='Sig' id='Sig' value='Siguiente'>
        </p>
    </form>
</div>

Y desde PHP una parte del código está así:

    if (!isset($_SESSION['T'])) {
        $_SESSION['T']=15;
    }else{
        if(isset($_POST['Ant']) && !empty($_POST['Ant'])) {
            $_SESSION['T']--;
         }
        if(isset($_POST['Sig']) && !empty($_POST['Sig'])) {
            $_SESSION['T']++;
         }
    }
    mysqli_stmt_bind_param($sql,'i',$_SESSION['T']);
   ...
   ... 

3 respuestas 3

4

Para incluir multiples selectores debes separarlos por una coma (,) como se ve en el ejemplo a continuación:

$('body').on('click', '#btn-first, #btn-second', function(e) {
  alert('Se clickeo el botón con texto: ' + e.target.innerText);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn-first" type="button">Primero</button>
<button id="btn-second" type="button">Segundo</button>

En tu caso, tu código podría quedar de la siguiente forma:

$('body').on('click', '#Ant, #Sig', function(e) {
    e.preventDefault();

    var $btn = $(e.target);

    $('.Tips').hide();
    $btn.prop('disabled',true);

    var dataString = $('#FrmBus').serialize() + '&' + encodeURI($btn.attr('name')) + '=' + encodeURI($btn.val());
    
    $.ajax({
        url: 'http://localhost:81/Prueba/',
        type: 'POST',
        data: dataString,
        cache: false,
        success: function(data) {
            $('.Tips').show();
            var $response = $.parseHTML(data);
            $response=$('.Tips', $response).html();
            $('.Tips').html($response);
            $('input:button').button();
            $btn.prop('disabled', false);
        },
    });

    return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="FrmBus" method="post" action="">
    <p style="text-align: center">
        <input type="button" name="Ant" id="Ant" value="Anterior">
        <input type="button" name="Sig" id="Sig" value="Siguiente">
    </p>
</form>

6
  • Lo puse con la modificación que indicas, o sea haciendo uso de var $btn = $(e.target); pero no me funciona el código de los botones desde PHP. Por eso lo deje como estaba, pero con el '#Ant, #Sig' y agregando claro lo que respecta a #Sig. Aquí si anda (aunque sólo el bóton 'Anterior'->#Ant), no me funciona el bóton 'Siguiente'->#Sig. Es muy raro ya que un botón solo incrementa (++) para el Siguiente y el otro decrementa (--) para el botón Anterior. Seguro que si separo cada evento del bóton en JQuery si funciona, pero no quería llegar a eso. Commented el 9 abr. 2019 a las 15:17
  • @DamianGarcia puede ser por que yo agregué a los botones un atributo value, tu lo agregaste? Si no es esto por favor agrega tu código para poder revisarlo Commented el 9 abr. 2019 a las 15:34
  • Mis botones ya tiene su propio value. En html5 tengo así: <form id='FrmBus' method='post' action=''>; <p style='text-align:center'>&nbsp;&nbsp;<input type='button' name='Ant' id='Ant' value='Anterior'>&nbsp;&nbsp;<input type='button' name='Sig' id='Sig' value='Siguiente'></p></form> yo solo edite el código de JQuery como me habías pasado. Se ve que no se puede hacer lo de ambos botones en el mismo evento, es que tengo conflicto luego desde PHP. He separado en JQuery en dos eventos distitnos (uno para el botón Anterior y otro para el Siguiente) y ahí si me funcionó. Commented el 9 abr. 2019 a las 16:55
  • Encontré una diferencia con lo que actualizaste del problema, cuando formo la URL utilizo el valor del botón para la función encodeURI, ya que cuando hice el ejemplo no sabia como tenias definido el HTML. Actualizaré mi respuesta, creo que ese puede ser el problema Commented el 9 abr. 2019 a las 20:29
  • @DamianGarcia quedo actualizada la respuesta, la construcción de la variable dataString ahora es más sencilla Commented el 9 abr. 2019 a las 20:35
1

podrias hacer asi :

$(document).on("click", (e) => {
  switch(e.target.id){
    case "Ant":
      console.log("has clickeado el boton ANT");
      break;
    case "Sig":
      console.log("has clickeado el boton SIG");
      break;
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="Ant">Ant</button>
<button type="button" id="Sig">Sig</button>

en este caso es un switch del id del elemento clickeado, si quieres agregaro otro botón sería suficiente agregar otro case

y si los dos tienen que hacer lo mismo (cosa que veo extraña, pero viendo el codigo que pusiste parece lo que estas intentando hacer), podrias simplemente crear una clase y ahi llamas a todos los botones que tengan que cumplir esa acción : $(document).on("click", ".miClass", (e) => { ... }

espero te sea de ayuda

0

$(".clickBnt").on("click",function(){
        var type = $(this).attr("name");
        if(type === "Ant"){
        //haz esto
        console.log("Click Ant")
        }else{
        //otro
        console.log("click Sig")
        }
    });
<button type="button" name="Ant" class="clickBnt">Ant</button>
<button type="button" name="Sig" class="clickBnt">Sig</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Puedes agregar una clase igual a los botones solo los identificas por el name.

Ejemplo:

<button type="button" name="Ant" class="clickBnt">Ant</button>
<button type="button" name="Sig" class="clickBnt">Sig</button>

El click quedaría así:

$(".clickBnt").on("click",function(){
    var type = $(this).attr("name");
    if(type === "Ant"){
    //haz esto
     console.log("Click Ant")
    }else{
    //otro
      console.log("Click Sig")
    }
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.