0

Tengo implementado un sistema de comentarios que permite responder a cada uno de ellos mediante un botón que abre un formulario y procesa la respuesta con Ajax. Primero a los botones les di el mismo atributo de clase pero el problema era que al enviar la respuesta, siempre la enviaba al primer comentario (no al otro que quiero responder) ya que coge el primer elemento con esa clase. Ahora he hecho que se le asigne un id al botón en el bucle que genera estos botones, de la siguiente forma:

//solo muestro cómo genero el botón ya que si no es muy extenso
$i=0;
while($mostrar=mysqli_fetch_object($comentarios)){
                    $i=$i+1;

                        <?php echo '<td id="comentarios"><button class="responderComent" id="responderComent'.$i.'" value="'.$mostrar->IdComentario.'">💬</button></td>';  ?>
}

De esta manera, tengo para cada comentario un botón con su identificador asignado responderComent1, responderComent2, etc. Tras hacer esto no me ha quedado más remedio de poner un límite de 5 comentarios ya que para cada botón tengo que crear su función especifica en javascript que la procese porque luego cada una de ellas tiene una vez más un ID específico:

$("#responderComent1").click(function(){...
         $(this).before('<form action="javascript:void(0);" class="formRespuesta><input type="text" id="resp1"/>
         <button id="enviarComent1">Enviar</button></form>);
$("#responderComent2").click(function(){...
         <input type="text" id="resp2"... 
         <button id="enviarComent2"...
...

Despues tengo para cada botón enviarComent...:

    $(document).on('click', '.enviarComent1', function(){
        var texto = $(this).parents("form").find("#resp1").val();
        var idComentario = $("#responderComent1").val();
        $.ajax({
            type:"POST",
            url: "procesarRespuestasComentario.php",
            data: {texto:texto, idComentario:idComentario},
            success:function(r){
                $('#respuestas1').html(r);
            }
        });
    });

Lo que quería saber es si hay alguna forma de poder "comprimir" todas estas funciones en una sola que pudiera diferenciar los Id's de forma que para cada uno de ellos haga su función concreta generando el campo de texto y su botón correspondientes ya que ahora tengo que tener tantas funciones $(#responderComentX).click y $(#enviarComentX).click como comentarios tenga en la página y por ello actualmente lo limito a 5.

6
  • no veo como defines el formulario donde escribes el texto del mensaje de comentario. el bucle php solo genera un php del boton. Te pongo un ejemplo de como puedes hacerlo en la solucion, pero deberas ajustarlo a tu proposito.
    – Jakala
    Commented el 22 may. 2020 a las 10:15
  • Si he entendido bien, puedes asignar la misma clase a los diferentes botones, asignar un listener en base a esa clase y desde ese listener indentificar el botón que haya sido pulsado por su id, de ese modo controlarías todo desde una sola función. Dado que das muchas vueltas en el planteamiento, no sé si es exactamente eso lo que quieres o es otra cosa.
    – A. Cedano
    Commented el 22 may. 2020 a las 10:19
  • @Jakala básicamente en el bucle muestro cada comentario que tiene la web en una tabla y al lado el botón para responder a ese comentario concreto por eso he omitido toda la info ya que la veía poco relevante, estoy estudiando un poco la solución que me has propuesto más abajo para adaptarla y ver qué tal
    – gonzalofdv
    Commented el 22 may. 2020 a las 11:12
  • @A.Cedano la verdad que mi expresión no es muy buena cuando trato de explicarme, pero sí, quiero identificar qué botón se ha pulsado, para que dependiendo del botón se coja el valor correspondiente al id del comentario ''value=$mostrar->IdComentario" para saber a qué comentario me estoy refiriendo, y que al enviar el mensaje en el campo con id #resp se asigne esa respuesta al comentario en concreto. Estoy estudiando las soluciones propuestas para ver qué tal. Muchas gracias
    – gonzalofdv
    Commented el 22 may. 2020 a las 11:18
  • ¿Podrías explicar brevemente, en un párrafo, cuál es la lógica? El planteamiento es confuso y creo que el problema no es tan complejo (a veces el principal problema es no saber explicar el problema). No se entiende bien si, en base al id se deba buscar un dato en el servidor vía Ajax para mostrarlo o qué es lo que quieres exactamente. Reconstruir un poco la lógica ayuda en estos casos, a tí mismo a entender lo que estás haciendo y a quienes responden, a darte la mejor solución posible.
    – A. Cedano
    Commented el 22 may. 2020 a las 11:44

2 respuestas 2

3

Dado que no indicas como se genera el formulario (el campo texto), te pongo una posible solucion, pero deberas adaptar parte para indicar ese parametro (que creo es interesante).

Puedes hacer una función en tu código, que haga la acción que te interesa, pasándole como parámetro el id:

function responder(id, mensaje = "")
{
    // hacer el Ajax correspondiente
}

Y luego hacer un evento click sobre la clase que tienes definida, que se encargue de buscar los parametros desde la referencia this (esto es, desde el boton):

$(".responderComment").click(function(){
    Id = $this.attr("id");
    //mensaje =  $this.attr("msj");
    responder(id);
});

con esto, el evento se lanzara cada vez que pulses uno de los botones de comentario. Este evento buscara el Id y el mensaje (eso tendras que configurarlo tu) y se llamara a la funcion que hace el ajax, con los parametros de ese id y ese mensaje.

4
  • ¿Qué IDE usas? Estas comillas , no son válidas, estas tampoco , . También, yo evitaría escribir Function con F mayúscula, no es el estándar.
    – A. Cedano
    Commented el 22 may. 2020 a las 10:37
  • oh, perdon! es cosa del editor de notas del mac, que es una mierda (como el propio mac). Ahora lo corrigo, gracias
    – Jakala
    Commented el 22 may. 2020 a las 10:47
  • Creo que no me expresé del todo bien al construir la duda, el formulario correspondiente a responder un comentario lo genero al pulsar el botón responderComent, he editado el post concretando más la acción de #responderComent1, aún así, gracias por la respuesta, estoy probando e intentando hacerlo funcionar
    – gonzalofdv
    Commented el 22 may. 2020 a las 11:24
  • @Jakala Funcionando correctamente! mil gracias
    – gonzalofdv
    Commented el 22 may. 2020 a las 12:44
0

Entiendo que lo único que varía en cada función es el número de comentario (que usas para darles un ID tanto al <button> como al <input>). Por ello, en tu PHP podrías añadir un atributo data al <td> que refleje ese número que deseamos conseguir.

<?php echo '<td id="comentario' . $i . '" data-numero-comentario="' . $i . '"><button class="responderComent" id="responderComent'.$i.'" value="'.$mostrar->IdComentario.'">💬</button></td>';  ?>

Una vez tengamos eso, podemos vincular la función a los <td> de nuestra tabla, recuperando dentro el valor de ese atributo data para construir el HTML que necesitas.

$(function () {
  $('.responderComent').click(function () {
    let numero_comentario = $(this).parent().data('numero-comentario');
    let html = '';
    
    html += '<input type="text" id="resp' + numero_comentario + '">';
    html += '<button id="enviarComent' + numero_comentario + '">Comentario ' + numero_comentario + '</button>';
    
    console.log(html);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td id="comentario1" data-numero-comentario="1"><button class="responderComent" id="responderComent1"   value="1">Botón1</button></td>
    <td id="comentario2" data-numero-comentario="2"><button class="responderComent" id="responderComent2"   value="2">Botón2</button></td>
    <td id="comentario3" data-numero-comentario="3"><button class="responderComent" id="responderComent3"   value="3">Botón3</button></td>
    <td id="comentario4" data-numero-comentario="4"><button class="responderComent" id="responderComent4"   value="4">Botón4</button></td>
  </tr>
</table>

8
  • ¿Por qué habría que complicarse usando esto: data-numero-comentario cuando son datos redundantes, pues los tienes también en value?. El hecho de que los atributos data- existan no significa que haya que abusar de ellos. Serían útiles si se necesitan otros datos y ya las etiquetas/atributos normales se han agotado. No es el caso aquí. Debido a eso tienes mi voto negativo.
    – A. Cedano
    Commented el 22 may. 2020 a las 10:27
  • @A.Cedano Si te fijas, el OP llama a $mostrar->IdComentario en el value que no sé lo que devuelve. Los números los puse yo para que se viese que el HTML cambia. Obviamente en caso de tener el ID en otro campo y que este sea el número que necesitamos, no haría falta crear el atributo personalizado.
    – phpMyGuel
    Commented el 22 may. 2020 a las 10:29
  • Si he entendido bien, el problema de fondo es escuchar un grupo de botones de una manera simple, creo que la respuesta de @Jakala arroja luz sobre una posible solución. En cualquier caso, como ya indiqué a OP en mi comentario, la pregunta no es clara y creo que meter en el escenario los atributos data- lo que hace es arrojar más confusión. Por eso creo que es importante tener claro que: no deberían usarse los atributos data- mientras queden otras opciones propias del elemento de la que podamos hacer uso. Tenemos el value, y todavía nos quedaría el texto mismo del botón, el tdetc.
    – A. Cedano
    Commented el 22 may. 2020 a las 10:33
  • @A.Cedano Pues yo prefiero mucho más un atributo personalizado que tener que hacer substrings de los ID para extraer el número del texto (creo que es es cuestión de gustos porque no veo en que perjudica el tenerlo o no tenerlo). Respeto tu opinión, pero sin saber ninguno de los dos lo que devuelve $mostrar->IdComentario no sabemos si tenemos el numero que necesito para construir el HTML de mi solución. Sí algo se me escapa con los atributos personalizados estaré encantado de que me lo expliques para así borrar la respuesta.
    – phpMyGuel
    Commented el 22 may. 2020 a las 10:38
  • Lo que se te escapa es el tema de la redundancia. Los atributos data- serían justificados por ejemplo si quisieras mostrar una estructura de datos: nombre, apellidos, direccion, teléfono etc y quieres agrupar todo en un contexto. Pero para datos sueltos, ¿por qué no agotar el value, y si quieres pasar otro dato, ¿por qué no usar el text del botón, u otro elemento del td? Yo no hablo de gustos, sino de optimización, de no sobrecargar el código porque me gusta programar de este modo o de otro. En tu código hay redundancia, y por eso mi comentario y mi -1.
    – A. Cedano
    Commented el 22 may. 2020 a las 10:42

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.