Agregar un botón en página usando jQuery

Ok, esto lo hago porque en un futuro se que me va a servir a mi jaja😀

Digamos que recogemos los datos de usuarios desde un servidor, algo como esto:

{"_id":{"$id":"50235e2eae962ac811000009"},"Nick":"Marito","Pass":"2fe53e709826ceca4418aad971e93ac6","Departamento":"Software"},{"_id":{"$id":"50235e3fae962ac81100000b"},"Nick":"Juanito","Pass":"671b7fa6fb0c818ad06b7e8596857740","Departamento":"Dise\u00f1o"},{"_id":{"$id":"50235e47ae962ac81100000d"},"Nick":"Pepito","Pass":"32164702f8ffd2b418d780ff02371e4c","Departamento":"Hardware"}]

Y que necesitamos crear un botón (button) para cada usuario que tengamos. Que en ese botón tengamos que escribir un value y un texto. Value tendrá el id del usuario y el texto el nombre.

Para resumirlo, algo así

El truco es usar el append() de jQuery junto al attr() y el text() .

Entonces, primero parseamos el json, simple con un

var a = jQuery.parseJSON(data);

donde la variable data tiene el json extraído del servidor.

Segundo, recorremos para cada elemento con un for each.

Para terminar, agarramos el div al que le queremos agregar los botones, en mi caso  $(‘#DivAsistentes’)

Ocupamos el append sobre el div, y dentro ponemos lo que queremos agregar  $(‘<button>’) y sobre éste usamos attr(“atributo”, “valor”) attr(“value”, a[x]._id.$id) (recuerden que la x viene del for each).

Para terminar, agregamos el texto que queremos que salga text(a[x].Nick)

Eso sería todo. Si unimos queda

var a = jQuery.parseJSON(data);
for(x in a){
    $('#DivAsistentes').
        append($('<button>').
            attr("class", "btn").
            attr("type", "button").
            attr("value", a[x]._id.$id).
            text(a[x].Nick)
        );
}

Y listo ! Como pueden ver, además agregué una clase y el type button.

El json lo obtengo directo con un json_encode de un array que traigo desde una BD con MongoDB y el button es el del Bootstrap de Twitter🙂

Espero a alguien más le sirva😉

Acerca de MaritoCares

Ingeniero Informático. Con tendencias a la programación en [C#, VB].NET, Java(Web principalmente...), PHP, JavaScript, algo mínimo de [ruby, python], y el clásico C.
Esta entrada fue publicada en JavaScript, MongoDB, Tutoriales. Guarda el enlace permanente.

Una respuesta a Agregar un botón en página usando jQuery

  1. como agrego este código en reporting services

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s