3

Estoy utilizando HTML5 y tengo por ejemplo el enlace:

<a class="GloIT" href="../Red_neuronal" 
   data-id="2" data-seccion="Redes" title="Red neuronal">red neuronal</a>

que está en una página interna del sitio (que no es el index). Lo que necesito es poder obtener el valor que tiene el atributo data-id, para luego trabajarlo desde jQuery (que está en el index), pero no en la misma página (eso ya me funciona).

La idea es obtener el atributo que viene desde otra página interna del sitio, para luego así poder manipularlo desde mi página principal (index).

Desde la misma página (index) yo solo hago lo siguiente:

if (typeof $(this).attr("data-id") !=="undefined") {
  if ($(this).attr("data-id")!=="") {
    document.getElementById("opcion").value=$(this).attr("data-id")
  }
} 

y ya me está funcionando. Pero, al querer hacer lo mismo con los enlaces que vienen desde otra página interna del sitio, no se puede. Dichos valores los pierdo o no los puedo ver. ¿Hay alguna forma de ver sus valores o es imposible? ¿Sabiendo la referencia de que página viene?

8

2 respuestas 2

5

Puedes usar localStorage o sessionStorage para esto. En la página que no es el index podrías tener algo como esto:

// cuando se pulsa un enlace con data-id
$("a[data-id]").on("click", function() {
  // guardar el valor del data-id en el localstorage
  localStorage.setItem("data-id", $(this).attr("data-id"));
});

Si no quieres añadir jQuery a las páginas internas, puedes hacer algo similar con JavaScript puro:

// leemos todos los enlaces que tengan un data-id
let linksConDataId = document.querySelectorAll("a[data-id]");
// para cada uno de ellos
for (let x = 0; x < linksConDataId.length; x++) {
  // cuando sean pulsados
  linksConDataId[x].addEventListener("click", function() {
    // guarda el data-id en el localStorage
    localStorage.setItem("data-id", this.dataset.id);
  });
}

Y luego desde el index, cuando se carga la página puedes leer si hay algo en el localStorage con el valor data-id. Si lo hay, es de un enlace que fue pulsado antes de llegar a la página, así que lo puedes leer y luego eliminarlo (para no volver a leerlo si refrescas la página).

// si existe un data-id en el localstorage
if (localStorage.getItem("data-id")) {
  var dataid = localStorage.getItem("data-id"); // leemos el valor
  localStorage.removeItem("data-id");           // lo borramos para no releerlo
  // realizar operaciones con dataid 
}
8
  • Gracias @AlvaroMontoro esto está funcionando para mi caso. La única pega es que tengo que agregar el código JavaScript a cada una de mis páginas internas y sumado, además, claro, a la llamada del archivo jquery.js dentro del tag <head>. Commented el 17 sept. 2018 a las 15:57
  • @DamianGarcia si no quieres usar jQuery en las páginas internas, puedes hacerlo sólo con JavaScript puro (ahora actualizo la respuesta). Sobre lo de añadirlo a cada una de las páginas internas, ¿no estás incluyendo ya algún fichero Js común al que pueda añadirse este cambio? o ¿estás usando alguna plantilla donde poder añadir ese código y que automáticamente lo reciban todas las páginas?
    – Alvaro Montoro
    Commented el 17 sept. 2018 a las 16:02
  • No sé que me combiene más y no es "más lento para el usuario". Si agregar el archivo jquery.js o hacer ese loop desde JavaScript. Con respecto a tu otra pregunta, no, no utilizo un fichero común de Js. Eso si estaría bueno o no, al tener que subir otro archivo de JavaScript al servidor. Quizas con agregar esas pocas líneas de JavaScriot o Jquery a cada página resulta mejor (además no todas las necesitan). Commented el 17 sept. 2018 a las 16:13
  • Técnicamente, va a ser igual con o sin jQuery (en ambos casos tienes que añadir el snippet, ya sean 3 ó 6 líneas), la diferencia sería tener que además incluir o no una biblioteca de 100KB en todas tus páginas (aunque en teoría tampoco impactaría mucho porque el navegador debería estar cacheándola). Sobre lo de añadirlas a todas o no, realmente si una página no tiene a con data-id ese script no va a ejecutarse (el array tendrá 0 elementos), y el tiempo del selector y bucle va a ser despreciable. Por eso te decía de ponerlo directamente en la plantilla general.
    – Alvaro Montoro
    Commented el 17 sept. 2018 a las 16:35
  • Si, igual sólo agrego el JavaScript puro en las páginas que hagan uso del atributo "data-id", en las demás no hay nada de JavaScript, bueno salvo lo de Google Analytics, pero que ya estaba de antes. No tengo una plantilla general (tampoco sabría bien como hacera con Js). Commented el 17 sept. 2018 a las 16:57
0

Una de las soluciones que podrías tomar es recoger mediante get o post con ajax un objeto que contiene el arbol de la página donde quieres buscar el dato. Después recoges de ese objeto el valor del dato que quieres.

Por ejemplo, suponiendo que tienes en un archivo llamado secundario.html la estructura;

<a id="enlace" data-id="2">Enlace</a>

Desde otro archivo, por ejemplo index.html, el script que contiene (enlazado o incrustado en el código) toma mediante ajax el árbol del archivo secundario.html y toma los valores que necesita.

$.get("secundario.html", function (data) {
    //html sera un objeto que contenga el arbol de secundario.html
    var html = $(data);
    //recorre el objeto entero buscando los elementos que tengan atributos
    for (var i=0;i<html.length;i++) {
        if (html[i].attributes) {
            //recorre los atributos buscando el que name = data-id
            for (var j=0;j<html[i].attributes.length;j++) {
                if (html[i].attributes[j].name === "data-id") {
                    var valor = html[i].attributes[j].value;
                }
            }
        }
    }
});

Si tienes varios enlaces con data-id en el archivo donde vas a buscar, ya tendrías que precisar en los condicionales que tenga cierto id o cualquier otro atributo que lo identifique.

1
  • Está muy bien lo que me pasas. Pero, hay otro problema. Tengo cientos de paginas internas (secundario1.html, secundario2.html...secundarioX.html). Sería largo y tedioso de esa manera. Commented el 17 sept. 2018 a las 14:39

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.