¿Cómo obtener los datos de los data-variableX en una función javascript para mostrarlo a una modal?

publicado por: Anonymous

Tengo un enlace en donde almaceno datos para enviarlos a una modal usando data-variable, por ejemplo:

<a href="#" data-toggle="modal" data-target="#modal_noticia_editar" data-id='<%:id%>' data-nombre='<%: nombre %>' class="datos_edit" onclick="enviaDatosEdit();">Editar</a>

Y recibo los datos con una función de jQuery a través del nombre de la clase datos_edit:

$('.datos_edit').click(function (e) {
    e.preventDefault();
    ID = $(this).data('id');
    Nombre = $(this).data('nombre');
});

Mi pregunta es, ¿se puede recibir los datos en una función JavaScript? Como por ejemplo enviaDatosEdit() sin estar pasándole parámetros:

enviaDatosEdit('<%:id%>', '<%: nombre %>');">

Sino que, utilizar los data-id, data-nombre en la función enviaDatosEdit(), en el cual, que me quedase algo como:

function enviaDatosEdit(){
    e.preventDefault();
    ID = $(this).data('id');
    Nombre = $(this).data('nombre');
}

solución

Si, puedes. Si bien no lo encuentro lo mas elegante, tienes estas dos soluciones.

Una es:

<a href="#" data-toggle="modal" data-target="#modal_noticia_editar" data-id='<%:id%>' data-nombre='<%: nombre %>' class="datos_edit" onclick="enviaDatosEdit.call(this);">Editar</a>

Con esa solución lo que haces es cambiarle el contexto this a enviaDatosEdit, entonces this en enviaDatosEdit cuando se llamada de esa forma (call) sera el elemento a, si enviaDatosEdit es llamada sin call, su contexto (this) será window.

La siguiente seria:

<a href="#" data-toggle="modal" data-target="#modal_noticia_editar" data-id='<%:id%>' data-nombre='<%: nombre %>' class="datos_edit" onclick="enviaDatosEdit(this);">Editar</a>

function enviaDatosEdit(elem) 
{
    e.preventDefault();
    ID = $(elem).data('id');
    Nombre = $(elem).data('nombre');
}   

La primera, si bien se entiende, puede llevar a confusión a quien vea ese codigo.
Ah, otra cosa, los atributos debes (data-) sacarlos usando attr(al menos en Jquery) y las propiedades con prop(id,class,disabled,etc-las ‘nativas’-)

Finalmente yo usaría esto si estas usando jquery, así:

<a href="#" data-toggle="modal" data-target="#modal_noticia_editar" data-id='<%:id%>' data-nombre='<%: nombre %>' class="datos_edit">Editar</a>


$('.datos_edit').on('click', enviaDatosEdit);

function enviaDatosEdit(event)
{
    //  this aqui es el contexto que le da jquery al invocar al click, osea this es el elemento 'a'
    var $this=$(this); 
    //  tambien si te complican los contextos,
    //  te serviria  usa var $this=$(event.target); target aqui es el elemnto que 
    //  invoco al evento 
    // introducir el código aquí
    event.preventDefault();
    ID = $this.attr('data-id');
    Nombre = $this.attr('data-nombre');
}

Recuerda siempre cachear tus elementos Jquery y luego hacer referencia a esa variable cacheada:

var $elem=$("#tuid");

saludos.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *