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

时间:2012-08-30 14:53:18

标签: php jquery ajax jquery-ui

我遇到问题从位于标签页的表单中提交$ _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语句来加载正确的include,具体取决于所选的选项卡。

    $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>';

我该怎么做呢?

1 个答案:

答案 0 :(得分: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 );
        }
    );
    })