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, Jan 03 '16 at 15:03
Please post your full `
` html where are you posting your data. You have to use `ajax`. what is your form action? — Parth Trivedi, Jan 03 '16 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, Jan 03 '16 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, Jan 03 '16 at 15:18
I don't now why others are answering quickly before read code. but how can your php form submit and error directly works with jQuery. you have to make `ajax` call then in `success` it returns failes or valid login.On that basis you can open popup. Without ajax it always reload and you can't use `dialog`. — Parth Trivedi, Jan 03 '16 at 15:21
Yes, I know, but I still don't see why `ajax` is required, since I can login simply by just using `PHP`, and I've tried to use an `alert()` inside those script tags in tha php file before coding, so I knew that my script can run inside that php `else{}` statement. — Andrei Olar, Jan 03 '16 at 15:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/99598/discussion-between-parth-trivedi-and-olar-andrei). — Parth Trivedi, Jan 03 '16 at 15:24

Parth Trivedi · Accepted Answer · 2016-01-03T15:52:10.883

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

    });

});

gaetanoM · Answer 2 · 2016-01-03T15:27:25.533

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>

@OlarAndrei In the snippet you will not see the dialog, so you must copy and paste in your code. Let me know. — gaetanoM, Jan 03 '16 at 15:24

score 1 · Answer 3 · answered Jan 03 '16 at 15:10

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 03 '16 at 15:10

Esteban Rincon

2,040
3
27
44

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. – Andrei Olar Jan 03 '16 at 15:14
Are you 100% sure that your `PHP` code works fine ? have you tried just calling the popup no matter what ? – Esteban Rincon Jan 03 '16 at 15:17
My PHP works fine since I can login if I type the good username and password. I tried to call an`alert()` before coding, so to be sure that my JS would work. – Andrei Olar Jan 03 '16 at 15:19

score 1 · Answer 4 · edited May 23 '17 at 12:15

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

jQuery UI Dialog not visible when opening from php

4 Answers4