0

我目前正在使用带有 Ajax 页面调用的 JQuery U 选项卡。在页面中，我有一个正常工作的自定义滚动条。我还有一个 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。其中有一些错误，例如调用tab()函数 3 次（以及在selector类中不存在的元素上）。当您只需要一个设置了所有选项时。我也改成heightStyle了content。无法创建 jsfiddle 演示，因为您有两个 html 页面，但这是我的代码，对我来说很好：

起始页：

<!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 回答