jQuery UI Tabs and PHP Forms in Tabs

Question

I am having an issue submitting $_POST Data from a form located in a tab and updating the tab with the expected $_POST Data.

I am using jQuery-UI Tabs to load different portions of a script through Ajax.

Here are my Navigation Tabs:

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

Here is my jQuery Code:

        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();

    });

Inside the AjaxFunctions file I have a switch statement to load the correct include depending on the tab selected.

    $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");

Inside this file I have a form that looks similar to this. When the form is submitted, it should reload the tab with the POST data loaded so that the next function can be executed. However no POST data is being loaded at all.

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

How do I go about doing this?

Answer 1

I have figured it out. The best way to do it is to set an id to each of the forms and have it reload the div with current results.

    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 );
        }
    );
    })