John Davidson

Message:

After a successful Ajax insert of an entry, I would like to see what the ID and url of that same entry is and display it in a modal window without refreshing the page

Any way to get this data from success: function (response) {}? This is the code I have to make a new entry with ajax which works perfect:

  <script>

        

        $("#enquiry_email_form").on("submit", function (event) {

            event.preventDefault();

 

            var form= $(this);

            var ajaxurl = form.data("url");

            var detail_info = {

                post_title: form.find("#post_title").val(),

                post_description: form.find("#post_description").val()

            }

 

            if(detail_info.post_title === "" || detail_info.post_description === "") {

                alert("Fields cannot be blank");

                return;

            }

 

            $.ajax({

 

                url: ajaxurl,

                type: 'POST',

                data: {

                    post_details : detail_info,

                    action: 'save_post_details_form' // this is going to be used inside wordpress functions.php// *esto se utilizará dentro de las functions.php*

                },

                error: function(error) {

                    alert("Insert Failed" + error);

                },

      success: function(response) {

                modal.style.display = "block";  * abre la ventana modal*



                body.style.position = "static";

                body.style.height = "100%";

                body.style.overflow = "hidden";

                     

                     

                }

            });

        })

    </script>

<button id="btnModal">Abrir modal</button> 

<div id="tvesModal" class="modalContainer">

 <div class="modal-content">

 <span class="close">×</span> <h2>Modal</h2> * Ventana modal mostrar le url y ID generado *

 <p><?php ***echo $title_post, $url, $ID*** ?></p> 

 

 </div>

 </div> 

Archive funtions.php

 function save_enquiry_form_action() {

     

        $post_title = $_POST['post_details']['post_title'];

        $post_description = $_POST['post_details']['post_description'];

        $args = [

            'post_title'=> $post_title,

            'post_content'=>$post_description,

            'post_status'=> 'publish',

            'post_type'=> 'post',

            'show_in_rest' => true,

            'post_date'=> get_the_date()

        ];

     

        $is_post_inserted = wp_insert_post($args);

     

        if($is_post_inserted) {

            return "success";

        } else {

            return "failed";

        }

    }

---

My Answer:
To achieve this, you can modify your AJAX request to return the ID and URL of the newly inserted post in the response. Here's an example of how you can do this:

1. Modify your PHP function that handles the AJAX request to return the ID and URL of the newly inserted post:

php
function insert_post_ajax() {
// Your code to insert the post

// Get the ID of the newly inserted post
$post_id = wp_insert_post( $post_data );

// Get the URL of the newly inserted post
$post_url = get_permalink( $post_id );

// Return the ID and URL in the response
echo json_encode( array( 'id' => $post_id, 'url' => $post_url ) );

wp_die();
}
add_action( 'wp_ajax_insert_post', 'insert_post_ajax' );


2. Modify your AJAX request in your JavaScript code to handle the response and display the ID and URL in a modal window:

javascript
jQuery.ajax({
type: 'POST',
url: ajaxurl,
data: {
action: 'insert_post',
// Other data to insert the post
},
success: function (response) {
// Parse the JSON response
var data = JSON.parse(response);

// Display the ID and URL in a modal window
var modalContent = 'New post ID: ' + data.id + '
New post URL: ' + data.url + '';
// Display the modal window with the content
}
});


With these modifications, your AJAX request will now return the ID and URL of the newly inserted post, and you can display this information in a modal window without refreshing the page.