problemas con jquery al refrescar.

[zibor]

Buenas, estoy liado con una web, y estoy aprendiendo a utilizar JQuery. He hecho mediante este frameworks un registro e inicio de session, mostrandomelos en un dialog (algo parecido a un pop-up). Se supone que la propia funcion de JQuery oculta la capa donde contiene el formulario... y por si acaso yo mismo le he puesto que lo oculte mediante css.. mi problema es que al refrescar la web, aunq sea muy rapido, se vé dicha caja oculta... y queda feo... saben porque puede seR?

este es el div contenedor del form

Código:

<!-- Formulario CREAR NUEVO USUARIO -->
<div id="dialog-form" title="Crear nuevo usuario" style="display: hidden;">
	<p class="validateTips">Todos los campos son obligatorios.</p>

        <form id="form-user" action="index.php?c=62" method="POST">
	<fieldset>
            <div class="caja-input" for="name">
                <div>Usuario</div>
		<div><input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /></div>
            </div>
            <div class="caja-input" for="email">
                <div>E-mail</div>
		<div><input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /></div>
	    </div>
            <div class="caja-input" for="clave">
                <div>Clave</div>
		<div><input type="password" name="clave" id="clave" value="" class="text ui-widget-content ui-corner-all" /></div>
	    </div>
        </fieldset>
	</form>
</div>

esta es la funcion JQuery

Código:

<script type="text/javascript">
	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );
		
		var name = $( "#name" ),
			clave = $( "#clave" ),
			allFields = $( [] ).add( name ).add( clave ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips(  n + ": debe comprenderse entre " +
					min + " y " + max + " caracteres." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
		
		$( "#dialog-form2" ).dialog({
			autoOpen: false,
			height: 250,
			width: 350,
			modal: true,
			buttons: {
				"Acceder": function() {
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

					bValid = bValid && checkLength( name, "Usuario", 3, 10 );
					bValid = bValid && checkLength( clave, "Clave", 5, 20 );

					bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Usuario: puede contener a-z, 0-9 y guión bajo" );
					// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
					bValid = bValid && checkRegexp( clave, /^([0-9a-zA-Z])+$/, "Clave: puede contener a-z y 0-9." );

					if ( bValid ) {
						$( "#form-user2" ).submit(); 
						$( this ).dialog( "close" );
					}
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});

		$( "#iniciar-sesion" )
			.click(function() {
				$( "#dialog-form2" ).dialog( "open" );
			});
	});
</script>

[perryjr]

display: hidden??

usa

display: none;

[chichote]

debes tener claro que cada vez que refrescas la pagina jquery vuelve a comenzar de cero, con css puedes ocultarla desde el principio con display:none, o bien con jquery desde el document ready.

Tambien aclarar que todas las instrucciones que esten dentro del document ready se ejecutaran al cargar la pagina, en tu caso estas utilizando directo $(function() por lo que las instrucciones que estan hay dentro se ejecutaran solo cuando se cumplan los requisitos, como por ejemplo un evento con el mouse, teclado, etc.

Saludos.

[zibor]

Gracias, no me habia fijado en ese despiste... e cambiado hidden por none, ya que era un fallo mio. Funciona bien yá.

Claro, esas funciones solo funcionan si el usuario pulsa en el correspondiente boton.

Gracias.