Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 18
  1. #1

    Temporalizzare un redirect con countdown pop up

    Buon pomeriggio a tutti gli utenti del forum,
    avrei cortesemente necessità del vostro supporto per comprendere come poter temporalizzare un redirect mostrando un avviso a video all'utente:

    per farvi un esempio pratico, alla fine di una pagina php utilizzo (e funziona bene), questo codice per salvare i dati inseriti dall'utente e reindirizzarlo poi alla pagina che si occupa di generare un pdf e dar la possibilità di stamparlo.

    codice:
    echo "<script language=javascript>document.location.href='index.php?page=saveandpdf&id_com=$id_commessa_inserita'</script>";
    Il problema è che quando l'utente che si trova nella pagina clicca sul pulsante che per salvare e generare il file, c'è un lasso di tempo di circa 3 secondi in cui la pagina elabora la richiesta ed in quei 3 secondi, se l'utente clicca nuovamente sul pulsante viene inserito nel database un'ulteriore commessa identica alla precedente.

    Per ovviare a questo problema, vorrei con il vostro supporto, far in modo che una volta cliccato sul pulsante, venga inibita all'utente la possibilità di cliccarci nuovamente, magari mostrando un pop up che lo informa: (Generazione avvenuta correttamente attendi qualche secondo e sarai reindirizzato alla pagina di stampa).

    Un anticipato grazie a chi potrà supportarmi ed un saluto a tutti


  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao, quando si clicca il pulsante potresti applicare un div semitrasparente, con il messaggio, che compare in overlay sopra l'intera pagina.
    In questo modo la pagina resta visibile sotto l'overlay ma saranno appunte inibite le azioni col mouse.
    Occhio, questo non esclude la possibilità di agire da tastiera.

    Qui un esempio fatto al volo:
    codice:
    function overlayMsg(str){
      let content, overlay = document.getElementById('body_overlay');
      if (!overlay){
        const style = document.createElement('style');
        const loader = document.createElement('div');
        content = document.createElement('div');
        overlay = document.createElement('div');
        content.id = 'body_overlay_content';
        overlay.id = 'body_overlay';
        loader.classList.add('lds-ellipsis');
        loader.innerHTML = '<div></div><div></div><div></div><div></div>';
        style.innerText = `
    #body_overlay{
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 999999;
      padding-top: 25vh;
      color: #fff;
      font: bold 1.8em "Segoe UI", Verdana, Tahoma, Arial, sans-serif;
      background: #000b;
      opacity: 0;
      transition: .8s;
    }
    #body_overlay_content{
      
    }
    .lds-ellipsis {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
    }
    .lds-ellipsis div {
      position: absolute;
      top: 33px;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #fff;
      animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }
    .lds-ellipsis div:nth-child(1) {
      left: 8px;
      animation: lds-ellipsis1 0.6s infinite;
    }
    .lds-ellipsis div:nth-child(2) {
      left: 8px;
      animation: lds-ellipsis2 0.6s infinite;
    }
    .lds-ellipsis div:nth-child(3) {
      left: 32px;
      animation: lds-ellipsis2 0.6s infinite;
    }
    .lds-ellipsis div:nth-child(4) {
      left: 56px;
      animation: lds-ellipsis3 0.6s infinite;
    }
    @keyframes lds-ellipsis1 {
      0% {transform: scale(0);}
      100% {transform: scale(1);}
    }
    @keyframes lds-ellipsis3 {
      0% {transform: scale(1);}
      100% {transform: scale(0);}
    }
    @keyframes lds-ellipsis2 {
      0% {transform: translate(0, 0);}
      100% {transform: translate(24px, 0);}
    }
        `;
        overlay.appendChild(style);
        overlay.appendChild(content);
        overlay.appendChild(loader);
        document.body.appendChild(overlay);
        setTimeout(()=>{overlay.style.opacity = '1';}, 100);
      }
      content.innerHTML = str;
    }

    Puoi richiamare la funzione attraverso l'evento click del tuo pulsante, applicando una cosa del genere:
    codice:
    document.querySelector('#id_tuo_pulsante').addEventListener('click', ()=>{overlayMsg('Generazione avvenuta correttamente!<br>Attendi qualche secondo e sarai reindirizzato alla pagina di stampa');})
    Ovviamente aggiusta il selettore e considera che dovrai inserire questa riga quando quel pulsante è disponibile sulla pagina, ad esempio dentro uno script alla fine del body.

    Fai sapere
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Buongiorno e anzitutto grazie per la risposta,
    sinceramente non sono capace di integrare il tuo codice all'interno del mio, la parte di codice che ho postato e solo la parte finale di una pagina scritta in php e che ha tante righe di codice.

    La tua idea non mi sarebbe dispiaciuta affatto, ma a me servirebbe qualcosa di più semplice, diciamo una porzione di codice che possa essere utilizzato direttamente in questa chiamata javascript.

    codice:
    /* Redirect alla pagina di stampa e recupero l'id commessa */
    echo "<script language=javascript>document.location.href='index.php?page=saveandpdf&id_com=$id_commessa_inserita'</script>";
    Ancora grazie di cuore per l'intervento e la risposta al mio thread

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Figurati, il codice sembra complesso ma soltanto perché ho voluto aggiungere un po' di "fronzoli" per formattare testo e visualizzare un'icona tipo "loader". In sostanza si tratta giusto di una funzione che dovrai richiamare nel posto/momento in cui ti serve che appaia il messaggio. Dovrai inserire tutto dentro un tag <script> ovviamente.

    Però mi sfugge qualcosa di ciò che hai indicato. Non ho capito perché questo tempo di attesa avviene sulla pagina principale dopo aver cliccato il pulsante

    Cosa fa esattamente questo pulsante (intendo a livello di script). Se il redirect viene lanciato non appena si clicca, non dovrebbe cambiare subito la pagina?
    Al massimo l'attesa (dovuta all'elaborazione) dovrebbe avvenire giusto quando si apre la nuova pagina, no?!

    Ti è possibile postare un link della pagina reale o di una pagina di esempio, così da poter capire meglio la questione?
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Buongiorno e sempre grazie per la risposta,
    ti allego un video we transfer per rendere l'idea di quello che nel pratico fa il "Gestionale".

    In sostanza, come puoi vedere dal video, nel momento in cui clicco sul pulsante "Salva commessa", c'è un breve lasso di tempo che intercorre dal click al redirect sulla home, ecco, proprio in quel lasso di tempo se l'utente clicca più volte sul pulsante, vengono generate X commesse per quanti click vengono effettuati.

    Grazie di cuore per l'interesse ed il supporto


    https://we.tl/t-LpJCCqEBI5?utm_campaign=TRN_TDL_05&utm_source=send grid&utm_medium=email&trk=TRN_TDL_05




  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Quote Originariamente inviata da appsistem
    ti allego un video
    Ciao, col solo video, senza poter mettere mano alla pagina sorgente (anche fosse una pagina d'esempio), non è semplice capire e darti indicazioni precise.

    Prova ad applicare comunque lo script inserendo il tutto dentro dei tag <script></script> e mettendolo in fondo al <body> della pagina dove sta il pulsante in questione.

    Verifica, ispezionando il pulsante, se questo ha un suo id, quindi inseriscilo come valore nel metodo querySelector('#id_tuo_pulsante'), ovviamente sostituendolo a "id_tuo_pulsante".

    Fai sapere
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  7. #7
    Ciao @KillerWorm buonasera,
    ti posto il codice della pagina, interamente in php, sul quale è presente il pulsante che si occupa di "Generare la commessa", ancora grazie

    https://pastebin.com/e1bdV2bY

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Quote Originariamente inviata da appsistem
    ti posto il codice della pagina, interamente in php,
    vuoi rendere le cose difficili

    ho dato uno sguardo ma non vedo quale sia il pulsante in questione. Ho cercato "PDF" (il testo sopra l'icona della stampante che si vede nel video) ma non lo trova.

    Fai così, verifica tu come può essere selezionato quel pulsante.

    - sulla pagina in questione posiziona il puntatore sopra il relativo pulsante
    - fai clic destro per aprire il menu contestuale
    - seleziona "Analizza", si aprirà il pannello degli strumenti di sviluppo
    - nella scheda "Analisi pagina" troverai evidenziata la riga col tag HTML che si riferisce a quell'elemento
    - verifica quindi se nel tag c'è un attributo "id". Tale valore puoi usarlo come indicato in precedenza
    - se non ha un "id" allora sarà necessario capire come poter impostare la query del metodo querySelector(). In tal prova a fare uno screenshot della struttura HTML che ti appare nella scheda "Analisi pagina" e riportalo qui.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  9. #9
    Buongiorno, certo che ne hai di pazienza ehhh

    Ecco a te lo screen che mi hai richiesto, e da quello che mi sembra di vedere effettivamente non ha un id

    https://ibb.co/DrwVGgR

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    ah ecco, era il pulsante "Salva Commessa". In effetti lo avevi indicato sopra ma il video mi a fuorviato e avevo dedotto si trattasse del pulsante "PDF" su cui porti il puntatore proprio a fine video

    Ok, allora possiamo provare in questo modo. Il pulsante è di tipo submit e non ha un id ma lo ha il form in cui questo sta.

    Si può provare in questo modo:

    codice:
    document.querySelector('#modulo button[type="submit"]').addEventListener('click', ()=>{overlayMsg('Generazione avvenuta correttamente!<br>Attendi qualche secondo e sarai reindirizzato alla pagina di stampa');})
    Questa riga, assieme alla funzione, puoi metterla dentro un tag <script> anche appena dopo il pulsante in questione.

    Per intenderci, dovrai modificare la pagina PHP (quella di cui hai linkato il codice PHP), in questo modo:

    codice:
    ...
        <div class="text-right">
            <button type="submit" name="submit" class="btn btn-success right">Salva Commessa</button> 
        </div>
    
    <script>
      // QUI VA LO SCRIPT INDICATO
    </script>
    
    </div><!--Close Form Container-->
    </form><!--Close Form-->
    ...
    Sostituisci il commento "QUI VA LO SCRIPT INDICATO" con quanto ho indicato.

    Prova e fai sapere.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.