Ajax the create and edit post form into lightbox and get results

Question

So I have a WordPress site I built that has custom post types and references to those post types inside others.

Example:

  • Custom Post Type 1
  • Custom Post Type 2 – References Type 1 on two fields
  • Custom Post Type 3 – References Type 2 on multiple fields

I have the front end all displaying and working fine. The problem is I need an easier way for my client to be able to edit the references. I built links for creating new posts or editing the selected ones in new tabs, but my client wants it all displayed on one screen to help him manage the numerous fields on the post type. My thought is to build an ajax page to return the form in a lightbox when the link is clicked. Then once submitted from the lightbox, get the id for new posts, and change the currently selected item to the new one (if creating a new post to reference).

I normally build in Drupal and this would be a no brainer of drupal_get_form() and then do what I want with it, but I cannot find any documentation on how to do this in WordPress. (Yes I know this is not WordPress’ forte, but I need it done in WordPress.) I looked into just rebuilding the post-new.php file but I get an update database screen that says there is no updates to my database and that is a very hackie way of doing things, so I would prefer not to have to do it if possible.

I found this post was close to what I need: AJAX post into pop-up div

The problem with it, is that it is not creating a new post when the ajax form is submitted. I am guessing it is because I need to run the submission through WordPress’ ajax call, but even that seems to be failing and returning a 0 response.

JavaScript: The #new-post form is the one loaded in the lightbox:

$('#new-post').submit(function (e) {
    e.preventDefault();
    var data = $(this).serializeArray();
    data['action'] = 'post_form_ajax'
    jQuery.post(ajaxurl, data, function(response) {
        alert('Got this from the server: ' + response);
    });
});

WordPress Plugin:

add_action( 'wp_ajax_post_form_ajax', 'MYPLUGIN_post_form_ajax' );

function MYPLUGIN_post_form_ajax () {
    echo 'work';
    wp_die();
}

Any help is greatly appreciated thanks.

Update

Got the form to submit AJAX. I needed the data in a different form (as an object) and I was missing a semicolon after the data[‘action’] line.

To reformat the data I used this function (Haseeb Asif https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery)

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Then the adjusted submit function:

$('#new-post').submit(function (e) {
    e.preventDefault();
    var data = $(this).serializeObject();
    data['action'] = 'post_form_ajax';
    jQuery.post(ajaxurl, data, function(response) {
        alert('Got this from the server: ' + response);
    });
});

The final step is to figure out how to save or update the custom post data dynamically from my ajax function MYPLUGIN_post_form_ajax(). Thanks again.

0
, , , , Coyote6 2 years 2020-01-09T08:40:10-05:00 0 Answers 89 views 0

Leave an answer

Browse
Browse