dongmeng1875
2016-01-03 14:56
浏览 53

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

I have build a login system and I want to pop up a UI Dialog when somebody types a wrong username or a wrong password. I made it pop up when the submit button is clicked, but for some reasons, which I currently don't know, my Dialog box does not open, and I'm automatically redirected to a blank page.

This is my code:

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
}
?>

Full HTML Form

<!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>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • doudao7113 2016-01-03 15:43
    已采纳

    You have to use ajax for this. else it always redirects and you could not open popup.

    $(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");
                               }   
                              }
                         });
                    }
                }
            });
    
        });
    
    });
    
    已采纳该答案
    打赏 评论
  • dongyi5570 2016-01-03 15:04

    Try to change the beginning of submit event in:

    $("#submit").click(function(e){
            e.preventDefault();  // this will avoid form submit on error
            $("#popup").dialog({
    

    Moreover, you do not see the dialg because you need to change the autopen attribute to:

    autoOpen: true,
    

    With autoOpen set to false, to open the dialog you need to do another call:

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

    The full code:

    $("#submit").click(function(e){
      e.preventDefault();
      $("#popup").dialog({
        autoOpen: true,
        modal: true,
        height: 300,
        width: 300,
        title: "Error",
        buttons: {
          'OK': function(){
            $(this).dialog("close");
          }
        }
      });
    <link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    
    
    <form action="http://www.google.com">
      <p>
        <input type="submit" value="LOG IN" id="submit">
      </p>
    </form>
    <div id="popup" style="display: none">
      <p>Wrong username or password</p>
    </div>

    </div>
    
    打赏 评论
  • dongleiwei2182 2016-01-03 15:10

    Your trying to make a dialog popup when the submit button is clicked but your only declaring that WHEN the submit is clicked to show popup, your not calling it, try adding this:

    $('#submit').click();
    
    打赏 评论
  • doulu6929 2016-01-03 15:30

    This worked for me!!

    Add return false; at the end of your submit handler function. return false; does work of both e.preventDefault and e.stopPropagation at same time.(Reference : event.preventDefault() vs. return false )

    Also change the line to $("#popup").dialog('open');

        $("#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;
        });
    

    Full Snippet

    <?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
        }
    ?>
    
    打赏 评论

相关推荐 更多相似问题