首頁>Web>source

我建立了一个JS和PHP代碼来查詢資料庫並在頁面上顯示匹配的行.搞砸了wP上的其他頁面,所以我想知道如何定位單个頁面,這樣JS不会在其他頁面上執行。

JS:

jQuery(document).ready( function() {
    console.log("Document loaded");
    
    jQuery("#searchButton").click( function(e) {
      console.log("Search button clicked");
      e.preventDefault(); 
      var zipCode = document.getElementById("inputField").value;
   
      var data = {
        'action' : "zip_code",
        'zip_code' : zipCode
      };
      console.log("Zip code entered: " + data.zip_code);
      console.log("WP AJax URL: " + data.action);
   
      jQuery.ajax({
         type : "post",
         dataType : "json",
         url : data.action,
         data : data,
      
         success: function(response) {
            console.log(response.data);
            if(response.success) {
                console.log("response.type == success");
                jQuery("#results").html(response.data.data);
            }
            else {
                console.log("response.type == else");
                console.log(response.data);
            }
         },
         error: function(errorThrown){
            console.log("In error, error thrown!");
            console.log(errorThrown);
        }
      })  
   })
});

PHP:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action('wp_ajax_zip_search', 'zip_search');
add_action('wp_ajax_nopriv_zip_search', 'zip_search' );
function zip_search()
{
    global $wpdb;
    
    //  Functional code omitted for now.  Just need to get "here" paragraph return (for now)
    
    $output = "<p>here</p>";
    $response = array(
        'data' => $output,
    );
    wp_send_json_success($response);
}
add_action( 'wp_enqueue_scripts', 'my_load_scripts' );
function my_load_scripts() {
    // Enqueue javascript on the frontend.
    wp_enqueue_script(
        'zip_js',
        get_template_directory_uri() . '-child-agent_search/js/zip_search.js',
        array('jquery')
    );
    // The wp_localize_script allows us to output the ajax_url path for our script to use.
    wp_localize_script(
        'zip_js',
        'myAjax',
        array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) )
    );
}
?>
最新回復
  • 11月前
    1 #

    在這裏,代碼對与 #searchButton匹配的任何东西进行操作 元素:

    jQuery("#searchButton")
    

    如果有 searchButton 在其他頁面上,它將与之匹配,因此您需要更加具體。

    例如,在主頁上, <body> 標簽將有 home Class,這是我的網站首頁正文標簽:

    <body class="home blog logged-in admin-bar no-customize-support">
    

    因此,要使其仅定位為首頁上的搜尋按钮,可以尝試執行以下操作:

    jQuery(".home #searchButton")
    

    或者,仅將JS排入该特定頁面,但是選擇器方法更好。

  • wordpress:使用add_filter修改現有插件功能
  • drupal:使用Controller在自定義模組中的表單:Twig中不存在HTML標簽表單