Question

Soy nuevo en esto de escribir código. Estoy desarrollando un proyecto de webapp y me decidí a usar jQuery mobile. Buscando en internet me fui orientando para ir escribiendo el código, mucho a prueba y error modificando diferentes parámetros.
A duras penas pude armar un pequeño proyecto pero estoy estancado en un paso, que considero será fácil para responder de alguien que entienda del tema.

Mi webapp consiste de 2 páginas, usé el multipage de jQuery mobile para tener ambas páginas en un solo .html diferenciadas con sus respectivas id. En la primera página muestro una búsqueda que se autocompleta a medida que el usuario va tecleando mediante el uso de data-filter="true" para hacer de todo más sencillo.
La lista se autogenera con Javascript. Cuando el usuario selecciona el item que desea se carga la segunda página (#resultado) y ésta se llena de los datos correspondientes.

Hasta ahí todo perfecto. Mi pregunta es la siguiente (perdón por la larga introducción)
¿Cómo puedo hacer para elegir qué datos mostrar? Porque el código que tengo hasta ahora me devuelve la página #resultado con una lista de todos los valores correspondientes al item seleccionado.
Lo que me gustaría hacer es poder formatear estos valores con diferentes colores y demás orden.

Pego a continuación el código javascript que estoy utilizando:

$(document).on("pageinit", "#inicio", function () {

    var li = "";
    $.each(info, function (i, valor) {
        li += '<li><a href="#" id="' + i + '" class="info-go" data-transition="slide"><img src="img/'+ valor.foto +'"><h2><i>' + valor.cientifico + '</i></h2><p><b>Familia:</b> <i>'+ valor.familia +'</i> | <b>Subfamilia:</b> <i>'+ valor.subfamilia +'</i></p></a></li>';
    });

    $("#lista").append(li).promise().done(function () {
        $(this).on("click", ".info-go", function (e) {
            e.preventDefault();
            $("#resultado").data("info", info[this.id]);
            $.mobile.changePage("#resultado");
        });

        $(this).listview("refresh");
    });
});

$(document).on("pagebeforeshow", "#resultado", function () {

    var info = $(this).data("info");
    var info_view = "";
    for (var key in info) {
        info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 75%">' + info[key] + '</div></div></div>';
    }
    $(this).find("[data-role=content]").html(info_view);
});

Como ven correctamente pude devolver los valores que yo quiero en la primera instancia de la página #inicio. Esto lo logré con el código valor.(clave) que pueden ver.
Lo usé en ese caso para poner la imagen correspondiente, algunos datos, etc.

La segunda parte, si bien tiene formato, me devuelve todos los datos en diferentes renglones. Lo que yo quiero es poder elegir donde poner X valor para ponerle negrita. (como hice antes con valor.foto para insertar la foto en la lista)

Espero se entienda, me enredo mucho tratando de explicar y ésto se debe a que recién estoy aprendiendo.

Muchas gracias por tu tiempo!

Answer 1

Hola mats,

si no entiendo mal tu código (la porción que dejás, sin el resto, no permite hacerla funcionar para hacer pruebas) tendrías que hacer que el ID del elemento seleccionado en la paǵina #inicio sea accesible por el código que maneja #resultado para ahí poder seleccionar qué mostrar.

Asumiento que info es quien tiene todos los valores, podrías definir una variable actual de ámbito global a estas funciones y hacer por ejemplo

...
e.preventDefault();
$("#resultado").data("info", info[this.id]);
actual = this.id;
$.mobile.changePage("#resultado");
...

y luego en el código que muestra #resultado

$(document).on("pagebeforeshow", "#resultado", function () {
    var info = $(this).data("info");
    var info_view = "";
    var elSeleccionado = info[actual];
...

con lo que la variable elSeleccionado será quien tenga los datos del elemento que te interesa. Luego para mostrarlo, debés generar el HTML que quieras en invocar los valores

info_view += '<b>'+elSeleccionado.id+'</b>';

para ver el ID en negrita y así para todos los atributos que quieras mostrar.

Recordá definir la variable actual fuera de toda función, para que su valor esté accesible en las otras funciones.

Saludos!