Another JQuery Component within JQuery UI Tabs with Ajax Page Calls

Question

I am currently usng JQuery U Tabs with Ajax Page Calls. Within the Pages I have a custom scroller which is working correctly. I also have an ajax search table, which is working when the page is being loaded on its own in the browser but not when it's called within the JQuery UI tabs.

The following is the code for the JQuery UI Tabs.

Javascript Call

  <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>

The following is the code within 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>

I am suspecting that it's the $(document).ready(function() from within the Javascript in page2.html which is not firing.

Any help on solving this issue?

Answer 1

I didn't have any problems loading the search functionality as I created a test out of your code. However, since you aren't showing the complete html for the starting page your problem could be that you haven't loaded jQuery before trying to get any other pages. Among this there were a few errors like calling the tab() function 3 times (and on non existent elements with the selector class). when you only needed one with all options set. I also changed heightStyle to content. Couldn't create a jsfiddle demo as you have two html pages but here is my code that works fine for me:

Starting page:

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