[SOLUCIONADO] Ocultar div antes de mostrarse una pagina

ljbautista · #1 (**permalink**) 23/04/2015, 11:10

Hola que tal bueno tengo una duda que supongo es simple pero agradecería que me dieran luz ya que a lo mejor estoy tratando de hacer algo que no se puede o tal vez lo estoy haciendo mal.

Tengo mi pagina de login, donde tengo un DIV oculto que mostrara el mensaje de error en caso de que este mal el logueo.

El detalle es que que cuando cargo la pagina por primera vez el div se ve momentaneamente y desaparece (eso cuando etsoy cuando estoy con xampp en mi localhost)

Cuando subo el login a algun host y la conexion es lenta el div se muestra durante mas tiempo (supongo en lo que carga toda la pagina) y desparece.

Agrego mi codigo por si alguien ve algo raro que me pueda orientar:

Código HTML:

Ver original<?php include('common/headPHP.php') ?>
<!DOCTYPE html>
<html lang="es">
<head>
    <?php 
        $PageSubtitle = ' | Login';
        include('common/head.php');
    ?>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="login-panel panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Syst</h3>
                    </div>
                    <div class="panel-body">
                        <form role="form" id="form_login">
                            <fieldset>
                                <div class="form-group">
                                    <input class="form-control" placeholder="User"     name="txt_user" type="text" autofocus value=""  >
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Password" name="txt_pass" type="password" value="" >
                                </div>
                                <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
                            </fieldset>
                        </form>
                    </div>                 
                </div>
                <div class="alert alert-danger" id="div_msg_fail" align="center">
                        <h4>Datos incorrectos</h4>
                </div>
            </div>
        </div>
    </div>
</body>
<?php include('common/js.php');?>
<script>
        $(document).ready(function(){
           $("#div_msg_fail").hide();                           
        });
        
        $("#form_login").submit(function(){
          $.ajax({    
            url: "php/controllers/ctrl_processLogin.php",
            type: "POST",
            data: $("#form_login").serialize(),
            success: function(data){
              if(data){
                console.log('DATA=OK');
                $("#div_msg_fail").hide();
                $(location).attr('href','home.php');
              }else{
                $("#div_msg_fail").show();
              }
          }});
          return false;
        });
    </script>
</html>

Como les digo no se si eso de por si es normal y no tiene solucion o hay algo que pueda hacer??? De antemano gracias!!!

Saludos.

MaNuX0218 · #2 (**permalink**) 23/04/2015, 11:34

Es mejor ocultarlo directamente con display:none, que en vez de hide() en jquery.

Código HTML:

Ver original<div class="alert alert-danger" id="div_msg_fail" align="center" style="display:none">
                        <h4>Datos incorrectos</h4>
                </div>

Eso ara que siempre este oculto, hasta que tu le indiques cuando mostrarse.

Saludos.

ljbautista · #3 (**permalink**) 23/04/2015, 12:12

Perfecto muchísimas gracias!!! Si eso era lo que necesitaba!!!