Jump to content
abhasgupta88

Automatically run data-popup

Recommended Posts

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. 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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). 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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>
	';
}

 

Share this post


Link to post
Share on other sites
Posted (edited)
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 by abhasgupta88

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.