0

私は現在、Ajax Page Calls で JQuery U Tabs を使用しています。ページ内には、正しく動作するカスタム スクローラーがあります。また、ページがブラウザーに単独で読み込まれているときに機能する ajax 検索テーブルもありますが、JQuery UI タブ内で呼び出されたときは機能しません。

以下は、JQuery UI タブのコードです。

Javascript 呼び出し

  <script>
  $(function() {

    // getter
var heightStyle = $( ".selector" ).tabs( "option", "heightStyle" );

// setter
$( ".selector" ).tabs( "option", "heightStyle", "fill" );
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });
  </script>

HTML:

<div id="tabs">
                  <ul>
                    <li><a href="#tabs-1">View</a></li>
                    <li><a href="page2.html">Add</a></li>
                    <li><a href="page3.html">Modify</a></li>
                  </ul>
                  <div id="tabs-1">
</div>
</div>

以下は、page2.html 内のコードです。

<div class="tables">
    <div id="content_3" class="content">
    <div class="search">
        <div class="searchtitle">Search</div>
        <label for="search"><input type="text" id="search"/></label>        
    </div>


    <table id="tblData" class="target">
        <tbody>
            <tr>
                <th width="110px">Course</th>
                <th width="92px">Group</th>
                <th width="204px">Period</th>
                <th width="81px">Room</th>
                <th width="117px">Actions</th>
            </tr>
            <tr>
                <td class="odd">Unit 1</td>
                <td class="odd">Group 2</td>
                <td class="odd">00-00-00 - 00-00-00 </td>
                <td class="odd">Room 1</td>
                <td class="odd"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
            </tr>
            <tr>
                <td class="even">Unit#</td>
                <td class="even">###</td>
                <td class="even">00-00-00 - 00-00-00 </td>
                <td class="even">Room 2</td>
                <td class="even"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
            </tr>
            <tr>
                <td class="odd">Unit#</td>
                <td class="odd">###</td>
                <td class="odd">00-00-00 - 00-00-00 </td>
                <td class="odd">###</td>
                <td class="odd"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
            </tr>


        </tbody>
    </table>
</div>

</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#search').keyup(function()
        {
            searchTable($(this).val());
        });
    });
    function searchTable(inputVal)
    {
        var table = $('#tblData');
        table.find('tr').each(function(index, row)
        {
            var allCells = $(row).find('td');
            if(allCells.length > 0)
            {
                var found = false;
                allCells.each(function(index, td)
                {
                    var regExp = new RegExp(inputVal, 'i');
                    if(regExp.test($(td).text()))
                    {
                        found = true;
                        return false;
                    }
                });
                if(found == true)$(row).show();else $(row).hide();
            }
        });
    }
</script>

page2.html の Javascript 内の$(document).ready(function()が起動していないのではないかと疑っています。

この問題を解決するための助けはありますか?

4

1 に答える 1

0

コードからテストを作成したため、検索機能の読み込みに問題はありませんでした。ただし、開始ページの完全な html を表示していないため、他のページを取得する前に jQuery をロードしていないことが問題である可能性があります。この中には、関数を 3 回呼び出す (およびクラスtab()の存在しない要素に対して)などのいくつかのエラーがありました。selectorすべてのオプションが設定された 1 つだけが必要な場合。にも変更heightStyleしましたcontent。2 つの HTML ページがあるため、jsfiddle デモを作成できませんでしたが、ここに私のコードを示します。

開始ページ:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
        <script>
            $(function()
            {
                $( "#tabs" ).tabs(
                {
                    heightStyle: "content",
                    beforeLoad: function( event, ui )
                    {
                        ui.jqXHR.error(function()
                        {
                            ui.panel.html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo." );
                        });
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">View</a></li>
                <li><a href="page2.html">Add</a></li>
                <li><a href="page3.html">Modify</a></li>
            </ul>
            <div id="tabs-1">View Page</div>
        </div>
    </body>
</html>

page2.html:

<div class="tables">
    <div id="content_3" class="content">
        <div class="search">
            <div class="searchtitle">Search</div>
            <label for="search"><input type="text" id="search"/></label>        
        </div>
        <table id="tblData" class="target">
            <tbody>
                <tr>
                    <th width="110px">Course</th>
                    <th width="92px">Group</th>
                    <th width="204px">Period</th>
                    <th width="81px">Room</th>
                    <th width="117px">Actions</th>
                </tr>
                <tr>
                    <td class="odd">Unit 1</td>
                    <td class="odd">Group 2</td>
                    <td class="odd">00-00-00 - 00-00-00 </td>
                    <td class="odd">Room 1</td>
                    <td class="odd">
                        <img src="../../Images/actions-delete-icon-normal.png"/>
                        <img src="../../Images/actions-edit-icon-normal.png"/>
                    </td>
                </tr>
                <tr>
                    <td class="even">Unit#</td>
                    <td class="even">###</td>
                    <td class="even">00-00-00 - 00-00-00 </td>
                    <td class="even">Room 2</td>
                    <td class="even">
                        <img src="../../Images/actions-delete-icon-normal.png"/>
                        <img src="../../Images/actions-edit-icon-normal.png"/>
                    </td>
                </tr>
                <tr>
                    <td class="odd">Unit#</td>
                    <td class="odd">###</td>
                    <td class="odd">00-00-00 - 00-00-00 </td>
                    <td class="odd">###</td>
                    <td class="odd">
                        <img src="../../Images/actions-delete-icon-normal.png"/>
                        <img src="../../Images/actions-edit-icon-normal.png"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#search').keyup(function()
        {
            searchTable($(this).val());
        });
    });

    function searchTable(inputVal)
    {
        var table = $('#tblData');
        table.find('tr').each(function(index, row)
        {
            var allCells = $(row).find('td');
            if(allCells.length > 0)
            {
                var found = false;
                allCells.each(function(index, td)
                {
                    var regExp = new RegExp(inputVal, 'i');
                    if(regExp.test($(td).text()))
                    {
                        found = true;
                        return false;
                    }
                });

                if(found == true)
                    $(row).show();
                else
                    $(row).hide();
            }
        });
    }
</script>
于 2013-04-23T12:40:52.057 に答える