javascript — модальная всплывающая начальная загрузка, jquery, переполнение стека
Я пытаюсь использовать форму с модальной всплывающей из начальной загрузки.
Когда я нажимаю кнопку «Регистратор», появляется скрытая форма и работает нормально. Однако, когда я заполняю форму и нажимаю кнопку отправки, данные сохраняются в моей базе данных, но форма не скрывается.
Что я делаю неправильно?
Код:
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ña</label>
<span></span>
<input type="password" id="pass" name="pass" placeholder="Contraseña" class="form-control " required>
</div>
<div class="input-gorup">
<label for="rpass">Repetir contraseña</label>
<span></span>
<input type="password" id="rpass" name="rpass" placeholder="Repetir contraseñ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="https://web-answers.ru/wp-content/uploads/2019/03/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ó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");
//}
?>
Я использую Firebug, чтобы попытаться найти ошибку.
Это ответ, когда я нажимаю кнопку «отправить»:
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>
Кажется, это работает, но не показывает страницу успеха и не скрывает модальное поле.
Решение
Хотя я не вижу прямого вызова метода Bootstrap ‘modal (), я предполагаю, что это и есть метод dialog (). Ты можешь использовать:
$('#myModalId').modal('toggle');
Или в вашем случае попробуйте:
$('#myModalId').dialogue('toggle');
Другие решения
Других решений пока нет …