0

Hola alguien me puede ayudar con esta duda, tengo un problema al querer llamar un id de laravel id='{$model->id}' a una función en javascript, y que ese valor se muestre en un input escondido en un modal, el código es el siguiente, cuando le doy clic a la etiqueta "a" con el evento onclick llamo la función para el modal, el código es el siguiente

if (Usuario::encuestaAcceso(\Illuminate\Support\Facades\Session::get('usuario')['id'], $model->id, 'enc_clonar')) { 
    if($model->estado == true){
        $title = I18n::getTag('tool_clonar_encuesta');

        $html .= "<a onClick='recuperar_id({$model->id})' id='{$model->id}' data-numid='{$model->id}' data-nombre='{$model->nombre}' data-estado='1' data-encuesta='{$model->id}' class='dropdown-item btn-action btn-link-aplicador' title='{$title}' href='#' data-toggle='modal' data-target='#modalClonarEncuesta' ><i class='fa fa-external-link ' aria-hidden='true'></i>$title</a>";
    }else{
        $title = I18n::getTag('tool_clonar_encuesta');

        $html .= "<a onClick='recuperar_id({$model->id})' id='{$model->id}' data-numid='{$model->id}' data-nombre='{$model->nombre}' data-estado='0' data-encuesta='{$model->id}' class='dropdown-item btn-action btn-link-aplicador' title='{$title}' href='#' data-toggle='modal' data-target='#modalClonarEncuesta' ><i class='fa fa-external-link' aria-hidden='true'></i>$title</a>";
    }

}

modal:

<div class="modal" tabindex="-1" role="dialog" aria-hidden="true" id="modalClonarEncuesta">
    <div class="modal-dialog">
        <div class="modal-content">

            <form method="POST" action="{{ route('encuesta.clonar') }}">
                <div class="modal-header">
                    <h5 class="modal-title">Duplicando encuesta &nbsp;<h4><b id="tituloClonarEncuesta"></b></h4></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="form-group">
                    <label for="nombre" class="col-sm-12 col-form-label col-form-label-lg">
                        *Nombre de la encuesta
                    </label>
                    <div class="col-sm-12">
                        <input required type="text" placeholder="Nombre de la encuesta" class="form-control form-control-lg" id="txtCloneNombre" name="nombre">
                    </div>
                </div>
                <input type="hidden" name="id_encuesta" id="hiddenIdClonarEncuesta">



                <div class="modal-footer">
                    <button id="btn-clonar-encuesta" type="submit" class="btn btn-success"><?=I18n::getTag('btn_clonar')?></button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><?=I18n::getTag('btn_cancelar')?></button>
                </div>
            </form>
        </div>
    </div>
</div>

Código js:

