jQuery UI選項卡和PHP表單中的標籤

Question

我有一個問題，提交$ _POST數據從位於選項卡中的表單並更新與預期的$ _POST數據選項卡。

我正在使用jQuery-UI標籤通過Ajax加載腳本的不同部分。

這裏是我的導航標籤：

<div id="tabs" style="width:970px;"> 
    <ul> 
     <li><a href="/ajaxFunctions?mgmtDbrdPge=1" title="visibleTab-1">Cl Total</a></li> 
     <li><a href="/ajaxFunctions?mgmtDbrdPge=2" title="visibleTab-2">Rental Leads Export</a></li> 
     <li><a href="/ajaxFunctions?mgmtDbrdPge=3" title="visibleTab-3">Sphere Count Statistics</a></li> 
     <li><a href="/ajaxFunctions?mgmtDbrdPge=4" title="visibleTab-4">E-Campaign Statistics</a></li> 
    </ul> 


</div> 

這裏是我的jQuery代碼：

 jQuery(document).ready(function() { 

     jQuery("#tabs").tabs({ 
      spinner:'<b>Retrieving Data...</b>', 

      ajaxOptions: { 


       data: { $_POST: getVariable 

       }, 
       error: function(xhr, status, index, anchor) { 
        $(anchor.hash).html(
        "error occured while ajax loading."); 
       }, 
       success: function(xhr, status) { 
        //alert("ajax success. "); //your code 


       } 

      } 

     }); 
     jQuery('#tabs ul li a').click(function() {location.hash = jQuery(this).attr('href');}); 



     primeDateInputElements(); 

    }); 

裏面的AjaxFunctions文件我有一個switch語句正確的包含取決於所選擇的選項卡上加載。

$p = $_GET['mgmtDbrdPge']; 

switch($p) { 

    case "1": default: 
    $page = 1; 
    break;   

    case "2": 
    $page = 2; 
    break; 

    case "3": 
    $page = 3; 
    break; 

    case "4": 
    $page = 4; 
    break; 
} 
    include("path/to/file/fileToInclude.include.php"); 

在這個文件裏我有一個看起來類似於這個的窗體。提交表單時，它應該重新加載帶有加載的POST數據的選項卡，以便可以執行下一個功能。但是根本沒有加載POST數據。

echo '<form name="CityExport" action="/managementDashboard#visibleTab-2" enctype="multipart/form-data" method="post">' . chr(10); 
    echo '<input type="hidden" name="mode" value="submitNorthShoreExport" />' . chr(10); 
    echo '<input type="submit" value="North Shore Export" id="submitButton">' . chr(10); 
    echo '</form>'; 

我該如何去做這件事？

Answer 1

我已經想通了。最好的方法是爲每個表單設置一個id，並用當前結果重新加載div。

jQuery("form#ajaxForm").submit(function(event) { 

     /* stop form from submitting normally */ 
     event.preventDefault(); 

     /* Send the data using post and put the results in a div */ 
     jQuery.post('/postpage', jQuery("#ajaxForm").serialize(), 
     function(data) { 
      var content = jQuery(data).find('#content'); 
      jQuery("#visibleTab-2").empty().append(data); 
     } 
    ); 
    })