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?

Any help would be appreciated!

wiseman7687
– wiseman7687

2012-08-30 15:15:09 +00:00
Commented Aug 30, 2012 at 15:15 — wiseman7687
– wiseman7687, Commented Aug 30, 2012 at 15:15

wiseman7687 · Accepted Answer · 2012-08-30 18:17:03Z

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

answered Aug 30, 2012 at 18:17

wiseman7687

1751 gold badge2 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI Tabs and PHP Forms in Tabs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related