views:

10144

answers:

9

is there a way to get a fancybox (http://fancy.klade.lv/) or any other lightbox from submitting a FORM (with an image button)?

HTML looks like this:

<form action="/ACTION/FastFindObj" method="post">
  <input name="fastfind" class="fastfind" value="3463" type="text">
  <input name="weiter" type="submit">
</form>

These won't do:

    $("form").fancybox();
    $("input").fancybox();
    $("input[name='weiter']").fancybox();

Anyone spotting my mistake or having a workaround or an alternative script? Thanks in advance

A: 

I do something like that using facebox, which can be programmatically invoked in a number of ways (which is why I chose it over fancybox although fancybox is prettier):

$.facebox($("form").html());

More examples:

$.facebox({ ajax: 'remote.html' });
$.facebox({ image: 'blah.jpg' });
karim79
currently you can invoke Fancybox by droping an anchor onto the page and trigger its click event... little crude but it works.the problem i have also with using the .html() method is that its not freindly in IE... it doesnt work, and as a result i would have to parse the html, bit tiresome... unless you know of a way round it?
nickmorss
A: 

Fancybox seems to work only on <a href> and not on buttons or images.

kaiz.net
Sadly i think you right... just hoping some legend will prove this wrong?
nickmorss
+1  A: 

TRY THIS

$(document).ready(function() {
  $("#link").fancybox();
  $("#btn").click(function(){
    $("#link").trigger('click');
  });
});

<input type="button" id="btn" value="Button" />
<div style="display:none;"> 
 <a href="#test" id="link">Click</a>
</div>

<div id="test" style="display:none;">fancy box content</div>

on click of the button you trigger a click on the href which is hidden.

hope this helps

Yash
+3  A: 

A better idea is to use on-the-fly html, ie.

$("#buttontoclick").click(function() {
    $('<a href="path/to/whatever">Friendly description</a>').fancybox({
     overlayShow: true
    }).click();
});
A: 

You can do a ajax submit of the form data, store the data in the session and then trigger the link click.

Eric Koh
A: 

$("#box").fancybox(); <a id="box"><input name="weiter" type="button"></a>

sk
A: 

I just had to do this. Here's how I went about it.

$('#elementid').fancybox({
   onStart : function() {
      $.post($(this).attr('href'), $('#formid').serialize());
   }
});

That way you can submit the form and call the fancybox all in one shot. It does submit the form ajax style. The "submit" button needs to be in an <a> tag.

Hope that helps.

Joe Mills
+6  A: 

I believe all the other answers miss the point of the question (unless I am the one misunderstanding). What I think the author wanted was to have it such that when a form is submitted, its results are displayed in a fancybox. I didn't find that any of the other answers provided that functionality.

To achieve this, I used the jQuery Form Plugin (http://malsup.com/jquery/form/) to easily convert the form to an ajax call. Then I used the success callback to load the response into a fancybox using a manual call to $.fancybox().

$(document).ready(function() {
    $("#myForm").ajaxForm({
        success: function(responseText){
            $.fancybox({
                'content' : responseText
            });
        }
    }); 
});

So instead of attaching fancybox to some artificial <a> tag, you attach ajaxForm to the form itself.

Garland Pope
i think at last we may have an answer. the project is now long gone, but this certainly seems like the kind of approach i wanted to go with, i didn't know that plugin existed, thanks Garland!
nickmorss
Excellent! I hope this helps the next guy trying to do the same thing. It would be nice to see FancyBox include this functionality, but this solution will work well in the meantime.
Garland Pope
Well, it did help the next gal. Thanks for this, it's just what I was looking for!
Kerri
A: 

Fancybox is able deal with ajax requests directly without the need of extra jQuery scripts.

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

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

    return false;
});

<form action="/login.php" method="POST" id="login_form">
<input type="input" size="20" name="username" />
<input type="submit" value="Login" />
</form>
Ian Bryce
Yes, Ian, that's basically the same solution I proposed. I just used the Form plugin which makes the code shorter and easier to read.
Garland Pope