0

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

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

然后我的第二个想法是将表单放入 iframe 中。它有点笨拙，但似乎可以解决问题。提交时，它只刷新 iframe 中的视图，而不是重定向用户，这是向前迈出的一步

但是，我们仍然需要刷新页面，以便在用户登录后更新内容。我尝试将函数绑定.on(click)到<submit>. 我还尝试将函数绑定到onsubmit表单本身。我什至尝试内联它。似乎都不会蹲下。

我是否应该放弃成为 Javascript 开发人员的梦想并重新过上犯罪的生活，或者实际上是否有真正的方法来做我想做的事情？

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

$('a#myLoginTrigger').fancybox({
    type: 'iframe'      
});


$('form#myForm').on('submit', function(){
    alert('Sweet dude, I can run functions in here!');

    // I assume this will refresh the entire page, not just the iframe
    location.reload();

    // This has no effect whatsoever
    return false; 
});
4

2 回答 2

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 回调。因此，您可以在该函数中激活表单处理。

于 2012-08-24T13:23:12.337 回答
0

这就是我最终做的事情：

$('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-post 到原始页面，然后重新加载整个页面。

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

但是，从 jQuery 1.7.2 更新到 1.8.0 后，此错误已修复。:)

于 2012-08-31T15:33:57.987 回答