Load Ajax content on same php page

Question

I'm currently having trouble trying to send data to a same php page. My problem is as follow: I'm submitting a form by Ajax, from a jQueryUI tab, and I'm trying to send the data back to the same php page that was loaded in the tab.

Here is my code for the Ajax part, which is working as I can see the data coming back in the success part :

$('#query').submit(function(event){
    event.preventDefault();
    var formData = new FormData($(this)[0]);            

    var request = $.ajax({
        type: 'POST',
        url: 'tab_rechercher.php',
        data: formData,
        contentType: false,
        processData: false,
        success: function(data){
            alert(data);
        },
        error: function(msg){
            alert(msg);
        }
    });             
});

Now that gives me an array, with the form data, plus the entire html page, which follows:

<form id="query" method="post" action="tab_rechercher.php">
<fieldset>
    <legend>Recherche d&apos;items dans une soumission ou bon de commande</legend>
    <table class="table_spacing">
        <tr>
            <td>Description de l&apos;item: </td>
            <td><input type="text" name="item_description"></td>                
        </tr>
        <tr>
            <td colspan="2" style="text-align:right;"><input id="rechercher" type="submit" value="Rechercher"></td>
        </tr>
    </table>
</fieldset>

The problem is that in my php page, the $_POST stays empty

if(empty($_POST) === false){
print_r($_POST);}

and the print never happens.

How can I get the data to be transferred back into the php page? Thanks

Answer 1

It seems to me that you never actually post the form. You do post it via AJAX but it is in another 'thread', not the one you are currently viewing. To post it like you want, you need another function which will call just $('#query').submit();