Javascript 从php打开jQuery UI对话框时不可见_Javascript_Php_Jquery_Html

Javascript 从php打开jQuery UI对话框时不可见

javascript php jquery html

Javascript 从php打开jQuery UI对话框时不可见,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我已经建立了一个登录系统，当有人输入错误的用户名或密码时，我想弹出一个UI对话框。我让它在点击提交按钮时弹出，但由于某些原因，我的对话框没有打开，我会自动重定向到一个空白页，我目前不知道这些原因这是我的代码： if($count == 1){ $_SESSION['username'] = "username"; $_SESSION['password'] = "password"; header("Location:login_success.php"); }else{ ?> &l

我已经建立了一个登录系统，当有人输入错误的用户名或密码时，我想弹出一个UI对话框。我让它在点击提交按钮时弹出，但由于某些原因，我的对话框没有打开，我会自动重定向到一个空白页，我目前不知道这些原因

这是我的代码：

if($count == 1){
$_SESSION['username'] = "username";
$_SESSION['password'] = "password";

header("Location:login_success.php");
}else{

?>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script>
    $("#submit").click(function(){
        $("#popup").dialog({
            autoOpen: false,
            modal: true,
            height: 300,
            width: 300,
            title: "Error",
            buttons: {
                'OK': function(){
                    $(this).dialog("close");
                }   
            }
        });

    });

    $('#submit').click();

</script>

<?php
}
?>

完整HTML表单

<!DOCTYPE html>
<html>
<head>
  <title>Sign In</title>
  <link rel="stylesheet" href="css/SignIn.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>

  <form action="includes/check_login.php" method="post">
    <p>
        <label for="username">Username</label>
        <input id="username" name="username" type="text">
        <span>Username cannot be empty</span>
    </p>
    <p>
        <label for="password">Password</label>
        <input id="password" name="password" type="password">
        <span>Password cannot be empty</span>
    </p>
    <p>
        <input type="submit" value="LOG IN" id="submit">
    </p>
    <p id="account">
        No account ? Please <a href="signUp.html">Sign Up!</a><br><br>
        <a href="ForgotPassword.html">Forgot password ?</a>
    </p>
</form>

<div id="popup" style="display: none">
    <p>Wrong username or password</p>
</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/SignIn.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

尝试在以下位置更改提交事件的开头：

$submit.clickfunction{ e、 preventDefault；//这将避免表单错误时提交 $popup.dialog{ 此外，您没有看到拨号，因为您需要将autopen属性更改为：

autoOpen: true,

错误的用户名或密码

尝试在以下位置更改提交事件的开头：

$submit.clickfunction{ e、 preventDefault；//这将避免表单错误时提交 $popup.dialog{ 此外，您没有看到拨号，因为您需要将autopen属性更改为：

autoOpen: true,

错误的用户名或密码

您试图在单击“提交”按钮时弹出一个对话框，但您仅声明当单击“提交”按钮以显示弹出窗口时，您没有调用它，请尝试添加以下内容：

$('#submit').click();

您试图在单击“提交”按钮时弹出一个对话框，但您仅声明当单击“提交”按钮以显示弹出窗口时，您没有调用它，请尝试添加以下内容：

$('#submit').click();

这对我有用

在提交处理程序函数的末尾添加return false。返回false；e.preventDefault和e.stopPropagation同时工作。参考：

同时将行更改为$popup.dialog'open'

完整片段

<?php

    if(isset($count) && $count == 1)
    {
        $_SESSION['username'] = "username";
        $_SESSION['password'] = "password";

        header("Location:login_success.php");
    }
    else
    {

?>

        <html>
            <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
            <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>


        <body>
        <form><p>
           <input type="submit" value="LOG IN" id="submit">
        </p>
        </form>
        <div id="popup" style="display: none">
           <p>Wrong username or password</p>
        </div>     
        </body>
        </html>

            <script type="text/javascript">

            $("#submit").click(function(e){

                $("#popup").dialog({
                    autoOpen: false,
                    modal: true,
                    height: 300,
                    width: 300,
                    title: "Error",
                    buttons: {
                        'OK': function(){
                            $(this).dialog("close");
                        }   
                    }
                });

                $("#popup").dialog('open');

                return false;
            });        
        </script>

<?php
    }
?>

这对我有用

在提交处理程序函数的末尾添加return false。返回false；e.preventDefault和e.stopPropagation同时工作。参考：

同时将行更改为$popup.dialog'open'

完整片段

<?php

    if(isset($count) && $count == 1)
    {
        $_SESSION['username'] = "username";
        $_SESSION['password'] = "password";

        header("Location:login_success.php");
    }
    else
    {

?>

        <html>
            <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
            <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>


        <body>
        <form><p>
           <input type="submit" value="LOG IN" id="submit">
        </p>
        </form>
        <div id="popup" style="display: none">
           <p>Wrong username or password</p>
        </div>     
        </body>
        </html>

            <script type="text/javascript">

            $("#submit").click(function(e){

                $("#popup").dialog({
                    autoOpen: false,
                    modal: true,
                    height: 300,
                    width: 300,
                    title: "Error",
                    buttons: {
                        'OK': function(){
                            $(this).dialog("close");
                        }   
                    }
                });

                $("#popup").dialog('open');

                return false;
            });        
        </script>

<?php
    }
?>

你必须使用ajax，否则它总是重定向，你无法打开弹出窗口

$(document).ready(function() {

    $('#submit').click(function() {
        $.ajax({
            type: "POST",
            url: 'includes/check_login.php',
            data: {
                username: $("#username").val(),
                password: $("#password").val()
            },
            success: function(data)
            {
                if (data.Success) {
                    //if success 
                     window.location.replace('admin/admin.php');
                }
                else {
                    //in valid username/password so open popup
                     $("#popup").dialog({
                            autoOpen: false,
                            modal: true,
                            height: 300,
                            width: 300,
                            title: "Error",
                            buttons: {
                           'OK': function(){
                            $(this).dialog("close");
                           }   
                          }
                     });
                }
            }
        });

    });

});

你必须使用ajax，否则它总是重定向，你无法打开弹出窗口

$(document).ready(function() {

    $('#submit').click(function() {
        $.ajax({
            type: "POST",
            url: 'includes/check_login.php',
            data: {
                username: $("#username").val(),
                password: $("#password").val()
            },
            success: function(data)
            {
                if (data.Success) {
                    //if success 
                     window.location.replace('admin/admin.php');
                }
                else {
                    //in valid username/password so open popup
                     $("#popup").dialog({
                            autoOpen: false,
                            modal: true,
                            height: 300,
                            width: 300,
                            title: "Error",
                            buttons: {
                           'OK': function(){
                            $(this).dialog("close");
                           }   
                          }
                     });
                }
            }
        });

    });

});

如果您的对话框应该自动触发，那么调用$'submit'。click；，因为您在执行click Yourself时说它工作正常，我打错了，但这没有帮助…请将您的完整html发布到您发布数据的位置。您必须使用ajax。您的表单操作是什么？我已经发布了。Pff。我认为这是可能的没有AJAX，因为我不知道如何使用它。是的，问题是。你必须使用AJAX发布。你的操作是action=includes/check_login.php，它会重定向到该URL。如果你的对话框应该自动触发，那么调用$'submit'。单击；因为你说它在执行单击时工作正常，我打错了，但是这并没有帮助…请发布你的完整html，你在哪里发布你的数据。你必须使用ajax。你的表单操作是什么？我已经发布了。Pff。我认为没有ajax是可能的，因为我不知道如何使用它。是的，问题是。你必须使用ajax发布。你的操作是action=includes/check_login.php，它重定向到Url我编辑了我的帖子。我试图这样添加它，但没有发生任何事情。我只是被重定向到一个空白页面。你100%确定你的PHP代码工作正常吗？你有没有尝试过无论如何只调用弹出窗口？我的PHP工作正常，因为如果我键入正确的用户名和密码，我就可以登录。我尝试在编码之前调用analert，以便确保我的JS可以工作。我已经编辑了我的帖子。我试图这样添加它，但没有发生任何事情。我只是被重定向到一个空白页面。你100%确定你的PHP代码工作正常吗？你有没有尝试过无论如何只调用弹出窗口？我的PHP工作正常，因为如果我键入正确的用户名和密码，我就可以登录。我尝试调用一个编码前请发出警报，以确保我的JS正常工作。@olaranderi在代码段中，您将看不到对话框，因此您必须复制并粘贴到代码中。请告诉我。@olaranderi在代码段中，您将看不到对话框，因此您必须复制并粘贴到代码中。请告诉我。