Ajax頁面調用的JQuery UI選項卡中的另一個JQuery組件

我目前使用Ajax頁面調用來使用JQuery U選項卡。在頁面內，我有一個自定義滾動工作正常。我也有一個ajax搜索表，當頁面在瀏覽器中自行加載時工作，但不在JQuery UI選項卡中調用。Ajax頁面調用的JQuery UI選項卡中的另一個JQuery組件

以下是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>

我懷疑它的的$（document） .ready（function（） from page2.html中的Javascript不是射擊。

解決此問題的任何幫助？

來源

2013-04-23 Steven James McLean

相關答案 - http://stackoverflow.com/questions/16068506/ajax-tabs-setup-not-working-on-localhost-easytabs/16112785#16112785 – apaul 2013-04-23 01:30:58

嗨apaul34208 - 這是不一樣的問題，即使使用不同的jQuery組件。爲了完成上述工作，需要從我的結尾改變什麼？ – 2013-04-23 07:28:49

加載搜索功能時我沒有任何問題，因爲我使用代碼創建了測試。但是，由於您沒有顯示起始頁面的完整HTML，因此您可能會遇到以下問題：在嘗試獲取任何其他頁面之前尚未加載jQuery。其中有一些錯誤，如調用tab()函數3次（以及selector類中不存在的元素）。當你只需要一個與所有選項設置。我也將heightStyle更改爲content。因爲你有兩個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-23 12:40:52 SimonDever

Ajax頁面調用的JQuery UI選項卡中的另一個JQuery組件

回答

相關問題