alert personalizzati

**simo9115** · 29-04-2015, 16:17

salve a tutti...per la mia pagina web volevo inserire degli alert personalizzati(quelli forniti da javascript non mi piacciono) solo che sinceramente nn so proprio come fare...l'unica cosa che ho è la libreria scaricata da jquery-ui per aprire le finestre di dialogo...io vorrei che al verificarsi di determinati errori, al premere del tasto iscrivi, mi compare una finestra di dialogo con scritte differenti...c'è qualcuno che mi può aiutare?grazie

codice:

<html>
	<head>
		<title> Iscriviti </title>
			<style>
			body{
				font: 70% "Trebuchet MS", sans-serif;
				margin: 30px;
				background-image: url("sfondoIscrizione.jpg");
				}			
			</style>
	</head>
		<link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.css">
		<script src="jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
		<script src="jquery-ui-1.11.4.custom/jquery-ui.js"></script>
		<script type="text/javascript">
			
			function controlli() {
				var nome = document.iscrizione.nome.value;
				var cognome = document.iscrizione.cognome.value;
				var datanascita = document.iscrizione.datanascita.value;
				var nazione = document.iscrizione.nazione.value;
				var email = document.iscrizione.email.value;
				var password = document.iscrizione.password.value;
                var rpassword = document.iscrizione.rpassword.value;
				var checkbox = document.iscrizione.c.checked
				
				if (nome == "" || cognome == "" || datanascita == "" || nazione == "" || email == "" || password == "" || rpassword == ""){
					alert("Campo mancante");
					return false;
					}				
				
				if (password != rpassword) {
					alert("Le password non coincidono");
					return false;
					}
					
				if (ValidateEmail() == false){
                    alert("Email inserita non valida");
                    return false;
					}
					
				if (checkbox == false)  {
                        alert("Acconsentire l'utilizzo dei dati personali");
                        return false;
                    }
					
			return true						
}
												
			function ValidateEmail(){
			var email = document.iscrizione.email.value;			
			var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
			if(mailformat.test(email) == false){			 
			return false;  
			}
		}
		
				$(function() {
				$( "#datepicker" ).datepicker();
				});
		
		</script>
	<body>
	
		<img src="iscriviti-ora.png" alt="Iscriviti Ora" width="300px" height="80px" />
		<br>
		<br>
		<div id="Iscrizione">
		
		<form name="iscrizione" method="POST" >
			<table border="0" cellspacing="5" cellpadding="5">
			<tr>
				<td>Nome:</td> <td><input type="text" name="nome" size="35"></td>
				<td>Cognome:</td> <td><input type="text" name="cognome" size="35"></td>
			</tr>
			<tr>
				<td>Data di nascita:</td> <td><input type="text" name="datanascita" size="35" id="datepicker"></td>
				<td>Nazione:</td> <td><input type="text" name="nazione" size="35"></td>
			</tr>
			<tr>
				<td>Email:</td> <td><input type="text" name="email" size="35" ></td>
			</tr>
			<tr>
				<td>Password:</td> <td><input type="password" name="password" size="35"></td>
			</tr>
			<tr>
				<td>Ripeti Password:</td> <td><input type="password" name="rpassword" size="35"></td>
			</tr>
			<tr>
				<td>Consenso utilizzo dati:<input type="checkbox" name="c"/></td>
			</tr>
			<tr>
			
				<td> <input class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit" value="Iscriviti" onclick="return controlli()"></td>
				<td> <input class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="reset" value="Reset Campi"></td>	
			
						
			</tr>		
			</form>			
			</table>
				
		
	</body>






</html>

**ResianTaxidrive** · 29-04-2015, 17:21

Negli esempi di jquery-ui trovi tutto il codice che ti serve per mostrare un dialogo. Guarda alla voce "Animation" per vedere come far aprire il dialogo in seguito a un evento (basta che togli le animazioni)

**simo9115** · 02-05-2015, 16:31

si ma come faccio a inserire i messaggi di errori che ho fatto dentro la function controlli nel mio alert personalizzato?

**cavicchiandrea** · 02-05-2015, 18:01

http://jqueryui.com/dialog/#modal-message

**simo9115** · 02-05-2015, 18:56

scusate se date un occhio alle function vi accorgerete che ci sono vari if...se io inserisco quel codice che mi avete detto di trovare su jquery.com da quello che ho capito il testo è uguale per tutte i controlli che effettuo invece io vorrei che il testo mi cambiasse a seconda del verificarsi dell'if...ovvero se un campo è vuoto...se le password sono diverse ecccc non so se mi avete capito...

**cavicchiandrea** · 02-05-2015, 21:09

codice:

.....
if (password != rpassword) {
$( "#dialog" ).html('Le password non coincidono').dialog( "open" );
return false;
}
if (ValidateEmail() == false){
$( "#dialog" ).html('Email inserita non valida').dialog( "open" );
return false;
}
....

nel body avrai la dialog oltre ad avere css jquery e jquery-ui nella head
<div id="dialog" title="Dialog Title">Testo iniziale</div>
Se non funziona lascia perdere bisognerebbe fare altri tentativi e non mi sembra che tu ne abbia le capacità

**lnessuno** · 04-05-2015, 09:55

Tempo fa mi costruii uno scriptino che sostituiva l'alert normale di javascript con una modal di jQuery UI, in modo automatico e senza richiedere nessun cambio nel codice html... magari può tornarti utile

Demo: http://jsbin.com/jazuxubaqo/3/edit?html,js,output

codice:

jQuery.altAlert = function(options) {
    var defaults = {
        title: "Attenzione",
        modal: true,
        resizable: false,
        buttons: {
            "Ok": function() {
                jQuery(this).dialog("close");
            }
        }
    };
    
    jQuery.extend(defaults, options);
    
    delete defaults.autoOpen;
    
    window.alert = function () {
        jQuery("<div />", { html: arguments[0].replace(/\n/, "<br />") }).dialog(defaults);
    };
};


$(function () {
    $.altAlert();
});

**simo9115** · 04-05-2015, 11:51

Originariamente inviata da lnessuno

Tempo fa mi costruii uno scriptino che sostituiva l'alert normale di javascript con una modal di jQuery UI, in modo automatico e senza richiedere nessun cambio nel codice html... magari può tornarti utile

Demo: http://jsbin.com/jazuxubaqo/3/edit?html,js,output

codice:

jQuery.altAlert = function(options) {
    var defaults = {
        title: "Attenzione",
        modal: true,
        resizable: false,
        buttons: {
            "Ok": function() {
                jQuery(this).dialog("close");
            }
        }
    };
    
    jQuery.extend(defaults, options);
    
    delete defaults.autoOpen;
    
    window.alert = function () {
        jQuery("<div />", { html: arguments[0].replace(/\n/, "<br />") }).dialog(defaults);
    };
};


$(function () {
    $.altAlert();
});

grazie mille!! sei stato il mio salvatore! posso chiederti alcune cose? questo pezzo di codice:

codice:

jQuery.extend(defaults, options);
    
				delete defaults.autoOpen;
    
				window.alert = function ()
					{
						jQuery("<div />", { html: arguments[0].replace(/\n/, "<br />") }).dialog(defaults);
					};
				};


				$(function () {
				$.altAlert();
				});

cosa andrebbe a fare?

**lnessuno** · 04-05-2015, 12:03

In sostanza, è quello che si occupa di sovrascrivere la funzione standard window.alert con la modal di jquery UI.

Discussione: alert personalizzati

Strumenti discussione

Ricerca discussione

Visualizza

alert personalizzati

Permessi di invio