Display Post with AJAX, after submitting post with AJAX

Question

Submitting new Posts with a Front End Form, using:

• http://malsup.github.com/jquery.form.js
• Default WP jQuery ( wp_enqueue_script("jquery"); )

• below code to submit form (new post)

  jQuery(document).ready(function() { jQuery("[id^=cred_form_1614]").ajaxForm(function() { alert("Thank you for your comment!"); }); });

This submits and saves my posts to the WordPress DB fine and correctly.

Is there a fine method to now get the (freshly inserted) Post form the DB and display it instead of keeping display my form?

I can achieve it with reloading the entire page, but I would like to display the new post with AJAX

I understand I shall change the "success" action which currently is "alert" to something else, like "display post"?

I am not sure how I would insert (I suppose I need this) WP Query in a jQuery code? I can do that with PHP, but not with jQuery/AJAX

Does anybody have experience on this?

Basically, it has to "update" the currently viewed page (where my form sits) and display the post(s) instead.

As requested, this is my Form (rendered) HTML to create the post(s):

<form enctype="multipart/form-data" id="cred_form_1614_1" class="cred-form cred-keep-original" action="/site/cred-ajax/?_tt=1436915840" method="post">

<label id="wpt-form-message" data-message-single="The post was not saved because of the following problem:<br />%PROBLEMS_UL_LIST" data-message-plural="The post was not saved because of the following %NN problems:<br />%PROBLEMS_UL_LIST" style="display:none;" class="wpt-top-form-error wpt-form-error">test</label>

<div class="cred-field cred-field-post_title">
    <label class="cred-label">
Post Name
</label>
<div class="js-wpt-field-items form-group js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="textfield-post_title">
<input id="cred_form_1614_1-textfield-1-1436915839" name="post_title" value="" data-wpt-validate="{&quot;required&quot;:{&quot;args&quot;:{&quot;1&quot;:true},&quot;message&quot;:&quot;This field is required&quot;}}" data-wpt-field-title="Post Name" class="wpt-form-textfield form-textfield form-control js-wpt-validate" data-wpt-type="textfield" data-wpt-id="cred_form_1614_1_cred_form_1614_1-textfield-1-1436915839" data-wpt-name="post_title" type="text">
</div>
</div>

<div class="cred-field cred-field-post_content">
    <label class="cred-label">
Body Content
</label>
<div class="js-wpt-field-items form-group js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="wysiwyg-post_content"><div id="wp-cred_form_1614_1_post_content-wrap" class="wp-core-ui wp-editor-wrap html-active"><div id="wp-cred_form_1614_1_post_content-editor-tools" class="wp-editor-tools hide-if-no-js"><div class="wp-editor-tabs"><button type="button" id="cred_form_1614_1_post_content-tmce" class="wp-switch-editor switch-tmce" onclick="switchEditors.switchto(this);">Visual</button>
<button type="button" id="cred_form_1614_1_post_content-html" class="wp-switch-editor switch-html" onclick="switchEditors.switchto(this);">Text</button>
</div>
</div>
<div id="wp-cred_form_1614_1_post_content-editor-container" class="wp-editor-container"><div class="quicktags-toolbar" id="qt_cred_form_1614_1_post_content_toolbar"><input id="qt_cred_form_1614_1_post_content_strong" class="ed_button button button-small" value="b" type="button"><input id="qt_cred_form_1614_1_post_content_em" class="ed_button button button-small" value="i" type="button"><input id="qt_cred_form_1614_1_post_content_link" class="ed_button button button-small" value="link" type="button"><input id="qt_cred_form_1614_1_post_content_block" class="ed_button button button-small" value="b-quote" type="button"><input id="qt_cred_form_1614_1_post_content_del" class="ed_button button button-small" value="del" type="button"><input id="qt_cred_form_1614_1_post_content_ins" class="ed_button button button-small" value="ins" type="button"><input id="qt_cred_form_1614_1_post_content_img" class="ed_button button button-small" value="img" type="button"><input id="qt_cred_form_1614_1_post_content_ul" class="ed_button button button-small" value="ul" type="button"><input id="qt_cred_form_1614_1_post_content_ol" class="ed_button button button-small" value="ol" type="button"><input id="qt_cred_form_1614_1_post_content_li" class="ed_button button button-small" value="li" type="button"><input id="qt_cred_form_1614_1_post_content_code" class="ed_button button button-small" value="code" type="button"><input id="qt_cred_form_1614_1_post_content_more" class="ed_button button button-small" value="more" type="button"><input id="qt_cred_form_1614_1_post_content_close" class="ed_button button button-small" title="Close all open tags" value="close tags" type="button"></div>    <textarea class="wpt-wysiwyg wp-editor-area" rows="10" autocomplete="off" cols="40" name="post_content" id="cred_form_1614_1_post_content">    </textarea></div>
</div>



