Come ciclare un xml in base all'id dell'elemento

[fradamma]

Ciao a tutti.
Vi espongo subito il mio problema. Ho un xml come quello postato qui sotto. Ogni "element" all'interno della root "elements" è provvisto di un id numerico (lo stesso corrisponde al numero che segue la "p_" dell "url"). Questo xml mi servirà perchè nella mia pagina web staticizzata (la quale corrisponderà ad una qualsiasi pagina con path "/prova/pages/pag_xxxx.jsp" e che non so a priori che posizione occuperà nell'xml) ho due div. Al click sul div "arrow-left" o "arrow-right" devo fare un .replace() dell'url utilizzando l'id dell'elements.
Mi spiego meglio: ora, per esempio sono su www.miosito.it/prova/pages/pag_4573.jsp (ripeto: è un esempio potrei essere su qualsiasi pagina e non lo so a priori), se clicco su arrow-left devo andare alla pagina precedente che, guardando l'xml sotto, corrisponde a www.miosito.it/prova/pages/pag_4897.jsp, se clicco su arrow-right devo andare al successivo, in tal caso www.miosito.it/prova/pages/pag_8946.jsp
Non riesco a capire come venirne a capo. Il tutto credo che vada dentro una chiamata ajax, e per il replace avevo pensato ad una cosa tipo "location.href = location.pathname.replace( .... )".

Il problema è che non so come cicliare l'xml e spostarmi facendo un replace in base all'ID dell'elemento....tenete presente che la mia pagina potrà essere random a qualsiasi livello dell'xml e per questo non posso utilizzare un indice di array.

Spero possiate aiutarmi, grazie e buonanotte

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<elements>
    <element id="15909">
        <url>/prova/pages/pag_15909.jsp</url>
    </element>
    <element id="3498">
        <url>/prova/pages/pag_3498.jsp</url>
    </element>
    <element id="4897">
        <url>/prova/pages/pag_4897.jsp</url>
    </element>
    <element id="4573">
        <url>/prova/pages/pag_4573.jsp</url>
    </element>
    <element id="8946">
        <url>/prova/pages/pag_8946.jsp</url>
    </element>
</elements>

		<div class="arrow-left" id=""></div>
		<div class="arrow-right" id="9192"></div>

 

[Nefyt]

Questo dovrebbe andare bene

<script>
    var curpage = location.pathname.replace(/[^0-9]/g,'');

    $.get('test.xml').done(function(resp){
        var xml = $(resp);
        var curid = xml.find('element[id='+curpage+']').index();
        var el = xml.find('element');

        curid>0?$('.arrow-left').attr('id',getNumLink(el.eq(curid-1))):$('.arrow-left').remove();
        curid<el.length-1?$('.arrow-right').attr('id',getNumLink(el.eq(curid+1))):$('.arrow-right').remove();
    });

    function getNumLink(e)
    {
        return e.find('url').text().replace(/[^0-9]/g,'');
    }
</script>

<div class="arrow-left" id=""></div>
<div class="arrow-right" id=""></div>

ps: ovviamente includi jquery

 

[fradamma]

Questo dovrebbe andare bene

<script>
    var curpage = location.pathname.replace(/[^0-9]/g,'');

    $.get('test.xml').done(function(resp){
        var xml = $(resp);
        var curid = xml.find('element[id='+curpage+']').index();
        var el = xml.find('element');

        curid > 0 ? $('.arrow-left').attr('id',getNumLink(el.eq(curid-1))):$('.arrow-left').remove();
        curid < el.length-1 ? $('.arrow-right').attr('id',getNumLink(el.eq(curid+1))):$('.arrow-right').remove();
    });

    function getNumLink(e)
    {
        return e.find('url').text().replace(/[^0-9]/g,'');
    }
</script>

<div class="arrow-left" id=""></div>
<div class="arrow-right" id=""></div>

ps: ovviamente includi jquery

Grazie tante! Diciamo che in linea di massima ho capito cosa intendi fare con lo script:

Qui fai un replace del path della pagina dove mi trovo sostituendo ogni carattere NON numerico con una stringa vuota, in modo tale da avere solo un numero corrispondente all'ID e lo metti nella variabile "curpage" (PS in rete ho visto che molti utilizzano " .replace(/[^0-9]+/g, ''); " è la stessa cosa con il "+" ??? )

var curpage = location.pathname.replace(/[^0-9]/g,'');

Poi dentro la chiamata ajax vai a trovare l'index (ossia la posizione all'interno dell'xml) dell' "element" che ha come ID il "curpage" (ossia quello che corrisponde alla pagina dove mi trovo)

var curid = xml.find('element[id='+curpage+']').index();

Sono un po poco avvezzo all'utilizzo degli operatori ternari... cosa fanno queste due righe di codice?

        curid > 0 ? $('.arrow-left').attr('id',getNumLink(el.eq(curid-1))) : $('.arrow-left').remove();
        curid < el.length-1 ? $('.arrow-right').attr('id',getNumLink(el.eq(curid+1))) : $('.arrow-right').remove();

