jQuery UI Dialog not visible when opening from php

Question

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>

If your dialog should trigger automatically, then call the $('#submit').click(); since you say it was working properly when you performed the click yourself — Esteban Rincon
– Esteban Rincon, Commented Jan 3, 2016 at 15:03
Please post your full <form> html where are you posting your data. You have to use ajax. what is your form action? — Parth Trivedi
– Parth Trivedi, Commented Jan 3, 2016 at 15:14
I've posted it. Pff. I thought it is possible without AJAX, since I don't know how to use it. — Andrei Olar
– Andrei Olar, Commented Jan 3, 2016 at 15:17
Yes problem is that. You have to use ajax for posting. your action is action="includes/check_login.php" and it redirects to that url — Parth Trivedi
– Parth Trivedi, Commented Jan 3, 2016 at 15:18

Parth Trivedi · Accepted Answer · 2016-01-03 15:52:10Z

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

    });

});

Esteban Rincon · Accepted Answer · 2016-01-03 15:10:22Z

1

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();

answered Jan 3, 2016 at 15:10

Esteban Rincon

2,1195 gold badges29 silver badges49 bronze badges

3 Comments

Andrei Olar Over a year ago

I've edited my post. I tried to add it like that, but it doesn't happen anything. I'm just redirected to a blank page.

Esteban Rincon Over a year ago

Are you 100% sure that your PHP code works fine ? have you tried just calling the popup no matter what ?

Andrei Olar Over a year ago

My PHP works fine since I can login if I type the good username and password. I tried to call analert() before coding, so to be sure that my JS would work.

gaetanoM · Accepted Answer · 2016-01-03 15:27:25Z

1

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>

edited Jan 3, 2016 at 15:27

answered Jan 3, 2016 at 15:04

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

1 Comment

gaetanoM Over a year ago

@OlarAndrei In the snippet you will not see the dialog, so you must copy and paste in your code. Let me know.

Community · Accepted Answer · 2017-05-23 12:15:23Z

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

Collectives™ on Stack Overflow

jQuery UI Dialog not visible when opening from php

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related