</div>
</div>

<div class="cred-field cred-field-post_excerpt">
    <label class="cred-label">
Post Excerpt
</label>
    <div class="js-wpt-field-items form-group js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="textarea-post_excerpt">
<textarea id="cred_form_1614_1-textarea-1-1436915840" name="post_excerpt" rows="5" cols="1" class="wpt-form-textarea form-textarea form-control" data-wpt-type="textarea" data-wpt-id="cred_form_1614_1_cred_form_1614_1-textarea-1-1436915840" data-wpt-name="post_excerpt"></textarea>

</div>
</div>

<div class="cred-field cred-field-_featured_image">
    <label class="cred-label">
Featured Image
</label>
    <div class="js-wpt-field-items form-group js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="credimage-_featured_image"><input style="display:none" data-action="undo" class="js-wpt-credfile-undo wpt-credfile-undo btn btn-default btn-sm" value="Restore original" type="button"><input style="display:none" data-action="delete" class="js-wpt-credfile-delete wpt-credfile-delete btn btn-default btn-sm" value="Clear" type="button"><input id="_featured_image_hidden" name="_featured_image" value="" class="js-wpv-credfile-hidden wpt-form-hidden form-hidden" data-wpt-type="file" disabled="disabled" data-wpt-id="cred_form_1614_1__featured_image_hidden" data-wpt-name="_featured_image" type="hidden">

<input id="_featured_image_file" name="_featured_image" class="js-wpt-credfile-upload-file wpt-credfile-upload-file wpt-form-file form-file js-wpt-validate" alt="" data-wpt-validate="{&quot;extension&quot;:{&quot;args&quot;:[&quot;bmp|gif|jpeg|jpg|png|svg|webp&quot;],&quot;message&quot;:&quot;You can add only images.&quot;}}" data-wpt-field-title="Featured Image" data-wpt-type="file" data-wpt-id="cred_form_1614_1__featured_image_file" data-wpt-name="_featured_image" type="file">
<span class="js-wpt-credfile-preview wpt-credfile-preview"></span></div>
</div>

<div class="cred-group cred-group-taxonomies">
    <div class="cred-taxonomy cred-taxonomy-category">
        <div class="cred-header"><h3>Categories</h3></div>
        <div class="js-wpt-field-items form-group js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="taxonomyhierarchical-category"><ul class="wpt-form-set wpt-form-set-checkboxes wpt-form-set-checkboxes-category" data-level="0"><li class="tax-uncategorized tax-category-1">
<input id="cred_form_1614_1-checkbox-1-1436915840" name="category[]" data-wpt-type="checkbox" data-wpt-id="cred_form_1614_1_cred_form_1614_1-checkbox-1-1436915840" data-wpt-name="category[]" value="1" data-parent="-1" data-value="Uncategorized" class="wpt-form-checkbox form-checkbox" type="checkbox"><label class="wpt-form-label wpt-form-checkbox-label control-label" for="cred_form_1614_1-checkbox-1-1436915840">Uncategorized</label>
</li></ul>

<div style="display:none" class="form-group wpt-hierarchical-taxonomy-add-new js-wpt-hierarchical-taxonomy-add-new-category" data-taxonomy="category">

<input id="cred_form_1614_1-textfield-2-1436915840" name="new_tax_text_category" value="" data-taxonomy="category" data-taxtype="hierarchical" class="inline wpt-new-taxonomy-title js-wpt-new-taxonomy-title wpt-form-textfield form-textfield form-control" data-wpt-type="textfield" data-wpt-id="cred_form_1614_1_cred_form_1614_1-textfield-2-1436915840" data-wpt-name="new_tax_text_category" type="text">

<select id="cred_form_1614_1-select-1-1436915840" data-parent-text="-- Parent --" data-taxonomy="category" class="js-taxonomy-parent wpt-taxonomy-parent wpt-form-select form-select form-control" data-wpt-type="select" name="new_tax_select_category">
<option value="-1" class="wpt-form-option form-option form-control" data-wpt-type="option" data-wpt-id="cred_form_1614_1_cred_form_1614_1-select-1-1436915840" data-wpt-name="new_tax_select_category">-- Parent --    </option>
<option value="1">Uncategorized</option></select>
<input id="cred_form_1614_1-button-2-1436915840" name="new_tax_button_category" value="Add" data-taxonomy="category" data-build_what="checkboxes" class="btn btn-default wpt-hierarchical-taxonomy-add-new js-wpt-hierarchical-taxonomy-add-new wpt-form-button form-button" type="button"></div>
</div>
        <div class="cred-taxonomy-auxilliary cred-taxonomy-auxilliary-category_add_new">
            <input id="cred_form_1614_1-button-1-1436915840" name="btn_category" value="Add New" style="" data-taxonomy="category" data-build_what="checkboxes" data-after-selector="js-wpt-hierarchical-taxonomy-add-new-category" data-open="Add New" data-close="Cancel" class="btn btn-default wpt-hierarchical-taxonomy-add-new-show-hide js-wpt-hierarchical-taxonomy-add-new-show-hide wpt-form-button form-button" type="button">
        </div>
    </div>
    <div class="cred-taxonomy cred-taxonomy-post_tag">
        <div class="cred-header"><h3>Tags</h3></div>
        <div class="js-wpt-field-items form-group js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="taxonomy-post_tag"><input id="cred_form_1614_1-hidden-1-1436915840" name="post_tag" value="" class="wpt-form-hidden form-hidden" data-wpt-id="cred_form_1614_1_cred_form_1614_1-hidden-1-1436915840" data-wpt-name="post_tag" type="hidden"><div class="form-group">
<input autocomplete="off" id="cred_form_1614_1-textfield-3-1436915840" name="tmp_post_tag" value="" data-taxonomy="post_tag" data-taxtype="flat" class="inline wpt-new-taxonomy-title js-wpt-new-taxonomy-title wpt-form-textfield form-textfield form-control" data-wpt-type="textfield" data-wpt-id="cred_form_1614_1_cred_form_1614_1-textfield-3-1436915840" data-wpt-name="tmp_post_tag" type="text">
<input id="cred_form_1614_1-button-3-1436915840" name="new_tax_button_post_tag" value="Add" class="btn btn-default wpt-taxonomy-add-new js-wpt-taxonomy-add-new wpt-form-button form-button" data-taxonomy="post_tag" type="button"></div>
<div class="form-group"><div class="tagchecklist tagchecklist-post_tag">    </div>
</div>
</div>
        <div class="cred-taxonomy-auxilliary cred-taxonomy-auxilliary-post_tag_popular">
            <input id="cred_form_1614_1-button-4-1436915840" name="sh_post_tag" value="Show Popular" class="btn btn-default popular wpt-taxonomy-popular-show-hide js-wpt-taxonomy-popular-show-hide wpt-form-button form-button" data-taxonomy="post_tag" data-show-popular-text="Show Popular" data-hide-popular-text="Hide Popular" data-after-selector="js-show-popular-after" style="display:none;" type="button">
        </div>
    </div>

</div>

<input id="cred_form_1614_1-submit-1-1436915840" name="form_submit_1" value="Submit" class=" btn btn-primary wpt-form-submit form-submit" type="submit">

<input id="cred_form_1614_1-hidden-2-1436915840" name="_cred_cred_wpnonce" value="b49e76a9ab" class="wpt-form-hidden form-hidden" data-wpt-id="cred_form_1614_1_cred_form_1614_1-hidden-2-1436915840" data-wpt-name="_cred_cred_wpnonce" type="hidden"><input id="cred_form_1614_1-hidden-3-1436915840" name="_cred_cred_prefix_post_id" value="1620" class="wpt-form-hidden form-hidden" data-wpt-id="cred_form_1614_1_cred_form_1614_1-hidden-3-1436915840" data-wpt-name="_cred_cred_prefix_post_id" type="hidden"><input id="cred_form_1614_1-hidden-4-1436915840" name="_cred_cred_prefix_cred_container_id" value="1615" class="wpt-form-hidden form-hidden" data-wpt-id="cred_form_1614_1_cred_form_1614_1-hidden-4-1436915840" data-wpt-name="_cred_cred_prefix_cred_container_id" type="hidden"><input id="cred_form_1614_1-hidden-5-1436915840" name="_cred_cred_prefix_form_id" value="1614" class="wpt-form-hidden form-hidden" data-wpt-id="cred_form_1614_1_cred_form_1614_1-hidden-5-1436915840" data-wpt-name="_cred_cred_prefix_form_id" type="hidden"><input id="cred_form_1614_1-hidden-6-1436915840" name="_cred_cred_prefix_form_count" value="1" class="wpt-form-hidden form-hidden" data-wpt-id="cred_form_1614_1_cred_form_1614_1-hidden-6-1436915840" data-wpt-name="_cred_cred_prefix_form_count" type="hidden"></form>

UPDATE::

I achieved to display the (single) new post after submitting it with this:

jQuery(document).ready(function() { 
jQuery("[id^=cred_form_1614]").ajaxForm(function(data) {
    if (data.length > 0) {
        jQuery('.page').empty();
      jQuery('.page').html(data);
    }
});
});

Answer 1

I'm not sure what element you want to update with the response because you didn't include any HTML in your question. The code below will append the data from the server side into an element of your choosing.

$(function(){
    jQuery("[id^=cred_form_1614]").ajaxForm(function(data) {
        if (data.length > 0) {
            $('.someElement').append(data);
        }
    });
});