Script corretto genera problemi su altra pagina

[Annuitcoeptis]

Buongiorno e buon anno, sto usando un'estensione di Chrome. Ho un problema con questa pagina (salvata):


https://miospaziodigitale.w3spaces.c...a_report.html#


Questo script autoclicka il primo elemento di stampa della lista in "Descrizione" (ovvero, nell'esempio, "Stampa etichetta - inv. : 59949"),

(() => {
  var links = document.querySelectorAll("a[href='#']");
  for(let i=0; i<links.length; i++){
    var text = links[i].innerHTML;
    if(text.includes("Stampa etichetta")) {
      links[i].click();
break;
    }
 }
})();

L'autoclick apre correttamente questo tipo di finestra:

https://polormb.sebina.it/sebina/get...pdf?id=3873631

Il problema è che questa finestra si apre anche (ma non dovrebbe) quando seleziono ed elimino (in alto a destra) un elemento dalla lista "Descrizione", come in questo esempio:

https://imgur.com/a/B2sDLyI

È possibile correggere lo script per evitare questo effetto?
Grazie!

[Annuitcoeptis]

Ho registrato questo video, dove si può vedere cosa succede con lo script abilitato e disabilitato.

[KillerWorm]

Ciao, la funzione Cancella elimina l'elemento selezionato e poi aggiorna la pagina, quindi l'auto-click (del corrente primo elemento nella lista) avviene di nuovo proprio perché si sta aprendo di nuovo quella pagina.

La soluzione è impedire che avvenga l'auto-click quando la pagina viene ri-aperta attraverso il pulsante "Cancella", ed è esattamente la stessa soluzione già fornita per la tua precedente discussione. Il problema è analogo a quello del tasto "Indietro", solo che in questo caso si torna indietro (cioè si riapre la stessa pagina) attraverso il tasto "Cancella".

Puoi quindi adoperare sempre la micro-libreria che ti avevo già fornito per attivare il sistema col flag, impostando opportunamente il selettore del metodo querySelectorAll() (cioè "a.back") in modo che selezioni, in questo caso, anche l'elemento in questione oltre ai tasti "Indietro".

Io so come fare ma ti invito comunque a provare tu stesso ad apportare tale modifica.

Tieni conto che querySelectorAll() accetta un selettore che corrisponde in tutto e per tutto ad un selettore CSS. Se hai familiarità col CSS non dovresti avere grossi problemi nel modificare opportunamente quella parte per selezionare entrambe i casi.

Fai sapere.

[Annuitcoeptis]

Grazie. Mentre leggevo immaginavo che quella libreria potesse risolvere.
Ho provato invano a modificare la riga dello snippet con:

// Elementi per i quali applicare il flag

  const elementiFlag = document.querySelectorAll('a.back, #menu_m2 > li:nth-child(1) > a > span');

ed a modificare lo script specifico così, ma non risolve.

(()=>{
  var links = document.querySelectorAll("a[href='#']");
  for(let i=0; i<links.length; i++){
    var text = links[i].innerHTML;
    if(_azioneConsentita && text.includes("Stampa etichetta")){
      links[i].click();
break;
    }
 }
})();

[KillerWorm]

Buona la tua prova ma in elementiFlag devi specificare gli elementi per i quali vuoi attivare il flag nella pagina a cui portano.

Non ho provato ma mi pare di capire che hai selezionato l'elemento della lista ma dovresti invece selezionare il pulsante "Cancella", infatti la pagina viene riaperta al click di questo elemento.

Buon anno

[Annuitcoeptis]

Risolto, avevo giustamente utilizzato il selettore per il pulsante Cancella ma dovevo accompagnarlo a quello relativo alla spunta della lista "utente". Grazie mille, KillerWorm, quella libreria si rivela sempre più preziosa, buon 2023!!!

[Annuitcoeptis]

Buonasera, mi riaggancio a questa discussione. Ho lo stesso tipo di problema segnalato sopra con questa pagina, ma non riesco a risolverlo. Come scritto questo script autoclicka il primo elemento di stampa della lista in "Descrizione" (ovvero, nell'esempio, "Stampa etichetta - inv. : 59949"):

const primoLinkDellaLista = document.querySelector('#lista td > a[href="#"]');
if (_azioneConsentita && primoLinkDellaLista) primoLinkDellaLista.click();

L'autoclick apre correttamente questo popup, ma quest'ultimo si apre anche (ma non dovrebbe) quando clicco il pulsante Report (in alto a destra) che ha questo selettore CSS:

body > nav.sebina > a.reports > span

reports.png

Ho provato a modificare la mini-libreria di cui sopra aggiungendo questo selettore CSS, ma al click del pulsante Report il pop-up continua ad aprirsi:

// Elementi per i quali applicare il flag

const elementiFlag = document.querySelectorAll('a.back, #menu_m2 > li:nth-child(1) > a > span, #lista > tbody > tr:nth-child(1) > td.to-center > input[type=checkbox], body > nav.sebina > a.reports > span');

Potreste aiutarmi? Grazie mille!

[KillerWorm]

Ciao, ho visto il problema e trovata la causa ma non ho intenzione di indicartela direttamente e di dirti come si può risolvere. Piuttosto sarebbe più utile per te arrivarci da solo, io ti fornisco solo qualche indizio.

Sono convinto che in questo modo ti resti impresso ciò che devi fare per eventuali situazioni simili a questa, se e quando andrai ad includere ulteriori elementi nella micro libreria.

Ho visto che nel selettore complessivo sono aumentati gli elementi rispetto all'ultima volta e mi fa piacere che tu sia riuscito a farlo in autonomia ... significa che qualche mio consiglio è servito.

Noto che per alcuni elementi il relativo selettore è abbastanza specifico, comprendendo l'intero percorso a partire dal tag body (come per l'elemento in questione) o specifici selettori per id relativi a elementi ascendenti.

Suppongo che per ogni elemento ne ricuperi il relativo selettore in modo automatico attraverso qualche funzione degli strumenti di sviluppo. Sbaglio?

Se fosse così è comunque una valida tecnica ma, in qualunque caso, è bene controllare opportunamente che l'elemento selezionato (cioè l'elemento esatto a cui punta quel determinato selettore) sia "idoneo alla mansione richiesta" dalla micro libreria.

