2014-09-22 87 views
0

我試圖使用從引導模式彈出的窗體。莫代爾彈出bootstrap,jquery,php

當我按下「註冊器」按鈕時,隱藏窗體出現並正常工作。但是,當我完成表單並按下發送按鈕時,數據將保存在我的數據庫中,但表單不會隱藏。

我在做什麼錯?

的代碼:

HTML:

<!DOCTYPE html> 
<html lang="es"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <title>Mis tareas</title> 

    <link href="estilos/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet"> 
    <link href="estilos/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link href="estilos/signin.css" rel="stylesheet"> 
    <link href="estilos/estilo.css" rel="stylesheet"> 

    <script type="text/javascript" src="js/jquery-1.11.0.js"></script> 
    <script type="text/javascript" src="js/jquery_ui/jquery-ui-1.10.4.custom.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script> 

    <script type="text/javascript" src="js/jquery-validation-1.11.1/dist/jquery.validate.min.js"></script> 
    <script type="text/javascript" src="js/jquery-validation-1.11.1/lib/jquery.metadata.js"></script> 
    <script type="text/javascript" src="js/jquery-validation-1.11.1/localization/messages_es.js"></script> 
    <script type="text/javascript" src="js/mainjavaScript.js"></script> 

    </head> 
    <body> 
     <div id="formulario" Title="Registrarse"> 
      <form action="include/registro.php" method="POST" id="formRegistro" name="formRegistro" role="form"> 
       <fieldset id="ocultos"> 
        <input type="hidden" id="accion" name="accion" class="{required:true}"/> 
       </fieldset> 
      <fieldset id="datosUser"> 
       <div class="input-gorup"> 
        <label for="nombres">Nombres</label> 
        <span class="Info"></span> 
        <input type="text" id="nombres" name="nombres" placeholder="Nombres" class="form-control" required autofocus> 
       </div> 
       <div class="input-gorup"> 
        <label for="apellidos">Apellidos</label> 
        <span></span> 
        <input type="text" id="apellidos" name="apellidos" placeholder="Apellidos" class="form-control " required> 
       </div> 
       <div class="input-gorup"> 
        <label for="nick">Nombre de Usuario</label> 
        <span></span> 
        <input type="text" id="nick" name="nick" placeholder="Nombre Usuario" class="form-control " required> 
       </div> 
       <div class="input-gorup"> 
        <label for="pass">Contrase&ntilde;a</label>    
        <span></span> 
        <input type="password" id="pass" name="pass" placeholder="Contrase&ntilde;a" class="form-control " required> 
       </div> 
       <div class="input-gorup"> 
        <label for="rpass">Repetir contrase&ntilde;a</label> 
        <span></span> 
        <input type="password" id="rpass" name="rpass" placeholder="Repetir contrase&ntilde;a" class="form-control " required> 
       </div> 
       <div class="input-gorup"> 
        <label for="email">Email</label> 
        <span></span> 
        <input type="email" id="email" name="email" placeholder="Email" class="form-control" required> 
       </div> 
       <div class="input-gorup"> 
        <label for="departamento">Departamento</label> 
        <span></span> 
        <input type="text" id="departamento" name="departamento" placeholder="Departamento" class="form-control " required> 
       </div> 
       </fieldset> 
       <button id="send" class="btn btn-lg btn-primary btn-block" type="submit">Continuar</button> 

       <fieldset id="ajaxLoader" class="ajaxLoader hidden"> 
        <img src="images/default-loader.gif"> 
        <span>Espere un momento...</span> 
       </fieldset>  

      </form> 
     </div> 
    <div class="wrapper"> 
    <section class="container"> 

     <form class="form-signin" role="form" action="include/login.php" method="POST"> 
     <h2 class="form-signin-heading">Inciar sesi&oacute;n</h2> 
     <input type="text" class="form-control" placeholder="Usuario" name="nick" id="nick" required autofocus> 
     <input type="password" class="form-control" placeholder="Password" name="pass" id="pass" required> 
     <button class="btn btn-lg btn-primary btn-block" type="submit">Entrar</button> 

     </form> 
     <div id="btnAddUser" class="center addUser"> 
      <button id="irNuevoUser" class="btn btn-default btn-block" role="button">Registrarse</button> 
      </div> 
     </section> 
    </div> 
    </body> 
</html> 

JS文件:

$(function(){ 
      //creación de ventana formulario 
      $('#formulario').dialog({ 
       autoOpen:false, 
       modal:true, 
       width:500, 
      height:'auto', 
      resizable: false, 
      close:function(){ 
       $('#formRegistro fieldset > span').removeClass('error').empty(); 
       $('#formRegistro input[type="text"]').val(''); 
       $('#formRegistro input[type="password"]').val(''); 
       $('#formRegistro input[type="email"]').val(''); 
       $('#formRegistro select > option').removeAttr('selected'); 
      } 
     }); 

     // funcionalidad del botón que abre el formulario 
     $('#irNuevoUser').on('click',function(){ 
      // Asignamos valor a la variable acción 
      $('#accion').val('addUser'); 

      // Abrimos el Formulario 
      $('#formulario').dialog({ 
       title:'Agregar Usuario', 
       autoOpen:true 
      }); 
     }); 

    // Validar Formulario 
     $('#formRegistro').validate({ 
      submitHandler: function(){ 

       var str = $('#formRegistro').serialize(); 

       // alert(str); 

       $.ajax({ 
        beforeSend: function(){ 
         $('#formRegistro').show(); 
        }, 
        cache: false, 
        type: "POST", 
        dataType: "json", 
        url: "include/registro.php", 
        data: str + "&id=" + Math.random(), 
        success: function(response){ 
          $('#formRegistro .ajaxLoader').hide(); 
         // Validar mensaje de error 
         if(response.respuesta == false){ 
          alert(response.mensaje); 
         } 
         else{ 
          // si es exitosa la operación 
          $('#formRegistro .ajaxLoader').dialog({autoOpen:false}); 
         } 

         $('#formulario .ajaxLoader').dialog({autoOpen:false}); 

        }, 
        error:function(xhr, status, error){ 
         //var err = eval("(" + xhr.responseText + ")"); 
         console.log(xhr.responseText); 
         } 
       /*  error: function(jqXHR, textStatus, errorThrown) { 
          console.log(JSON.stringify(jqXHR)); 
          console.log("AJAX error: " + textStatus + ' : ' + errorThrown); 
         }*/ 
       }); 

       return false; 

      }, 
      errorPlacement: function(error, element) { 
       error.appendTo(element.prev("span").append()); 
      } 
     }); 

    }); 

