Ajax: Cannot read property 'type' of undefined

Question

Could anyone help me to wrap my head around this please? I’m trying to load WordPress post (custom post type) title/content in modal, but struggling to get it right. I’m quite new to php and ajax, so I have picked pieces of code from different tutorials and I try to assemble them all together.

So first I add a path to localize my script:

wp_localize_script( 'darkam_global', 'openpost', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' )
));

This is what my php function looks like:

add_action( 'wp_ajax_nopriv_open_post', 'my_open_post' );
add_action( 'wp_ajax_open_post', 'my_open_post' );

function my_open_post() {
    $id = $_GET['id'];
    $post = get_post($id);

    if($post){
        wp_send_json(array('post_title' => $post->post_title, 'post_content' => $post->post_content));
    } else {
        wp_send_json(array('error' => '1'));
    }
    wp_die();
}

and my jQuery:

( function( $ ) {
    var $modalTrigger = $('.js-modal-trigger');

    $modalTrigger.click( open_post_js );

    function open_post_js(id) {
        jQuery.ajax({
            url: openpost.ajaxurl,
            type: 'POST',
            data: {
                id: id,
                action: 'open_post'
            },
            success: function( result ) {
                alert( result['post_title'] );
            }
        })
    }
} )( jQuery );

When I trigger the modal I get console error: Uncaught TypeError: Cannot read property 'type' of undefined. Also the alert result comes as "undefined".

Any help would be very appreciated :)

Answer 1

Your PHP all looks good, the problem is that id in your JavaScript has no value assigned to it.

If the post ID is a data attribute on the element that is being clicked, then this should work (assuming the data attribute is called data-id):

( function( $ ) {
var $modalTrigger = $('.js-modal-trigger');

$modalTrigger.click( open_post_js );

function open_post_js() {
    var id = $(this).data('id');
    jQuery.ajax({
        url: openpost.ajaxurl,
        type: 'POST',
        data: {
            id: id,
            action: 'open_post'
        },
        success: function( result ) {
            alert( result['post_title'] );
        }
    })
}
} )( jQuery );

Answer 2

In your php, you return a valid response of {error:1} - but you don't check for this in your jquery/ajax.
So it's probably failing in the php.

It is failing in the php because you're not passing an id.

In your click event wire up, you have:

$modalTrigger.click(open_post_js)

so clicking is the same as calling:

open_post_js();

yet your function signature is: function open_post_js(id) so it's expecting an id, eg:

open_post_js(1);

the id is then "passed" to the php, but because it's not passed to the javascript, php doesn't get it so falls over.

---

How do you fix this? You need to pass an id to open_post_js or retrieve the id within open_post_js, eg:

function open_post_js() {
    var id=$(this).data("id");
    ...
}

then

<div class='js-modal-trigger' data-id="1">...</div>

Answer 3

you try this code :

header("Access-Control-Allow-Origin: *");
    header( 'Content-Type: application/json;' );
if($post){
        wp_send_json(array('post_title' => $post->post_title, 'post_content' => $post->post_content));
    } else {
        wp_send_json(array('error' => '1'));
    }

        wp_die();