Tieni presente che il sistema è basato, in sostanza, sull'applicazione di un listener per l'evento click, attraverso il quale viene memorizzato il flag per ognuno degli elementi selezionati.

Quindi il mio consiglio è quello di verificare a cosa sta puntando esattamente quel selettore e valutare di conseguenza che la relativa applicazione del click possa avere un corretto funzionamento.

A me è bastato guardare quell'elemento (a cui punta il relativo selettore) nel codice sorgente HTML e mi è balzato subito agli occhi un particolare che mi ha fatto "storcere il naso".

Ti invito a trovarlo così che puoi dedurre da te cosa sta andando storto e come risolvere.
Della serie: "aguzza la vista"

Se poi hai bisogno, resto comunque disponibile per "l'aiuto da casa"

Fai sapere


EDIT:
a proposito, la pagina che hai linkato non è più disponibile. Se qualche altro utente avesse voluto aiutarti, non avrebbe potuto verificare il contesto che è peculiare in questo caso per trovare la causa del problema.

sopra con questa pagina

io ho verificato attraverso la pagina che avevo salvato da precedenti interventi nelle tue discussioni.

Magari ora non ha nemmeno senso che tu fornisca nuovamente la pagina di riferimento. Se speri di ricevere aiuto sul forum è comunque bene verificare sempre che i link forniti siano validi quando posti.

[Annuitcoeptis]

Grazie per la disponibilità! Mi ero accorto del link, lo avevo infatti ripristinato nell'ultimo post (#7). Lo avevo creato da qui, ma questi link hanno purtroppo una scadenza. Venendo al punto... Ho applicato quel selettore CSS perchè credevo non facesse differenza con percorsi più brevi, ma sbagliavo evidentemente. Ho verificato il codice sorgente HTML dell'elemento Report e notato che ha la stessa identica struttura dell'elemento back:

<a href="/sebina/spooler/S_SPO_DIS_GES.do" class="reports" title="Report">
    <span class="invisible">Reports</span>
  </a>

Ho quindi provato a modificare così il flag (non indico qui gli altri elementi):

const elementiFlag = document.querySelectorAll('a.back, a.reports')

o anche così:

const elementiFlag = document.querySelectorAll('a.back, a.reports[title="Report"]');

Ma in questo modo non viene mai cliccato il primo elemento della lista report, quindi non viene eseguito questo codice:

const primoLinkDellaLista = document.querySelector('#lista td > a[href="#"]');
if (_azioneConsentita && primoLinkDellaLista) primoLinkDellaLista.click();

Non riesco ad andare oltre...

[KillerWorm]

Ciao, ti avrei risposto prima ma il conta risposte nell'anteprima delle discussioni non ha segnalato l'ultima tua risposta ... un vecchio bug di questo forum.

perchè credevo non facesse differenza con percorsi più brevi

Non c'è nessun problema nell'usare selettori più lunghi, anzi, se sono più specifici è generalmente meglio, a patto che siano opportunamente impostati.

Ciò che ho notato io è quel class="invisible" presente in quello <span>.

Nel tuo selettore avevi puntato proprio a tale elemento con questo selettore:

body > nav.sebina > a.reports > span

Per "intuizione" è presumibile che un elemento "invisibile" non sia cliccabile. Infatti andando ad indagare nel CSS puoi constatare che quell'elemento è reso sostanzialmente invisibile... mi pare sia ridotto ad un pixel, ma ad ogni modo quel preciso elemento risulta NON "cliccabile".

Come già indicato, il sistema funziona applicando un listener per l'evento click. Anche in quel caso fa il suo dovere ma il problema sta nel fatto che l'elemento in questione non può di fatto essere cliccato normalmente.

Ora, applicando una semplice logica, cosa vai effettivamente a cliccare quando il puntatore sta sopra l'icona che rappresenta quell'elemento?
Di certo non quello span, ma è presumibile che l'evento click sia ricevuto dal suo contenitore (appunto l'elemento a.reports).

Senza andare a modificare il resto del selettore, che poteva anche andare bene come già lo avevi impostato per tutti gli altri elementi, prova solo a togliere quello span in modo da puntare (solo per questa parte di selettore) al relativo elemento <a>.

Fai sapere.