1

プログラムでタブを選択するのに問題があります。リンクをクリックすると起動する Fancybox ダイアログ ウィンドウ内にタブが読み込まれます。基本的に、タブが選択されるたびに特定のアクションを実行し、リンクがクリックされたときに特定のタブを選択したいと考えています。

select次のようなイベントで jQuery UI タブを初期化しています。

$('#tabs').tabs({

    select: function(event, ui) {

        // edit: here is the issue
        var activePanel = '.ui-tabs-panel:visible ';

        // grab value of a form input
        var text = $(activePanel + 'someElement').val();

        // check its length
        if ( text.length > 0 ) {
           // do stuff
        }
    }
})

後で私のJSファイルに次のものがあります：

$(document).on('click', 'a.edit', function() {
    if($category == 'book') {
        // load the tab specific to the 'book' category
        $('#tabs').tabs({ selected: 3 });
    }
})

a.edit「書籍」カテゴリのアイテムのリンクをクリックすると、コンソールで次のエラーがスローされます。

Uncaught TypeError: Cannot read property 'length' of undefined

次に、タブが Fancybox に読み込まれる代わりに、何も起こりません。ブック カテゴリにないアイテムのリンクをクリックしても、このエラーはスローされません。したがって、次の 2 つのことが痛烈に明らかです。

  1. 私はn00bです
  2. 私のselectイベントは明らかにクリックイベントによってオーバーライドされているため、text設定されていません

textJS ファイルの先頭にデフォルトを設定しようとしましたが、うまくいきません。私の質問は次のとおりです。

クリックイベントでタブをプログラムで選択しながら、選択イベントでUIタブを初期化する正しい方法は何ですか?

または、より簡潔に言うと、

なぜ私はそのいまいましいエラーが発生するのですか?

編集: 上記の最初のコード ブロックを修正して、問題に関連することを発見したコードを含めました。詳細な説明については、以下の私の回答を参照してください。

4

1 に答える 1

1

私は問題を発見しました: 私は確かに n00b です。

textタブが表示されているかどうかに基づいて変数を設定していました。私のタブはデフォルトで非表示になっていたため、値を取得するためのパネルが表示されませんでした。

変数を割り当てる前に、親要素が表示されているかどうかを確認する簡単なチェックを追加して、問題を解決しました。

if ( $('#tab_container').is(':visible') ) {

    // now we can safely set this variable...
    var activePanel = '.ui-tabs-panel:visible ';

    // ...and this will always have a value
    var text = $(activePanel + 'someElement').val();
}
于 2012-05-01T07:00:15.357 に答える