jQuery UI 选项卡和选项卡中的 PHP 表单答案

【问题标题】：jQuery UI Tabs and PHP Forms in TabsjQuery UI 选项卡和选项卡中的 PHP 表单
【发布时间】：2012-08-30 14:53:18
【问题描述】：

我在从位于选项卡中的表单提交 $_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>';

我该怎么做呢？

【问题讨论】：

任何帮助将不胜感激！

标签： php jquery ajax jquery-ui

【解决方案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 );
        }
    );
    })

【讨论】：