Submitting form post with JQuery .post is merging current contents and .load is not sending the data at all
<p>I am using the below function to submit form data to a server. I want to completely replace the current contents of the div "xapps". </p>

<p>I was having slight luck with $.post, but the function would merge the old and new responses. I have tried the following with $.post:</p>

<ol>
<li>$("xapps").replaceWith(resp)</li>
<li>$("xapps").html("")</li>
<li>removing "xapps" from its parent container and then appending a new div with the same id before calling $.post</li>
</ol>

<p>I then switched to $.load to see if I had any luck with that, however, the $.load method does not send the data variable correctly. The receiving application does not receive proper urlencoded values.</p>

<pre><code>    Excerpt From Firebug

    Parameters application/x-www-form-urlencoded
    data    pmcsearch=&amp;pmcgenre=&amp;pmctype=&amp;pmcmfg=&amp;pmcshop=&amp;pmcprice=&amp;pmclocation=&amp;pmcstart=7&amp;pmcsort=&amp;pmccount=&amp;pmciso=
    Source
    data=pmcsearch%3D%26pmcgenre%3D%26pmctype%3D%26pmcmfg%3D%26pmcshop%3D%26pmcprice%3D%26pmclocation%3D%26pmcstart%3D7%26pmcsort%3D%26pmccount%3D%26pmciso%3D
</code></pre>

<p>The variable data contains either the contents of the form "application" or the contents of both forms "application" and "options". The "options" form may not exist, so before using the submitAppContents, I merge the data (according to scenario) and serialize and pass this data to the submitAppContents.</p>

<p>I was reading that $.load only likes objects :(</p>

<p>What should I do to resolve this? Is it possible to reserialize the data passed to load, or is there a possible way of getting $.post to work correctly?</p>

<p>Thanks </p>

<pre><code>    // submit app with contents to application
    function submitAppContents(data)
    {
        // get the handle to the form
        var xapp = document.getElementById("application");
        var url = null;
        // check if the action is defined
        if (!(typeof xapp == "object") || xapp.action == null || !(xapp.action.length)) {
            url = "/"+ tab.toLowerCase()+ "/" + app.toLowerCase() + "?_="+Math.random();
        } else {
            url = xapp.action;
        }

        // check if url is empty
        if (!(url == null) &amp;&amp; (url.length))
        {
                // --&gt; Issue here
                $('#xdapps').load( url, { data: data }, function(resp, stat, xhr) {
                    requesthandler(stat, xhr, 1);
                });
        }

        // perform post with the data
        $.post(url, data, function(resp, stat, xhr) { 
            // --&gt; Issue here
            $("#xapps").html(resp);
            // execute request handler on callback
            requesthandler(stat,xhr,1); 
        }, "html"); 
    }
</code></pre>
