web-dev-qa-db-ja.com

Ajaxを介して現在のクエリを再実行しますが、変数を変更します

$queryというカスタムクエリがあります。入力はフォーム入力に基づいています。クエリはすでにページ上で実行されていますが、その後ページをリロードせずにもう一度実行したいので、AJAXを使用します（ユーザーがタブを選択したとき（ブートストラップ））。

重要なのは、クエリvar posts_per_pageを-1に変更する必要があるということです。

タブが選択されたときに何かをするためのコードは次のとおりです。

$('#myTab').on('shown', function () {
   // Do stuff here
})

今その機能の中で私はすることができます

jQuery.ajax(
    {  
        type: 'POST',  
        url: ajaxurl, // example.com/wp-admin/admin-ajax.php is defined in my js file
        data: 
        {  
            action: 'the_function_here',
            ajaxnonce: YTajax.ajaxnonce, // Also defined
        },
        success: function(data, textStatus, XMLHttpRequest)
        {  
            jQuery('#bodyForOutput').html(data);  
        },  
        error: function(MLHttpRequest, textStatus, errorThrown)
        {  
            alert(errorThrown);
        }
    });

しかし、既に定義されている$queryをどのように利用するのか、私は本当によくわかりません。 posts_per_pageを変更するだけです。 set_query_varでこれを行うことができますか？それともメインループにしか使えないのでしょうか。

ajaxquery
1
eskimo

Ajaxリクエストはまったく新しいhttpリクエストであるため、$query変数はページに定義され、sendajaxリクエストですが、リクエストを受信するreceiveページでnotに設定されます。

つまり、クエリを完全に再作成し、パラメーターを変更していません。

つまり、2の可能性があります。

1：クエリはカスタムです

クエリがカスタムクエリの場合（WP_Queryを使用して作成）、そのクエリを返し、ページおよびajaxアクションでフックする関数から呼び出す関数を作成できます。

// in functions.php or in plugin
function my_custom_query( $posts_per_page = 10 ) {
  $args = array(
    'posts_per_page' => $posts_per_page,
    // other args here
  ); 
  return new WP_Query( $args );
}

// then inside the page
$query = my_custom_query();
while ( $query->have_posts() ) { $query->the_post();
  // your loop code here
}

// and handling ajax action
add_action('wp_ajax_the_function_here', 'my_ajax_loop');
add_action('wp_ajax_nopriv_the_function_here', 'my_ajax_loop');
function my_ajax_loop() {
   $query = my_custom_query( -1 );
   while ( $query->have_posts() ) { $query->the_post();
     // your loop code here
   }
   die();
}

2：クエリはmainクエリ

1つ以上のパラメーターを変更するメインクエリを複製する場合は、クエリ変数をwp_localize_scriptを介してスクリプトに渡し、それらをajaxを介してajaxアクションを処理する関数に渡します。

add_action('wp_enqueue_script', 'add_my_scripts');

function add_my_scripts() {
  // here I'm assuming the javascript file where you have the code you posted
  // is called 'myscript.js' and resides in 'js' subfolder inside theme folder
  wp_enqueue_script('my_script', get_template_directory_uri() . '/js/myscript.js');
  global $wp_query;
  $qv = $wp_query->query;
  wp_localize_script('my_script', 'my_script_data', array('query' => $qv) );
}

その後、jsファイルで次のことができます。

jQuery.ajax({  
  type: 'POST',  
  url: ajaxurl, // example.com/wp-admin/admin-ajax.php is defined in my js file
  data:  {  
    action: 'the_function_here',
    ajaxnonce: YTajax.ajaxnonce, // Also defined
    query: my_script_data.query // Defined by 'wp_localize_script'
  },
  success: function(data, textStatus, XMLHttpRequest) {  
    jQuery('#bodyForOutput').html(data);  
  },  
  error: function(MLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown);
  }
});

これで、ajaxリクエストを次のように渡すことができます。

// and handling ajax action
add_action('wp_ajax_the_function_here', 'my_ajax_loop');
add_action('wp_ajax_nopriv_the_function_here', 'my_ajax_loop');
function my_ajax_loop() {
   $args = (array) filter_var(INPUT_POST, 'query');
   $args['posts_per_page'] = -1;
   $query = new WP_Query($args);
   while ( $query->have_posts() ) { $query->the_post();
     // your loop code here
   }
   die();
}
4
gmazzap