Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    lightbox + form = se invio perdo il lightbox

    Un saluto a tutti,
    vorrei sottoporre all'attezione di qualcuno esperto di js il seguente problema...

    Ho la mia pagina col suo bravo tasto contattami, che al click mi apre una form all'interno di un div visualizzato in lightbox...

    Tutto ok, ho testato diversi lightbox (a partire da quelli del mitico Fulciniti, eccoli per chi volesse esplorarli), sia quelli che visualizzano contenuto hidden sia quelli che tramite ajax visualizzano contenuto di altre pagine... li riesco a customizzare e a stilizzare a piacimento...

    L'unica cosa che non mi va è che:
    comparsa la form, se faccio INVIA, succede che il lightbox mi scompare portandosi via anche la form... è vero che la mail viene spedita, però perdo il feedback (es. "grazie di avermi contattato") oppure se non compilo un campo obbligatorio perdo il messaggio che mi dice "hai dimenticato il tale campo"...

    Spero di essere stato chiaro, comunque ecco la pagina live...

    Non badate a stili e altro, è spartana per renderla spulciabile con facilità...

    Non badate nemmeno al js con cui visualizzo il lightbox, ho utilizzato il più semplice, sempre per avere maggiore semplicità di analisi (ma ciò che segnalo si verifica anche con soluzioni di lightbox molto più articolate e complesse)

    Occhio invece allo script della form: uno script in php (questa la sua fonte per chi ne fosse interessato) che utilizzo da un po' di tempo e in diversi miei progetti... l'ho integrato lasciandolo tutto intero così com'è (trattandosi di php per mostrarlo lo posto in UN TXT e in
    UNO ZIP, se lo mettessi in vista codice appesantirei troppo questo post già abbastanza lungo), perchè la mia domanda è questa:

    è colpa del setting dello script (magari della funzione di sending) se mi si chiude il lightbox come descritto sopra? Oppure ciò si verificherebbe con qualsiasi form perché è dovuto alla spedizione del contenuto della form?

    Magari le mie ipotesi sono caxxate...
    ma se fosse colpa dello script, c'è modo di settarlo in maniera che non mi chiuda il lightbox (magari chiedendo nella sezione php del forum) oppure devo cambiare form?
    Io ci terrei a conservare la mia, perché la trovo valida, ma in tal caso, qualcuno mi sa consiglire una form implementata in modo da non causarmi la scomparsa del lightbox?

    E se invece, come spero (perciò chiedo in questa sezione), dipendesse dall'implementazione del js e cambiando qualche settaggio la perdita del lightbox non mi si verifica più?


    Ringrazio chiunque prenda in considerazione la mia questione...

    Ancora saluti a tutti...
    caxxo come l'ho fatta lunga...
    O saisons, ô châteaux,
    Quelle âme est sans défauts?

    Rimbaud - L'Éternité (1872)

    EsseZeta - VisualWriting | www.essezeta.org

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133

    Re: lightbox + form = se invio perdo il lightbox

    Originariamente inviato da essezeta
    caxxo come l'ho fatta lunga...
    Come hai ragione Se vuoi mantenere il tuo lavoro devi adottare ajax, in modo da non ricaricare la pagina qui (vedi guida ajax) altra possibilità e usare questo esempio (vedi sezione form)
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Ciao cavicchiandrea,
    grazie dell'interessamento e dei consigli...

    Rispondo in due parti...

    PRIMA:

    Purtroppo utilizzando l'esempio che mi indichi tu non posso mantenere la mia form in php, perché mi ricarica la pagina (credo di aver capito che fa ciò) e quindi il lightbox mi scompare lo stesso (anche se i dati li conserva), dovrei quindi utilizzare la form (in AJAX) proposta nell'esempio... ma non è completa di feedback e incasinerei tutto a cercare di implementarla da zero...

    Mi chiedevo però:
    sempre lì nella pagina dell'esempio che mi consigli tu, alla sezione FORM, è chiaramente indicato quanto segue

    Forms yes, yes it does work...
    Form Example - Submit a form in a LightWindow!

    Cioè... se è specificato così forte, vuol dire che l'utilizzo delle form crea problemi con i lightbox in JS?
    Qualcosa del tipo conflitti con post e/o get e/o ricarica della pagina?
    Questo lo chiedo per curiosità...


    SECONDA:

    INFINE, per dovere di cronaca, credo giusto postare la soluzione (LIGHTBOX + FORM in ajax) che sono comunque riuscito a trovare:
    eccola live DA QUESTO LINK e a seguire ecco i componenti e le operazioni (vabbè!! sto allungando enormemente il post, ma almeno stavolta espongo una soluzione funzionante, che a qualcuno può essere utile )

    In pratica:

    1. per il lightbox utilizzo la versione di emanueleferonato.com, ECCOLA QUI per chi la volesse provare.

    2. per la form da visualizzare nel lightbox utilizzo questa semplice ma efficace form in ajax (ECCO LA FONTE) che vado a piazzare in un contenitore nascosto richiamato poi dal lightbox...

    Per chi fosse un po' inchiappato, a seguire ecco il codice del mainfile (da salvare nome.htm e già funziona...).
    Naturalmente ve lo customizzate e classate a piacere, ma SOPRATUTTO vi settate le prime righe del file email_form_process.php chiamato all'inzio del JS e lo inserite assieme al file prototype.js (li trovate entrambi nella distribuzione della form che ho indicato sopra) allo stesso livello del mainfile nome.htm...

    Buon lavoro e saluti a tutti!!

    PS: se cavicchiandrea o altri mi desse lumi sulla mia domanda della prima parte del post gliene sarei grato

    Codice PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html><head>
    <
    title>LIGHTBOX FORM</title>
    <
    style>
    .
    black_overlay{displaynone;positionabsolute;top0%;left0%;width100%;height100%;background-colorblack;z-index:1001;-moz-opacity0.8;opacity:.80;filteralpha(opacity=80);}
    .
    white_content {displaynone;positionabsolute;top10%;left25%;width50%;height75%;padding16px;border2px solid black;background-colorwhite;z-index:1002;overflowauto;}
    #errors{font-size:14px;font-weight:normal;margin:10px;padding:10px;}
    </style>

    <
    script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">

        function sendRequest() {

            new Ajax.Request("email_form_process.php", {
                   method: 'post',
                   postBody: "name="+$F("name")+"&email="+$F("email")+"&message="+$F("message"),
                   onComplete: showResponse

            });
        }


        function showResponse(req)
        {
           $('errors').style.borderStyle= "solid";
           
           var res=/message was received/;
          
           if(req.responseText.match(res))
           {
            $('errors').style.borderColor= "green";
            $('errors').style.color="green";
           }else{
            $('errors').style.borderColor= "red";
            $('errors').style.color="red";
           }
           
           $('errors').style.borderSize= "1px";
           $('errors').innerHTML=  req.responseText;
        }

    </script>

    </head>
    <body>

    <h1>[url="javascript:void(0)"]contattami[/url]</h1>

    <div style="display: none;" id="light" class="white_content">
            
    <form id="test" method="post" onSubmit="return false;">
    <table border="0">
    <tr><td colspan="2"><div id="errors"></div></td></tr>
    <tr><td colspan="2"><font size="+2">[b]Email Form[/b]</font></td></tr>

    <tr><td>[b]Name:[/b]</td><td><input type="text" name="name" id="name" size="55" maxlength="20"></td></tr>
    <tr><td>[b]Email:[/b]</td><td><input type="text" name="email" id="email" size="55" maxlength="35"></td></tr>

    <tr><td>[b]Message:[/b] </td><td>[i](max 250 characters allowed)[/i]</td></tr>
    <tr><td colspan="2"><textarea name="message" id="message" cols="50" rows="10"></textarea></td></tr>
    <tr><td colspan="2" align="right"><input type="submit" value="submit" name="submit" onClick="javascript: sendRequest();"></td></tr>
    </table>
    </form>    
            
    [url="javascript:void(0)"]Close[/url]</div>
    <div style="display: none;" id="fade" class="black_overlay"></div>

    </body>
    </html> 
    O saisons, ô châteaux,
    Quelle âme est sans défauts?

    Rimbaud - L'Éternité (1872)

    EsseZeta - VisualWriting | www.essezeta.org

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 © 2025 vBulletin Solutions, Inc. All rights reserved.