0

Tengo una función onclick pasa los datos de una tabla al onclick y los carga pero no los muestra en mi función, al hacer click no hace nada.

Lo que realmente quiero hacer es llenar el modal para editar el empleado, pero no puedo hacer que se llene el modal con los datos selección.

<a href="#" class='btn btn-warning' title='Editar usuario' data-toggle="modal" data-target="#edit_data_Modal" ><i class="glyphicon glyphicon-edit" onclick="obtener_datos('<?php echo $datos; ?>')" id="editar"></i></a>


<script type="text/javascript">
    function obtener_datos(datos){
    alert(datos);
}
</script>
1
  • Podrías detallar un poco mas tu problema, ya que el código que viene en tu pregunta, se ejecuta según lo esperado, das clic al icono de el botón de editar, y muestra la alerta. Commented el 12 oct. 2020 a las 18:29

2 respuestas 2

1

El problema es que el evento onclick no está dentro del elemento a, sino dentro de i. Por ejemplo, aquí funciona, porque trasladamos el onclick al ámbito del anchor tag:

function obtener_datos(datos) {
  alert(datos);
}
<a href="#" class='btn btn-warning' title='Editar usuario' data-toggle="modal" data-target="#edit_data_Modal" onclick="obtener_datos('DatoDesdePHP')"><i class="glyphicon glyphicon-edit" id="editar"></i>Click aquí</a>

De todos modos, poner funciones in line se considera una mala práctica. Para este caso puedes asignar el listener por el id del elemento, así liberas el HTML de la función, por ejemplo:

/* Referencia al elemento */
var elEditar = document.getElementById('editar');
/* Asignación del listener */
elEditar.onclick = function(e) {
  console.log(this.value);
};
<button id="editar" class='btn btn-warning' title='Editar usuario' data-toggle="modal" data-target="#edit_data_Modal" value="DatoDesdePHP"><i class="glyphicon glyphicon-edit">Click</i></button>

Aquí he cambiado el a por un button, que admite una etiqueta value donde podrás guardar de forma dinámica el dato que recuperas desde PHP. Luego, en la función, con this.value se recupera el dato. De eso modo tu código HTML no es dependiente del código Javascript. Esto facilita ampliamente el mantenimiento del código.

0

Yo cambiaría la funcionalidad nativa del modal, puesto que requieres información distinta en cada modal. Te dejé un ejemplo y agregué características a tu <a>

En lugar de hacer un onClick() ahora se bindea por un listener al DOM, eso habilita de desligar el modal a un botón específico, es decir, lo puedes reciclar. La data la inserté como una propiedad data-info En este caso la data dummy es Juan. Por medio de selectores puedes manipular por completo el modal. Si cambias el nombre verás que ya es información dinámica. Te dejo un ejemplo

$( document ).on('click','.btnEdit',function(){
  const data = $(this).attr('data-info');
  $('#modal').modal('toggle');
  $('#modal .modal-title').text(`Hola ${ data }`);
})
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  
  <a href="#" class='btn btn-warning btnEdit' title='Editar usuario' data-info="Juan"><i class="glyphicon glyphicon-edit"></i>Editar</a>
  
  <div class="modal" id="modal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title"></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Lo demás
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

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.