Colorbox e form password

**Palma Marco** · 30-06-2012, 16:47

Salve sono nuovo del forum e ho fatto una ricerca ma non sembra esaudire il mio problema quindi provo a postare.

Situazione
Quando si apre il sito che sto realizzando viene controllato se c'è un cookie con la username settata (in php/mysql e funziona bene). Se il cookie c'è viene estratto il livello di permessi dell'utente dal database (e anche questo funziona alla grande) infine se il livello di permessi è sufficientemente alto da consentirgli l'accesso al pannello di controllo (seppur con delle limitazioni in base ai vari livelli e anche questo funziona) il sito appare ma con il plugin Colorbox lo oscuro e apro un popup con la richiesta della password. A questo punto se la password immessa è corretta (viene passata ad un altro script php e funziona) il popup si dovrebbe chiudere dando accesso al pannello di controllo altrimenti il popup rimane e viene stampato il messaggio "Password Errata".

Problema
Il popup appare correttamente così come anche il campo per l'immissione della password che una volta immessa viene passata allo script php che la confronta con una predefinita in una variabile. Tuttavia se la passwor è giusta il popup non si chiude. Mentre se la password è errata stampa correttamente il messaggio (Password Errata) lasciando intatti form e popup per un nuovo inserimento che è quello che poi voglio.

Domanda
1) Come posso chiudere il popup, senza stampare niente, se la password è giusta ?

Ecco il codice

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="../style.css" rel="stylesheet" type="text/css" />

<link media="screen" rel="stylesheet" target="_blank" href="css/colorbox.css" />

<link media="screen" rel="stylesheet" target="_blank" href="css/popup.css" /> 
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="js/colorbox.js"></script> 
<script>
	
/**
 *
 *		Apro un dialogo con  ColorBox
 *
 *		L'oggetto open_popup apre la finestra di ColorBox
 *		width e height sono le dimensioni
 *		Inline se è su true fa si che venga passato all'oggetto href
 *		Open apre la finestra immediatamente
 *
 */
 $("document").ready(function (){
	 $(".open_popup").colorbox({width:"600px", height:"250px", inline:true, open:true, href:"#subscribe_popup"});
	 
	 /**
	  *
	  *		Creo una chiamata ajax per verificare la password immessa nella form
	  *
	  */
 	 $("#form").submit(function(){													// Letteralmente quando viene sottomessa la form esegui la funzione
	 	var password = $("input#password").val();									// Letteralmente creo una variabile con il valore del campo password
	 	var dataString = 'password=' + password;									// Letteralmente credo una stringa con i valori da passare alla funzione per l'analisi
			$.ajax({																// Letteralmente avvio una richiesta ajax
				type: "POST", url: "verifica.php", data: dataString,				// Letteralmente passo il dataScript via post al file per l'analisi dei dati (verifica.php)
					complete: function(data){										// Letteralmente eseguo la funzione data quando la richiesta ajax è stata completata
					$("#dataResponse").html(data.responseText+"Password errata");	// Letteralmente se la password è errata stampo un errore
					$("#dataResponse").fadeIn();									// Letteralmente se viene stampato un errore mostra il div corrispondente
					}																// Letteralmente chiudo la funzione data
			});																		// Letteralmente chiudo la chiamata ajax
			return false;															// Letteralmente ritorno un valore falso se la chiamata non è andata a buon fine
	 }); 
 });																			// Letteralmente chiudo il ciclo principale
</script>
</head>
<body>
	<h5>Questa parte non sarebbe necessaria ma serve a dimostrare come il sito sottostante sia visibile seppur non accessibile</h5>
    	<div style='display:none' class='open_popup'>								<!-- Creo un div con propietà non visibile (display:none) e che viene aperto quanto l'ustruizione jquery
        																				 richiama la classe open_popup -->
			<div id="subscribe_popup" style="padding:10px">							
            	<div align="center">												
                	<h1 class="box-title">Password</h1>
						
                	<form id="form" />												
                    	<input type="password" id="password" />						
                        <input type="submit" value="Invia" />						
                    </form>															
           		</div>																
                	<div id="dataResponse" style="display:none"></div>				
      		</div>																	
   		</div>																		
</body>
</html>

Mentre il codice php per questo esempio è veramente minimale

Codice PHP:


<?php



$testPass = "prova";

if ($_POST['password'] == $testPass)

{

      // Decommentando questa riga se la password è giusta stampa il messaggio nel popup

      // echo "Password corretta";

      return true;

} else {

      return false;

}



?>

Grazie a chi risponderà
Marco

**cavicchiandrea** · 30-06-2012, 17:12

Ciao e benvenuto, prova a cambiare questo pezzo:

codice:

function(data){
if(data.responseText == false){
	$("#dataResponse").html(data.responseText+"Password errata");	// Letteralmente se la password è errata stampo un errore
		$("#dataResponse").fadeIn();
}else{
comando per chiudere la colorbox che io non conosco
}
}

Fermo restando che data.responseText ti torni un valore boleano.

**Palma Marco** · 01-07-2012, 01:11

