0

次の点を考慮してください。

    var ids = [];
    function loadFeeds(id, terms) {
        $("#loadingdiv").removeClass("ui-helper-hidden");
        $('#' + id).empty(); 
      try {
            $.getJSON('https://mysite.com/search.json?q=' + terms', function(data) {
                $.each(data.results, function(i, data) { 
                $('#' + id).append('<tr><td> + data.user + '</td><td>' + data.created + '</td><td>' + data.text + '</td></tr>');                 
                });
            });
        }
        catch (e) {
            alert('Error creating feed - ' + e.Message);
        }
    }
    function loopids()
     {
       for(i=0;i&lt;ids.length;i++)
       {
          loadFeeds(ids[i][0], ids[i][1]);       
       }
     }
    function createTabsList()
     {
       $("#tabs").append('<ul id="tabsul"></ul>');
       for(i=0;i&lt;ids.length;i++)
       {
         $("#tabsul").append('<li><a href="#tabs-' + ids[i][0] +'">Test</a></li>');
       }
     }
... PAGE CODE ...
<div class="content clearfix">
          <div id="tabs" class="ui-tabs">
... REPEATER CODE ...
<div>
                      <xsl:attribute name="id">
                        tabs-<value-of select="@id"/>
                      </xsl:attribute>
                        <table class="display">
                          <tr><th>Search Results</th></tr>
                        </table>
                        <table class="display">
                          <xsl:attribute name="id">
                            <value-of select="@id"/>
                          </xsl:attribute>
                              <thead>
                                <tr>
                                    <th>
                                        User
                                    </th>
                                    <th>
                                        Date
                                    </th>
                                    <th>
                                        Message
                                    </th>
                                </tr>
                            </thead>
                          <tbody></tbody>
                        </table>
                        <script type="text/javascript">
                            ids.push(['<xsl:value-of select="@dataid"></value-of>', '<xsl:value-of select="@txtSearchParams" />']);
                        </script>
                      </div>
... END REPEATER CODE ...
            </div>
        </div>

テーブルを正しくロードできます-IDを確認してください。すべてが正しくありますが、どこでどのように $("tabs").tabs() を呼び出しているように見えても、コンテンツが正しくレンダリングされません。「タブ」をレンダリングすると、他のテーブルが消えることはなく、タブをクリックすると「キャッチされていない例外」がスローされます。

このシナリオで動的タブを機能させるにはどうすればよいですか。

4

1 に答える 1

0

そのため、これをうまく機能させることができなかったので、動的に作成されたボタンを使用して回避策を作成し、jQuery UI から手動で CSS クラスを追加しました。

function setTabs(){
        try
        {
         $("div.tabs > div:gt(0)").hide();
          for(var i=0;i&lt;ids.length;i++)
          {
            createButton(i, ids[i][1]);       
          }
          $(".tb").click(function(){
            $(".tb").removeClass('ui-state-active');
            //alert($(this).attr('id'));
            $(this).addClass('ui-state-active');
          });
          $(".Title").each(function(){
                var txt = decodeURIComponent($(this).text());
                $(this).text(txt);
            });
          loopids();
          $(".tb").first().addClass('ui-state-active');
          $("#loadingdiv").addClass('ui-helper-hidden');
        }
        catch(e)
        {
          alert("Error in setTabs - " + e.Message);
        }
    }

これが重要な機能でした。他の誰かがこれにぶつかった場合は、いつでももっと説明できます。

于 2012-08-27T18:46:45.623 に答える