Ajax: невозможно прочитать свойство 'type' из неопределенного

Question

Может ли кто-нибудь помочь мне обернуть голову вокруг этого, пожалуйста? Я пытаюсь загрузить заголовок / контент поста WordPress (пользовательский тип поста) в модальном режиме, но изо всех сил пытаюсь сделать это правильно. Я совсем новичок в php и ajax, поэтому я выбрал фрагменты кода из разных уроков и пытаюсь собрать их все вместе.

Итак, сначала я добавляю путь для локализации моего скрипта:

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

Вот как выглядит моя функция php:

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();
}

и мой 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 );

Когда я запускаю модальное окно, я получаю консольную ошибку: Uncaught TypeError: Невозможно прочитать свойство 'type' undefined. Также результат оповещения отображается как «неопределенный».

Любая помощь будет очень ценится:)

Answer 1

В вашем php вы возвращаете правильный ответ {error:1} - но вы не проверяете это в вашем jquery / ajax.
Так что это, вероятно, терпит неудачу в php.

Это терпит неудачу в php, потому что вы не передаете id.

В вашем click событии вы получите:

$modalTrigger.click(open_post_js)

, поэтому нажатие аналогично звонку:

open_post_js();

но ваша подпись функции: function open_post_js(id), поэтому она ожидает id, например:

open_post_js(1);

id затем «передается» php, но поскольку он не передается в javascript, php не получает его, поэтому он падает.

---

Как вы это исправите? Вам нужно передать id в open_post_js или для получения id в open_post_js, например:

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

тогда

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

Answer 2

Ваш PHP выглядит хорошо, проблема в том, что id в вашем JavaScript не имеет назначенного ему значения.

Если идентификатор сообщения является атрибутом данных для элемента, по которому выполняется щелчок, это должно работать (при условии, что атрибут данных называется 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 3

вы попробуйте этот код:

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();