la funzione poi quando la lancio? Al document ready?

  function getNumLink(e)
    {
        return e.find('url').text().replace(/[^0-9]/g,'');
    }

Grazie tante ancora!

 

[Nefyt]

Grazie tante! Diciamo che in linea di massima ho capito cosa intendi fare con lo script:

Qui fai un replace del path della pagina dove mi trovo sostituendo ogni carattere NON numerico con una stringa vuota, in modo tale da avere solo un numero corrispondente all'ID e lo metti nella variabile "curpage" (PS in rete ho visto che molti utilizzano " .replace(/[^0-9]+/g, ''); " è la stessa cosa con il "+" ??? )

var curpage = location.pathname.replace(/[^0-9]/g,'');

Poi dentro la chiamata ajax vai a trovare l'index (ossia la posizione all'interno dell'xml) dell' "element" che ha come ID il "curpage" (ossia quello che corrisponde alla pagina dove mi trovo)

var curid = xml.find('element[id='+curpage+']').index();

Sono un po poco avvezzo all'utilizzo degli operatori ternari... cosa fanno queste due righe di codice?

        curid > 0 ? $('.arrow-left').attr('id',getNumLink(el.eq(curid-1))) : $('.arrow-left').remove();
        curid < el.length-1 ? $('.arrow-right').attr('id',getNumLink(el.eq(curid+1))) : $('.arrow-right').remove();

la funzione poi quando la lancio? Al document ready?

  function getNumLink(e)
    {
        return e.find('url').text().replace(/[^0-9]/g,'');
    }

Grazie tante ancora!

1)Si
2)Si
3)Sono un fan dell'inline code, in pratica è come un if else in una sola linea
4)Quella funzione non la devi usare, devi copiare e incollare quel codice nello script della pagina dopo jquery

 

[fradamma]

ahh...un altra paio di domande, se posso...
Perchè praticamente nell' "else", hai scritto ": $('.arrow-left').remove();" ? ....va a rimuovere l'elemento ed io non voglio che questo accada..
Inoltre, voglio che l'evento si verifichi proprio al click su .arrow-left (vai alla pagina precedente) o .arrow-right (vai alla pagina successiva)...secondo te poi posso mettere tutto dentro una cosa del genere? Infine, come faccio a fare il redirect? Non cè niente che mi riscriva l'url...

$(".arrow-left, .arrow-right").click( function() {
      //qui il codice fatto da te?
});

 

[Nefyt]

<script>
    var curpage = location.pathname.replace(/[^0-9]/g,'');

    $.get('test.xml').done(function(resp){
        var xml = $(resp);
        var curid = xml.find('element[id='+curpage+']').index();
        var el = xml.find('element');
        var getNumLink = function(e){ return e.find('url').text().replace(/[^0-9]/g,''); }

        if(curid>0)
            $('.arrow-left').attr('id',getNumLink(el.eq(curid-1)));
        if(curid<el.length-1)
            $('.arrow-right').attr('id',getNumLink(el.eq(curid+1)));
    });

    $(document).ready(function(){
        $(".arrow-left, .arrow-right").click(function() {
          if($(this).attr('id').length>0)
            location.href = "/prova/pages/pag_"+$(this).attr('id')+".jsp";
        });
    });
</script>
<div class="arrow-left" id="">INDIETRO</div>
<div class="arrow-right" id="">AVANTI</div>

Così fa il redirect in base all'id, se l'id è l'ultimo o il primo rispettivamente indietro o avanti non faranno niente

 

[fradamma]

Scusami se ti do ancora fastidio. Però potresti spiegarmi cosa accade con queste due righe di codice (in base alle variabili dichiarate prima) ? Perchè credo che siano il fulcro di tutto lo script. Perchè "if (curid > 0)" e dopo...."if(curid<el.length-1)" ?

         if(curid>0)
            $('.arrow-left').attr('id',getNumLink(el.eq(curid-1)));
         if(curid<el.length-1)
            $('.arrow-right').attr('id',getNumLink(el.eq(curid+1)))

Grazie ancora!

 

[Nefyt]

Scusami se ti do ancora fastidio. Però potresti spiegarmi cosa accade con queste due righe di codice (in base alle variabili dichiarate prima) ? Perchè credo che siano il fulcro di tutto lo script. Perchè "if (curid > 0)" e dopo...."if(curid<el.length-1)" ?

         if(curid>0)
            $('.arrow-left').attr('id',getNumLink(el.eq(curid-1)));
         if(curid<el.length-1)
            $('.arrow-right').attr('id',getNumLink(el.eq(curid+1)))

Grazie ancora!

Se non è la prima pagina aggiunge l'id ad arrow-left della pagina precedente, e se non è l'ultima pagina aggiunge l'id della pagina successiva ad arrow-right, tutto qui

 

[fradamma]

Grazie mille sei stato molto esaustivo!