0

過去 7 時間、これを機能させようとしてきたので、わずかなフラストレーションのトーンを許してください。

私は、ajax 経由でコンテンツをロードする jquery ui タブの素晴らしいセットを正常に実装しました。

ajax 経由で読み込まれたコンテンツには、フォームがあります。タブがロードされたときに、フォームの最初のフィールド (#title の ID を持つ) が自動的にフォーカスされるようにしたかったのです。スクリプトを外部ドキュメントに入れようとしたときにこれがうまくいかなかったので、コールバックが良い考えだと思いました。

setTimeout( function() { $("#title").focus(); }, 500 );

私はここからこのアイデアを得ました。遅延は、各タブをクリックしたときにフィールドが適切にフォーカスされないという問題が発生したためです。最初はこれで問題の一部が解決したと思っていましたが、さらにテストを重ねた結果、このフォーカス フィールドは最初に読み込まれたタブでのみ機能することがわかりました。

頭をすっきりさせて、素敵な jquery オートコンプリート テキスト フィールドを実装することにしました。

このスクリプトは、外部コンテンツに直接ロードすると機能するように見えましたが、残念なことに、さらにテストしたところ、そうではないことがわかりました。オートコンプリート フィールドは、ページの読み込み時に読み込まれるタブでのみ機能します。

これは、両方のスクリプトが最初に読み込まれたタブでのみ機能するというパターンに気付いたときです。

select、load、および show イベントを使用してみましたが、すべて機能しません。

各タブがクリックされるとアラートが表示されるため、コールバックが機能していることがわかります。

明らかに、私は何か非常に間違ったことをしています。

私のコードをバラバラにして、私が間違っていることを教えてください。

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs({
         load: function(event, ui) { setTimeout( function() { $("#title").focus(); }, 500 );
                $("#role").autocomplete(
                    "/profile/autocomplete",
                    {
                        delay:10,
                        minChars:1,
                        matchSubset:1,
                        matchContains:1,
                        cacheLength:10,
                        onItemSelect:selectItem,
                        onFindValue:findValue,
                        formatItem:formatItem,
                        autoFill:true
                    }
                );

            alert('callback');
                }
            });

        });
    </script>
4

3 に答える 3

2

問題は、一意のIDがないことだと思います。HTMLがこれに似ている場合：

<div class="tabs">
 <ul>
  <li><a href="tab1.htm">Tab1</a></li>
  <li><a href="tab2.htm">Tab2</a></li>
 </ul>
</div>

Tabプラグインは、両方のページ（tab1.htmとtab2.htm）を現在のページにロードします。そして、最初のタブには両方が#titleあり、#rolejQueryは重複の検索を停止します（当然そうです）。したがって、簡単な解決策は、それらをクラスにしてから、show関数で選択したタブをターゲットにして、focusandautocompleteプラグインを呼び出すことです。

$(function(){
 $(".tabs").tabs({
  show: function(e, ui) {
   $(ui.panel)  // target the current tab contents
    .find('.title').focus().end()
    .find('.role').autocomplete(
      "/profile/autocomplete",
      {
       delay:10,
       minChars:1,
       matchSubset:1,
       matchContains:1,
       cacheLength:10,
       onItemSelect:selectItem,
       onFindValue:findValue,
       formatItem:formatItem,
       autoFill:true
      }
     );
  }
 });
});

そして、あなたがコメントで持っていた質問に答えるために、コールバックは基本的にあなたが何をしていたかが完了した後にあなたが起こりたいことです。たとえば、以下の関数はクラスで要素を非表示にしhideme、fadeOut効果が完了すると、コールバック関数はページ（およびDOM）から要素を削除します。

$('.hideme').fadeOut('slow', function(){
 $(this).remove();
})

また、慣れていない場合は、.end()オブジェクトをチェーンすることができます。具体的には、セレクターを最新のオブジェクト（この場合は。）に戻しますui.panel。詳細についてはこちらをご覧ください。また、こちらも.andSelf() ご覧ください。

于 2009-12-26T13:40:18.087 に答える
2

あなたの問題は、質問から完全には明らかではありません。$(document).ready 部分は絶対に必要ではないと思いますが、すぐに実行されると思うので、おそらく問題は発生しません。

私がよくわからないのは、タブをどのように作成しているか、特に「最初のタブの読み込み時にのみ、別のタブを読み込んでもフィールドにフォーカスしない」という意味です。負荷とは正確には何を意味しますか？タブは Ajax 呼び出しを介して読み込まれているのでしょうか、それとも単にページがレンダリングされたときに表示されるのでしょうか? 特定の要素をタグごとにフォーカスしたいですか、それともタグがロードされるたびにフォーカスしたいですか? (あなたのコードは 1 つの特定のフィールドを示していますが、テキストは不明確です)。

わかりました、あなたの説明に基づいて、問題は「タイトル」と「ロール」のインスタンスが複数あるが、ID を使用してそれらに名前を付けて参照していることです。htmlには、次のようなものがあります

<div id="tabs">
    <div class="tab">
        <input id="title">
        <input id="role">
    </div>
    <div class="tab">
        <input id="title">
        <input id="role">
    </div>
    ...
    etc
</div>

問題は、「id」フィールドがすべての要素で一意である必要があることです。そうしないと、そのうちの 1 つしか参照できません (タブごとに一意ではありません)。したがって、$('#title') と指定すると、ID が 'title' の最初の要素のみを参照できます。多くの人がこの問題を、'tab1'、'tab2' などのタブと 'title1'、'title2' などのタブに数字を追加して ID を与えることで解決しています。これは jquery では実際には悪い考えです。代わりに、次のようにクラスと非常に便利な jquery .find() メソッドを使用する必要があります。

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs({
            load: function(event, ui) {
                var tab_content = $(ui.panel);
                setTimeout( function() { tab_content.find(".title").focus(); }, 500 );
                tab_content.find(".role").autocomplete(
                    "/profile/autocomplete",
                    {
                        delay:10,
                        minChars:1,
                        matchSubset:1,
                        matchContains:1,
                        cacheLength:10,
                        onItemSelect:selectItem,
                        onFindValue:findValue,
                        formatItem:formatItem,
                        autoFill:true
                    }
                );
                alert('callback');
            }
        });
    });
</script>

フォーカスのタイムアウトが必要かどうかはまだわかりません。「何かを機能させる」ためだけの試みである場合は、それを削除する必要があります。

于 2009-12-26T06:35:13.420 に答える
-2

100% 確実ではありませんが、処理コードを でラップしている可能性があります$(document).ready(function() { ... });。

于 2009-12-26T03:24:46.563 に答える