Automatically run data-popup

[abhasgupta88]

Hi,

I have a php code and I'm trying to implement a login functionality using jquery data-popup. Currently, it works when I click a button: 

<a href="#" data-popup=".popup-login" class="open-popup"><img src="images/icons/blue/lock.png" alt="" title="" /><span>LOGIN</span></a>

What I want is that this popup should open automatically when a certain condition is met. 

$login = $_REQUEST['login'];
if (!isset($_SESSION['employee_id']))
{
    if ($login=="success");
    else if ($login=="fail")
    {
        // OPEN THE POPUP AGAIN
    }
}

This is the HTML of the login form that pops up: 

<!-- Login Popup -->
<div class="popup popup-login">
  <div class="content-block">
    <h4>LOGIN</h4>
    <div class="loginform">
      <form id="LoginForm" method="post" action="login.php">
        <input type="text" name="username" value="" class="form_input required" placeholder="username" />
        <input type="password" name="password" value="" class="form_input required" placeholder="password" />
        <div class="forgot_pass"><a href="#" data-popup=".popup-forgot" class="open-popup">Forgot Password?</a></div>
        <input type="submit" name="submit" class="form_submit" id="submit" value="SIGN IN" />
      </form>
    </div>
  </div>
</div>

 

What I want is, if the session variable is not available, and the login is incorrect, the popup box should keep appearing, so that the user does not have access to anything else.

I am not very experienced with jquery, and I cannot figure out how I can make the login box appear automatically if the $login variable is "fail". 

Any help would be appreciated. 

[requinix]

Standard practice in this situation is to use AJAX to send the login information in the background, keeping the dialog open, and if the login failed then present the error message immediately. The user never has to leave the page (until they log in successfully).

Your PHP script looks mostly the same except it returns JSON that includes whether the login worked or an error message if it did not, instead of redirecting or outputting HTML. Your Javascript receives that JSON and acts accordingly.

[abhasgupta88]

I have never understood how to use Ajax. It has always been my weakness. I won't be able to implement what you said without help. 
I'm mostly a php/mysql programmer, doing projects as a hobby/for my own business. 

I'll probably just use plain php to check for the session variable and redirect to the login page (I'll have to discard the login popup idea). 

[requinix]

If you know that AJAX is a weakness of yours then why not try to do something about it? Can't keep running away from it forever.

It's not actually that difficult - not nearly as difficult as it was 10 years ago. From the Javascript side you can use a library (if you have one already) or not, and on the PHP side you do pretty much the same stuff you would always do.

[abhasgupta88]

Thanks for your help and advice

Right now I'm running a deadline, so will probably revert to old-school php, and meanwhile I'll try to learn and understand how to implement AJAX, and will gradually port my code to it. 

I'm not a professional programmer per say, and at times I find it difficult to learn new methodologies and techniques, and that has always been the reason I've never got the hang of AJAX till now. 

[kicken]

You could probably just simulate a click on the link to show the popup again.

if ($login==='fail'){
   echo '<script type="text/javascript">
     jQuery(function(){
       $(".open-popup").click();
     });
	</script>
	';
}

 

[abhasgupta88]

12 hours ago, kicken said:

You could probably just simulate a click on the link to show the popup again.

if ($login==='fail'){
   echo '<script type="text/javascript">
     jQuery(function(){
       $(".open-popup").click();
     });
	</script>
	';
}

 

Thank you for your input. This seemed the logical thing to do, and I did try it, but doesn't seem to work. The popup doesn't open. The function is being called however, I checked using an alert prompt.

Edited July 19, 2020 by abhasgupta88