Eine Vorlage mit Ajax

Question

Ich versuche, eine customfield Suche zu machen, die überall eingefügt werden kann, sollte es die Ergebnisse auf der gleichen Seite laden, so dachte ich, Ajax wäre der Trick, aber es lädt die gleiche Seite wieder aus irgendeinem Grund hier ist Template-Code meiner Suche:

<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> 

und i haben dieses Bild zu 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'); 

Answer 1

Die PHP-Teil so sein würde.

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

Dann in js, haben Sie Zugriff auf ajax_object wie ajax_object.we_value. Verwenden Sie AJAX-Typ POST.

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

Answer 2

Vielen Dank für @mokiSRB es darauf hinzuweisen, aber das ganze Problem war ein Tippfehler ich so dumm füttern.

ändern ulr: zu url repariert es und es funktioniert jetzt.