Question

我的页面上有一个链接，它在Fancybox中调用一个登录表单。由于CMS中“作用域”的范围如何，需要从不同的页面调用。

我的第一个想法是用AJAX调用它，但问题是，页面会重定向到提交的登录页面，这不是我想要的。它应该只是刷新当前页面。

我的第二个想法是，iframe表格。它更加集中，但似乎可以解决问题。提交后，它只刷新iframe中的视图，而不是重定向用户，这是向前迈出的一步

但是，我们仍然需要刷新页面，以便在用户登录时可以更新内容。我已尝试将函数绑定到.on(click)的{{1}}。我还尝试将函数绑定到表单本身的<submit>。我甚至试过内联它。似乎都没有蹲下。

我应该放弃和成为一名Javascript开发者的梦想并重新开始犯罪生活，还是真的有办法去做我想做的事情？

我正在使用Fancybox v1.3和jQuery v1.7.2。

onsubmit

Answer 1

试试这个：

$('a#myLoginTrigger').fancybox({
    type: 'iframe',
    onComplete: function() {
        // Activate the form submit handler here
        $('form#myForm').on('submit', function(){
               alert('Sweet dude, I can run functions in here!');
        })
    }
});

灯箱完全加载后，将立即触发onComplete回调。因此，您可以激活该功能中的表单处理。

Answer 2

这就是我最终做的事情：

$('a#loginTrigger').fancybox({
    type: 'ajax',
    href: '/Login.aspx #loginContainer'
});

$('body').on('submit', '#forLogin', function(e) {
    e.preventDefault();

    var url = $(this).attr('action');

    $.post(url, $(this).serialize(), function(data) {
        location.reload();
    })
});

首先，我使用AJAX在登录页面上加载表单。然后，当用户提交表单时，我取消默认操作，然后将AJAX发布到原始页面，然后重新加载整个页面。

我遇到的一个奇怪的错误是，如果操作URL包含问号，jQuery无法弄清楚如何发布它。首先，我尝试使用/?ID=42（我的登录页面的ID）发布到页面。 CMS可以使用ID和页面标题来导航页面。使用页面标题（login.aspx）工作正常。

但是，从jQuery 1.7.2更新到1.8.0后，此错误已得到修复。：）

在Fancybox中提交表单时运行功能

2 个答案: