使用ajax獲取模板

我想做一個自定義字段搜索，可以插入任何地方它應該加載結果在同一頁面中，所以我認爲ajax將是技巧，但它再次加載相同的頁面出於某種原因這裏是我的搜索模板代碼：使用ajax獲取模板

<script> 
    jQuery(document).ready(function($){ 
     $("#SearchButton").click(function(){ 
      $.ajax({ 
       type: "GET", 
       ulr:'<?php echo admin_url('admin-ajax.php'); ?>', 
       data: { action : 'inline_search', Sinput: $("#searchinput").val() }, 
       success: function(result) { 
        $("#SearchResults").html(result); 
       } 
      }); 
      $("#SearchResults").css("display","block") 
     }); 
    }); 
</script> 
<div class="flexible-content__content"> 
    <div class="column"> 
     <div class="row"> 
      <?php the_sub_field('content'); ?> 
     </div> 
    </div> 
    <div class="column"> 
     <div class="row"> 
       <input id="searchinput" type="text" value="<?= $search_query; ?>" name="s" id="header-search-input" placeholder="<?php echo esc_attr_x('Search …', 'placeholder') ?>" style="border-right: none;"> 
       <bttuon id="SearchButton" class="gform_button button" value="Search">Search</bttuon> 
     </div> 
    </div> 
</div> 
<div id="SearchResults" style="max-width: 70rem; margin:auto;display:none"></div>

，我已將此添加function.php：

add_action('admin_enqueue_scripts', 'my_enqueue'); 
function my_enqueue($hook) { 
    // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value 
    wp_localize_script('ajax-script', 'ajax_object', 
     array('ajax_url' => admin_url('admin-ajax.php'), 'we_value' => 1234)); 
} 

function inline_search() 
{ 
    echo "hello world"; 
    get_template_part('templates/inline-search'); 
    wp_die(); 
} 
add_action('wp_ajax_nopriv_inline_search', 'inline_search'); 
add_action('wp_ajax_inline_search', 'inline_search');

來源

2017-08-24 spiderangel

您是否正在使用wp-admin進行搜索，因爲您正在使用'admin_enqueue_scripts'鉤子？ – mokiSRB

我所要做的就是將內嵌搜索模板加載到我的頁面中，我看到有人使用該操作，所以我認爲它是作爲WP配置需要的。 – spiderangel

PHP的一部分會是這樣。

add_action('admin_enqueue_scripts', 'my_enqueue'); 
function my_enqueue($hook) { 
    // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value 
    wp_register_script('ajax-script', SCRIPT_PATH, array('jquery')); 
    wp_localize_script('ajax-script', 'ajax_object', 
     array('ajax_url' => admin_url('admin-ajax.php'), 'we_value' => 1234)); 
    wp_enqueue_script('ajax-script'); 
} 

function inline_search() 
{ 
    echo "hello world"; 
    get_template_part('templates/inline-search'); 
    wp_die(); 
} 
add_action('wp_ajax_nopriv_inline_search', 'inline_search'); 
add_action('wp_ajax_inline_search', 'inline_search');

然後在JS，你有機會獲得ajax_object像ajax_object.we_value。使用ajax類型POST。

$.ajax({ 
       type: "POST", 
       url: ajax_object.ajax_url, 
       data: { action : 'inline_search', Sinput: $("#searchinput").val() }, 
       success: function(result) { 
        $("#SearchResults").html(result); 
       } 
      });

來源

2017-08-24 11:02:23 mokiSRB

應該用什麼來代替SCRIPT_PATH？ – spiderangel

將您的腳本移至單獨的文件並放置該路徑而不是該佔位符。 – mokiSRB

我仍然收到錯誤消息：Uncaught ReferenceError：ajax_object未定義 – spiderangel

感謝@mokiSRB指出，但整個問題是一個錯字我喂如此愚蠢。

改變ulr：到url修復它，它現在工作。

來源

2017-08-24 12:31:44 spiderangel

使用ajax獲取模板

回答

相關問題