以及處理中的數據,並將其發送到數據庫的php文件:

<?php 
include ("funciones.php"); 
//if(verifyuser()){ 
    $nick   = $_POST['nick']; 
    $pass   = $_POST['pass']; 
    $rpass   = $_POST['rpass']; 
    $nombres  = $_POST['nombres']; 
    $apellidos  = $_POST ['apellidos']; 
    $email   = $_POST['email']; 
    $departamento = $_POST['departamento']; 
    $idPersona  = ""; 
    $reqlen = strlen($nick) * strlen($pass) * strlen($rpass); 

    if($reqlen > 0) { 
     if ($pass === $rpass) { 
      $pass = md5($pass); 
      $idRol = 2; 
      $estadoUsuario = 1; 
      //require (funciones.php"); 
      consultar("INSERT INTO persona (nombres, apellidos, email, departamento) 
         VALUES ('$nombres', '$apellidos', '$email', '$departamento')"); 
      $execute = consultar("SELECT nombres, idPersona FROM persona WHERE nombres='$nombres'"); 
      //$execute = mysql_query($query) or die (mysql_error()); 
      if ($row=mysql_fetch_array($execute)){ 
       $idPersona = $row["idPersona"]; 
      } 
      consultar("INSERT INTO login (nick, pass, email, rol_idRol, estadoUsuario, persona_idPersona) 
         VALUES ('$nick', '$pass', '$email', '$idRol', '$estadoUsuario', '$idPersona')") or die (mysql_error()); 

      //echo "Los datos han sido enviados correctamente, revise su correo para obtener el link de alta de usuario"; 
      header("Location: ../registrook.html"); 
     } else { 
      echo "Las contraseñas ingresadas no coinciden, ingresar dos contraseñas iguales."; 
     } 

    } else { 
     echo "Para continuar debe llenar todos los campos requeridos."; 
    } 
//}else { 
    //header ("Location: error.php"); 
    //} 
?> 

我正在使用fi rebug嘗試找到錯誤。
這是響應當我按下「發送」按鈕:

Accept-Ranges bytes 
Connection Keep-Alive 
Content-Length 885 
Content-Type text/html 
Date Mon, 22 Sep 2014 23:20:36 GMT 
Keep-Alive timeout=5, max=99 
Server Apache/2.4.10 (Unix) OpenSSL/1.0.1i PHP/5.5.15 mod_perl/2.0.8-dev Perl/v5.16.3 
ver código fuente 
Accept application/json, text/javascript, */*; q=0.01 
Accept-Encoding gzip, deflate 
Accept-Language es-ar,es;q=0.8,en-us;q=0.5,en;q=0.3 
Content-Type application/x-www-form-urlencoded; charset=UTF-8 
Cookie PHPSESSID=9g25h7ailr0mpjmnetcaupvbu3 
Host localhost 
Referer http://localhost/www/final3/index.html 
User-Agent Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:33.0) Gecko/20100101 Firefox/33.0 
X-Requested-With XMLHttpRequest 

<!DOCTYPE HTML> 
<html lang="ES"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <title>GTD-MASTER</title> 
     <meta name="keywords" content="" /> 
     <meta name="description" content="" /> 
     <link href="estilos/estilo.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
     <div id="header"> 
      <h1>GTD-MASTER</h1> 
      <h1>Bienvenidos al sistema Get Things Done</h1> 
     </div> 
     <!-- end #header --> 
     <div id="wrapper"> 
      <div id="content"> 
       <h5>Su registro se realizo correctamente.</h5> 
       <h4>Para completar el mismo revise su correo para obtener el link para activar su cuenta.</h4> 
       <a href="index.html" target="_self"> <input type="button" name="boton" value="Volver" /></a> 
      </div> 
     </div> 
     <!-- end #content --> 
     <div id="footer"> 
     <p id="legal"></a></p> 
     <p id="brand"></p> 
     </div> 
     <!-- end #footer --> 

    </body> 
</html> 

這似乎是工作,但它並沒有顯示成功頁面,並沒有隱藏模式對話框。

回答

0

雖然我看不到直接調用Bootstrap的模態()方法,但我假設這就是對話()方法。您可以使用:

$('#myModalId').modal('toggle'); 

或者在你的情況,請嘗試:

$('#myModalId').dialogue('toggle'); 
+0

喜布賴恩,感謝您的快速回答,我沒有你所說的話,但形式仍然沒有消失。 – diego 2014-09-23 01:03:25

+0

你使用的是什麼版本的引導程序? – 2014-09-23 18:00:48