0

私のページには、Fancybox内のログインフォームを呼び出すリンクがあります。CMSでのスコープの「機能」により、これは別のページから呼び出す必要があります。

私の最初のアイデアはAJAXで呼び出すことでしたが、問題は、送信時にページがログインページにリダイレクトされることでした。これは私が望んでいることではありません。現在のページを更新するだけです。

次に、私の2番目のアイデアは、フォームをiframe化することでした。これはもう少し不器用ですが、うまくいくようです。送信時に、ユーザーをリダイレクトするのではなく、iframe内のビューのみを更新します。これは一歩前進です。

ただし、ユーザーがログインしたときにコンテンツが更新されるように、ページを更新する必要があります。関数をのにバインドしてみまし.on(click)た<submit>。onsubmitまた、フォーム自体に関数をバインドしてみました。インライン化してみました。どちらもしゃがむようには見えません。

私はあきらめて、Javascript開発者になるという私の夢をあきらめて、犯罪の生活に立ち返るべきでしょうか、それとも私がやろうとしていることを実際に行うための本当の方法がありますか？

Fancyboxv1.3とjQueryv1.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で元のページに投稿してから、ページ全体をリロードします。

私が遭遇した奇妙なバグは、アクションURLに疑問符が含まれている場合、jQueryが投稿方法を理解できないことでした。まず、/?ID=42（ログインページのID）でページに投稿してみました。CMSは、IDとページタイトルの両方を使用してページをナビゲートできます。ページタイトル（login.aspx）の使用は正常に機能しました。

ただし、このバグはjQuery1.7.2から1.8.0に更新した後に修正されました。:)

于 2012-08-31T15:33:57.987 に答える