Question

I have a problem. I have form inside a fancybox. This form have a file field.

<div style="display:none"><div id="avatar_form">
      <%= form_for @user do |f| %>
      <%= f.file_field :avatar, :value => @user.profile.avatar %><br/>
      <%= f.submit "Change Avatar"  %><br/>
      <% end %>
</div></div>

But after clicking a button for choosing file fancy box is closing. But i dont want it to close.

This calls a fancy box

$("a#avatar").fancybox();

and here is ajax

$("#edit_user").bind("submit", function() {
    $.fancybox.showActivity();
    $.ajax({
        type        : "POST",
        cache   : false,
        url     : "anyurl",
        data        : $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });
    return false;
});

What i am doing wrong? i dont know what to do. Thanks in advance!

Answer 1

Hmmm. I would first try stopping the file input from propagating any events up the DOM tree, which might be unwantedly triggering a close event:

    success: function(data) {
        $.fancybox(data);
        $("#avatar_form > form > input[type='file']").on("click change", function (e) {
            e.stopPropagation();
        });
    }