Originariamente inviato da cavicchiandrea
Ciao e benvenuto, prova a cambiare questo pezzo:

codice:

function(data){
if(data.responseText == false){
	$("#dataResponse").html(data.responseText+"Password errata");	// Letteralmente se la password è errata stampo un errore
		$("#dataResponse").fadeIn();
}else{
comando per chiudere la colorbox che io non conosco
}
}

Fermo restando che data.responseText ti torni un valore boleano.

Ciao grazie per la risposta.

Prendo atto che la mia idea non è realizzabile e mi arrangio usando i callback e i decorator.

Ciauz

**Palma Marco** · 02-07-2012, 16:44

Dai che forse ci sono.

Ho fatto un passo avanti e con questo sistema confronta regolarmente la password e dice se è sbagliata o no.

codice:

<script type="text/javascript">
$(document).ready(function() 
{
	$("form#iscrizione").submit(function() 
	{
		$.post("verifica.php", { password: $('#password').val(), 
								 rand: Math.random()
							   },
			function(risposta)
			{
				if (risposta == 1)
				{
					$("#messaggio").fadeTo(200, 1, function()
					{
						$(this).removeClass('corretto').text('Login effettuato').fade(900, 1);
					});
				} else {
					$("#messaggio").fadeTo(200, 1, function()
					{
						$(this).removeClass().addClass('errore').text('La password immessa è errata').fadeTo(900, 1);
						resetForm(id);
					});
				}
			});
			return false;
	});
});

Rimarrebbe da sostituire la parte del login effettuato con qualcosa capace di chiudere la finestra di Colorbox adesso. Qualche idea ?

Come mai jquery quando fa il refresh di un form lascia i camp precompilati ?

Ho trovato una piccola soluzione

codice:

function resetForm(id) {
   $('#' + id + ' :input').each(function(){
      $(this).val('');
   });
}

Ma non sembra funzionare neanche se richiamata sul ovento onClick al pressione del pulsante submit.

Qualche idea su come sistemare queste due piccolezze ?
Grazie

**Vindav** · 02-07-2012, 16:57

$.colorbox.close()

**Palma Marco** · 02-07-2012, 17:19

Originariamente inviato da Vindav
$.colorbox.close()

Non va. Non fa altro che bloccare anche l'apertura del ColorBox se usato in questo modo:

codice:

<script type="text/javascript">
$(document).ready(function() 
{
	$(".open_popup").colorbox({width:"600px", height:"250px", inline:true, open:true, href:"#subscribe_popup"}); 
	
	$("form#iscrizione").submit(function() 
	{
		$.post("verifica.php", { password: $('#password').val(), 
								 rand: Math.random()
							   },
			function(risposta)
			{
				if (risposta == 1)
				{
					$("#messaggio").fadeTo(200, 1, function()
					{
						/**$(this).removeClass('corretto').text('Login effettuato').fade(900, 1);*/
						$.colorbox.close();
					});
				} else {
					$("#messaggio").fadeTo(200, 1, function()
					{
						$(this).removeClass().addClass('errore').text('La password immessa è errata').fadeTo(900, 1);
						resetForm(id);
					});
				}
			});
			return false;
	});
});

**Vindav** · 02-07-2012, 17:26

Se cosi non va simula il click sul bottone di chiusura

$("#cboxClose").click();

**Palma Marco** · 02-07-2012, 17:38

Originariamente inviato da Vindav
Se cosi non va simula il click sul bottone di chiusura

$("#cboxClose").click();

Perfetto grazie mille ...

**Palma Marco** · 03-07-2012, 15:24

Decisamente io e jquery non siamo amici.

Ho provato a disattivare il bottone per chiudere il popup e se lo faccio dal css tutto bene mentre se uso un codice di questo tipo funziona solo la parte riguardante la password errata ovvero se immetto una password sbagliata tutto bene e mi da l'errore mentre se immetto quella giusta non fa nulla.

codice:

$(".open_popup").colorbox({width:"600px", 
							   inline:true, 
							   open:true, 
							   overlayClose:false,
							   arrowKey:false,
							   escKey:false, 
							   href:"#subscribe_popup",
							   onLoad: function() 
							   {
							    	$('#cboxClose').remove();
							   }
							   });

Ho anche provato a metterlo esterno in questo modo ma il risultato è lo stesso. Il pulsante sparisce ma se immetto una password corretta lo script no fa nulla

codice:

	$(".open_popup").colorbox({width:"600px", 
							   inline:true, 
							   open:true, 
							   showClose:false,
							   overlayClose:false,
							   arrowKey:false,
							   escKey:false, 
							   href:"#subscribe_popup",
							  /**onLoad: function() 
							   {
							    	$('#cboxClose').remove();
							   }*/
							   });
	
	$('#cboxClose').remove();

Qualche idea ?
Grazie

**Vindav** · 03-07-2012, 15:39

se lo rimuovi non potrà mai funzionare, simuli il click su un elemento che non esiste? perche semplicemente non lo nascondi? con css o js, è indifferente

Discussione: Colorbox e form password

Strumenti discussione

Ricerca discussione

Visualizza

Colorbox e form password

Permessi di invio