1

現在Save、多くの入力要素（〜500入力）を含む大きな/大きなフォームにボタンがあります。これらの入力は AJAX を介して読み込まれ、その大部分は非表示の入力です。

Save私が呼び出すボタンをクリックすると：

// Save button click
$("#save").click(function ()
{
    var button = $(this);

    button.button('loading');

    if($("form").valid())
    {
        ... AJAX Post here ...
    }
    else
    {
        button.button('reset');
    }
}

問題は、Twitter Bootstrap ボタンLoadingによって提供されるアニメーションが起動しないことです。これは、非常に集中的であり、UI スレッドをブロックするためです。への呼び出しを削除してテストしたところ、読み込み中のアニメーションが期待どおりに表示されました。$("form").valid()$("form").valid()

Loadingフォームの処理中にアニメーションを表示したいと思います。今のやり方では、コードが通過したときにアニメーションが点滅するだけ$("form").valid()です... ユーザーはそれをほとんど見ることができません.

jQuery検証機能が機能している間、Loadingボタンにしばらく時間を与えるために私が従うことができる簡単なアプローチはありますか?valid()

4

1 に答える 1

0

私は別の方法で問題を解決することができました...

何百もの入力フィールドでフォーム全体を検証する (時間のかかるプロセス) 代わりに、変更されたフィールドのみを検証します。つまり、ユーザーによって値が変更された入力要素である$("form").validate().element(this)を呼び出します。this

を使用jQueryすると、次のようになります。

// Save button click
$("#save").click(function ()
{
    var button = $(this);

    button.button('loading');

    // Selecting only Questions that had their answers modified...
    var answers = // Your logic here to select the modified input fields

    var valid = true;           

    answers.each(function ()
    {
        $(this).find("textarea:not(:disabled)").each(function ()
        {
            if (!$("form").validate().element(this))
            {
                $(this).focus();

                valid = false;

                return;
            }
        });
    });

    // If any of the answers is invalid return with validation messages...
    if (!valid)
    {
        // Resetting Bootstrap's button back to it's original state
        button.button('reset');

        return;
    }

    ... // Do the AJAX POST here
}
于 2013-06-13T13:25:53.073 に答える