FancyBox v2 - login box

Question

I've readed and went trough all examples on: - http://fancyapps.com/fancybox/

There is nothing to help me with making a pop-up login box.

I've checked the old version Fancybox 1.3.x which have an example for login box, but that method doesn't really work on new Fancybox v2.

If anyone can help me, I will be happy.

So far I have this code, which is semi-working:

$("#top-login-button").click(function() {
        $.fancybox.open({
            href : "#login_form",
            padding : 0,
            onClosed : function() {
                    $("#login_error").hide();
            }
        });
    });

    $("#login_form_ajax").bind("submit", function() {

        if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
            $("#login_error").show();
            return false;
        }

        $.fancybox.showActivity();

        $.ajax({
            type        : "POST",
            cache   : false,
            url     : "/login.php",
            data        : $(this).serializeArray(),
            success: function(data) {
                $.fancybox(data);
            }
        });

        return false;
    });

JFK · Accepted Answer · 2013-01-15T20:25:04.500

7

For v2.x this would work (notice that I commented out what options were changed)

$(document).ready(function() {
 $("#top-login-button").click(function() {
  $.fancybox({
   href : "#login_form",
   padding : 0,
   // it was onClosed for v1.3.4
   afterClose : function(){
    $("#login_error").hide();
   }
  }); // fancybox
 }); //click

 $("#login_form_ajax").bind("submit", function() {
  if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
   $("#login_error").show();
   $.fancybox.update(); // it was $.fancybox.resize(); for v1.3.4
   return false;
  }
  $.fancybox.showLoading(); // it was $.fancybox.showActivity(); for v1.3.4
  $.ajax({
   type   : "POST",
   cache  : false,
   url    : "/login.php",
   data   : $(this).serializeArray(),
   success: function(data) {
    $.fancybox(data);
   }
  });
  return false;
 }); // bind
}); // ready

UPDATE (Aug 10, 2012): Added a DEMO for the skeptics.

edited Jan 15 '13 at 20:25

answered Jul 02 '12 at 18:56

JFK

40,963
31
133
306

4

@MarekBar : There is a big difference between `It doesn't work at all` and `I cannot make it work`. If you are going to make such statement, make sure you can prove it, otherwise don't be afraid to ask for help. I added a DEMO with exactly the same code as above ...see my edited answer. – JFK Aug 10 '12 at 18:36
Nice comment JFK - and friggeen awesome demo - using it right now! +1 – nicorellius Jan 09 '13 at 22:59
@JFK (or anyone) I'm trying to get my submit button to update my database. I've been researching all morning but am still very confused (new to AJAX, JQuery, JS, PHP, so this is a challenge for me). This seems the closest to a solution I've gotten--I'm confused by the `url: "/login.php"` line. What does that file look like and do? – thumbtackthief Jun 20 '13 at 16:42
@thumbtackthief : I already posted a related comment to you here http://stackoverflow.com/a/14343547/1055987 (you may need to read more php tutorials/books) – JFK Jun 20 '13 at 18:36
Yes, I guess I was hoping for more assistance than "something that will process the data" but I figured it out on my own. Thanks anyway. – thumbtackthief Jun 20 '13 at 18:54
@thumbtackthief : well, in the same comment there is a link to another post, which includes a sample of the referenced php file (url) – JFK Jun 20 '13 at 19:49
Your code is great, but what if the error comes back from the ajax, like bad password – CrabbyPete Dec 18 '16 at 15:22
@CrabbyPete: I guess I would add `error: function(error){$.fancybox(error.responseText)}` to the AJAX options – JFK Dec 20 '16 at 15:15
@JFK if I do what you have and return the form with the error so the user can fix it and repost I get a iframe inside the original iframe – CrabbyPete Dec 21 '16 at 00:03
I have a similar problem [link] http://stackoverflow.com/questions/41125245/how-do-i-reload-fancybox-iframe-form-with-errors-in-flask – CrabbyPete Dec 21 '16 at 15:39

score 0 · Answer 2 · edited Jul 17 '14 at 11:55

0

In your code, you need to change href : "#login_form" to be href : "#login_form_ajax".

edited Jul 17 '14 at 11:55

Matt

74,352
26
153
180

answered Jul 17 '14 at 10:58

DPS

1

FancyBox v2 - login box

2 Answers2

Linked