Как в wp работает ajax?

Подскажите пож-ста как в WP работает аякс, хочу сделать подгрузку новостей. Делаю по примерам, но результат получается совсем другой. Проблема в том, что ответ возвращает строкой сначала поля, потом верстку.

Хотя в коде поля заполнены в верстке.

Так ли вообще реализовывается это на WP?

ajax запрос
$.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            data: {
                action: '123',
                param1: $type
            },
            beforeSend: function(xhr){

            },
            success: function(data){
                //alert(data);
                $('.list-rooms').remove();
                $('.rooms-section .container').after(data);
            }


        });

код из functions.php
function test_function($js){

  if($_POST['param1'] == 'stud'){
     $summa = "<div class='list-rooms'>";
    $args = array(
                   'publish' => true,
                   'posts_per_page' => 10,
                   'orderby' => 'asc',
                   'cat' => 91,
                  );
            
        query_posts($args);

      if ( have_posts() ){ 
        while ( have_posts() ){
          the_post();
      $summa .= "<div class='vc_col-md-2 vc_col-xs-6 vc_col-sm-3'><a href='".the_field('ссылка_на_квартиру')."' target='_blank' class='element-room-a'><div class='element-room'><img src='".the_field('картинка')."' alt='' /><div class='room-name'>".the_field('тип_квартиры')."</div><div class='room-kv'>общая площадь: <span>".the_field('квадратура')." м<sup>2</sup></span></div><div class='room-price'>".the_field('стоимость')." руб</div><a href='".the_field('ссылка_на_квартиру')."' target='_blank' class='room-buy'>Забронировать</a></div></a></div>";
      }
    }
      wp_reset_query();
      $summa = $summa."</div>";
      //$js->html('.list-rooms', $summa);


    echo wp_json_encode($summa);
  }
}

add_action( 'wp_ajax_123', 'test_function' );
add_action( 'wp_ajax_nopriv_123', 'test_function' );

5bc6c0807aae9101776253.png
  • Вопрос задан
  • 211 просмотров
Решения вопроса 1
xakplant
@xakplant
Автор сайта xakplant.ru
Для начала рекомендую вам мою статью. Там описано как вывести пост в модальном окне. Это немного не то, но поможет разобраться с ajax в wp. Вот ссылка .

Далее. В начале статьи я описываю как работать с WP_query
Вы будите изменять массив агрументов для него, чтобы получить ещё новости по событию.
Примерно вы будете передавать массив
$args = array(
'post_type' => 'post',
'offset'=> '' // отступ, сколько постов пропустить при запросе из базы 
'posts_per_page'=> 10 // количество постов
);


Скорее всего вы просто будите менять offset. Если изначально не указать posts_per_page то количество постов будет такое как в настройках wp

Про js.
Рекомендую вот такую статью для того чтобы понять как на чистом js написать ajax для wordpress

Ну так вот. Чтобы запоминать состояние прокрутки предлагаю вам устанавливать hash адреса
window.location.hash = 2 // страница 2 например

Когда пользователь будет попадать на страницу проверяйте hash и в зависимости от него отдавайте ему нужные записи. (Так можно пользователь будет грузить меньше данных и сможет переходить обратно если перешёл на статью)
А при событии на которое повешена подгрузка записей изменяйте hash и делайте AJAX-запрос
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
kawabanga
@kawabanga
Бью себя по рукам за каждый ответ на глупый вопрос
Для начала - ответ сервера должен быть как JSON. гуглите header json.
Во вторых - в функции
echo wp_json_encode($summa);
Вы отдаете строку. А надо массив. В кратком виде это может быть так.
$response = [];
   if ( have_posts() ){ 
        while ( have_posts() ){
          the_post();
      $response['items'][]= 'elemnt';
      }
    }

Либо просто отдавайте строку как есть, без json_encode.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
22 апр. 2019, в 22:33
200 руб./за проект
22 апр. 2019, в 21:37
3500 руб./за проект
22 апр. 2019, в 21:27
10000 руб./за проект