<script>        
        function recuperar_id(id){

            let encuesta_num = document.getElementById("{$model->id}");
            encuesta_num.dataset.encuesta;
            document.getElementById('hiddenIdClonarEncuesta').value = encuesta_num.dataset.encuesta;
            console.log(document.getElementById('hiddenIdClonarEncuesta').value);           

    </script>
6
  • ¿Qué hace tu código de la función recuperar_id al hacer un alert(id); ? ¿Qué te retorna? Commented el 9 ene. 2020 a las 17:09
  • me retorna el valor de la encuesta, cada encuesta tiene su propio id y esta esta guardada en el data-encuesta Commented el 9 ene. 2020 a las 17:34
  • Por más que le doy vueltas a una solución me salen más dudas. ¿Podrías actualizar tu pregunta con más código? No entiendo cómo hablas de un modal pero ese modal en tu ejemplo que pones nunca existe, solo existe un elemento input y eso me confunde porque no sé si eso lo tienes adentro o afuera del modal, tampoco sé cómo creas el modal ni qué librerías o formas ocupas para abrir ese modal. Agradecería más información de tu pregunta para poder ayudarte. Gracias. Commented el 9 ene. 2020 a las 18:48
  • ya lo actualicé, lo que quiero hacer es que el id de la etiqueta "a" id='{$model->id}' pase a mi función en javascript, es un id dinámico, se obtiene de una tabla donde se encuentran otros datos Commented el 9 ene. 2020 a las 19:20
  • Una pregunta, ¿estás usando bootstrap 3 o 4? Commented el 9 ene. 2020 a las 19:51

2 respuestas 2

0

Luego de las preguntas que te hice, pude llegar a encontrar una solución para ti.

  1. Estás usando bootstrap. Entonces, basándonos en bootstrap 3 primero tenemos que saber que saber cómo abrir este módal, escribir en él y también, quizá, cómo cerrarlo.

  2. Sabiendo lo aterior, podremos enviar nuestro valor recibido por la función maestra a nuestra conveniencia para poderlo poner en el input

Entonces, suponiendo que ya tienes tu HTML creado y el cual resulta de este código:

if (Usuario::encuestaAcceso(\Illuminate\Support\Facades\Session::get('usuario')['id'], $model->id, 'enc_clonar')) { 
    if($model->estado == true){
        $title = I18n::getTag('tool_clonar_encuesta');

        $html .= "<a onClick='recuperar_id({$model->id})' id='{$model->id}' data-numid='{$model->id}' data-nombre='{$model->nombre}' data-estado='1' data-encuesta='{$model->id}' class='dropdown-item btn-action btn-link-aplicador' title='{$title}' href='#' data-toggle='modal' data-target='#modalClonarEncuesta' ><i class='fa fa-external-link ' aria-hidden='true'></i>$title</a>";
    }else{
        $title = I18n::getTag('tool_clonar_encuesta');

        $html .= "<a onClick='recuperar_id({$model->id})' id='{$model->id}' data-numid='{$model->id}' data-nombre='{$model->nombre}' data-estado='0' data-encuesta='{$model->id}' class='dropdown-item btn-action btn-link-aplicador' title='{$title}' href='#' data-toggle='modal' data-target='#modalClonarEncuesta' ><i class='fa fa-external-link' aria-hidden='true'></i>$title</a>";
    }

}

Vamos a entender que tenemos una función llamada recuperar_id la cual, hasta donde sé, ya recibe el parámetro correctamente. Dentro de esta función javascript vamos a abrir el módal, escribir en él y también meterle el valor al input. Entonces:

    function recuperar_id(id){

        let encuesta_num = document.getElementById("{$model->id}");
        encuesta_num.dataset.encuesta;
        document.getElementById('hiddenIdClonarEncuesta').value = encuesta_num.dataset.encuesta;
        console.log(document.getElementById('hiddenIdClonarEncuesta').value);
        console.log(encuesta_num);               console.log(document.getElementById('hiddenIdClonarEncuesta').value);

        $("#modalClonarEncuesta").modal("show");
        $("#modalClonarEncuesta .modal-title").html("Mi título asombroso");
        $("#hiddenIdClonarEncuesta").val(encuesta_num.dataset.encuesta);
    }

Ahora bien, es muy importante mencionar varias cosas:

  1. Si estás ocupando bootstrap necesitas forzosamente ocupar jquery
  2. Necesitas inicializar y abrir el modal con $("#modalClonarEncuesta").modal("show"); de acuerdo a su documentación oficial de bootstrap
  3. Una vez abierto el modal, yo, con jquery, le agregué al input con id #hiddenIdClonarEncuesta el valor de encuesta_num.dataset.encuesta obtenido. Así, este elemento tendrá el valor actualizado siempre.
  4. No es necesario tampoco ocupar jquery para asignarle valor al input #hiddenIdClonarEncuesta, así que esto lo puedes seguir manteniendo con javascript nativo, pero para poder abrir el modal es necesario que ocupes jquery.

Actualización:

En vista que necesitas recoger todos los valores de los atributos en la etiqueta HTML a te propongo hacerlo con jQuery:

Vas a crear tu código javascript bajo los estándares y creación de eventos que especifica jquery, lee más de esto aquí

Entonces y sea:

$(document).ready(function() {
  $("body").on("click", ".mi-elemento", function() {
    var data_numid = $(this).attr('data-numid'),
      data_nombre = $(this).attr('data-nombre'),
      data_estado = $(this).attr('data-estado'),
      data_encuesta = $(this).attr('data-encuesta');

      $("#modalClonarEncuesta").modal("show");
      $("#modalClonarEncuesta .modal-title").html("Mi título asombroso");
      $("#hiddenIdClonarEncuesta").val(data_numid);
      
      alert("El valor del input es ---> " + document.getElementById("hiddenIdClonarEncuesta").value);
  });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- Large Size -->
<div class="modal fade" id="modalClonarEncuesta" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="largeModalLabel">Cargando...</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" name="id_encuesta" id="hiddenIdClonarEncuesta">
            </div>
            <div class="modal-footer">
                
                <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary waves-effect m-r-20" ><span>Guardar</span> </button>
            </div>
        </div>
    </div>
</div>

<a href="#!" onclick="" class="mi-elemento btn btn-info btn-lg" data-numid="1" data-nombre="fernando" data-estado="mexico" data-encuesta="1">Mi asombroso elemento</a>

Por favor observa cómo añadimos una clase a cada elemento a llamado .mi-elemento, el código de cada elemento a debería de ser, como ejemplo y ya dándole los valores a cada atributo así:

<a href="#!" onclick="" class="mi-elemento btn btn-info btn-lg" data-numid="1" data-nombre="fernando" data-estado="mexico" data-encuesta="1">Mi asombroso elemento</a>

Este elemento será iterado pero ya con el evento agregado con jquery para recoger sus valores, abrir un modal y poner su valor en el input.

Por favor visita la documentación oficial para:

  1. Cómo empezar a usar bootstrap
  2. Cómo crear tu primer modal con bootstrap
8
  • gracias por la solución que me brindaste, mi modal está funcionando, no puse el código HTML completo por que no me permite ya que esta hecho en laravel, ahora bien, la etiqueta "a" pertenece a unas opciones de una tabla, lo que quiería hacer es que ese valor del id='{$model->id}' pasarlo al let encuesta_num = document.getElementById'{$model->id}; al implementarlo de esa forma no me reconoce el id en javascript, y me marca un error en consola, ese valor lo quiero pasar al input de mi modal que esta funcionando, Commented el 9 ene. 2020 a las 21:56
  • ¿Puedo editarte la respuesta para que recuperes todos los data que tienes en cada elemento a con jquery y lo pases a tu modal? Commented el 9 ene. 2020 a las 22:07
  • si, por favor. ya intenté de esta forma y no me pasa el valor en id let encuesta_num = document.getElementById("encuesta{$model->id}"); igual de esta forma let encuesta_num = document.getElementById({$model->id}") entonces yo pienso que ahí esta mi error por que en la etiqueta "a" así tengo el id que es dinamico <a href="" id id='encuesta{$model->id}'></a> Commented el 9 ene. 2020 a las 22:11
  • Ok, Dame unos minutos y te estoy escribiendo una solución Commented el 9 ene. 2020 a las 22:13
  • esta bien, Gracias por la ayuda Commented el 9 ene. 2020 a las 22:51
0

Ya pasaste el Id a la función Javascript, por lo que ya no es necesario usar código PHP dentro de esta:

<script>        
    function recuperar_id(id){

        let encuesta_num = document.getElementById(id); // Se usa la variable obtenida
        encuesta_num.dataset.encuesta;
        document.getElementById('hiddenIdClonarEncuesta').value = encuesta_num.dataset.encuesta;
        console.log(document.getElementById('hiddenIdClonarEncuesta').value);           

</script>

También podrías hacer que la función obtenga el elemento <a> como parámetro y ahorrarte el document.getElementById

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.