Question

我根据浏览器对Google Speech API的支持向我的网页添加了一个body类。我们的想法是检查该类，并根据浏览器支持提供相应的搜索表单。

Javascript / Jquery在文档头中内联：

$.noConflict();
  jQuery(document).ready(function($) {
    $(function() {
      if (Modernizr.speechrecognition) {
        $("body").addClass("voice-searchable");
      }
    });
  });

检查页面源代码，我可以看到正在相应的浏览器中添加类voice-searchable。

PHP：

add_filter( 'genesis_search_form', 'my_search_form', 10, 4);
function my_search_form( $form ) {
  $classes = get_body_class();
  if (in_array('voice-searchable',$classes)) {
  // NEXT 2 LINES FOR DEBUGGING
    print_r ($classes);
    print (' FUBAR');
    $form = 'CODE FOR VOICE SEARCH FORM HERE';
  } else {
  // NEXT 2 LINES FOR DEBUGGING
    print_r ($classes);
    print (' BARFOO');
      $form = 'CODE FOR TEXT ONLY FORM HERE';
  }
  return $form;
}

最后在我的speech-input.js：

中

jQuery(document).ready(function ($) {
  $(function () {
    if (Modernizr.speechrecognition) {
      $("body").addClass("voice-searchable");
    }
    $.ajax({
      type: "POST",
      url: "/wp-content/themes/my-child-theme/include/search.php",
      dataType: "json",
      async: false,
      data: {
        'action': 'my_search_ajax_request',
      },
      success: function (data) {
        //If the success function is execute,
        //then the Ajax request was successful.
        //Add the data we received in our Ajax
        //request to the "breadcrumb_search" div.
        $(".breadcrumb_search").html(data);
      },
      error: function (xhr, ajaxOptions, thrownError) {
        var errorMsg = "Ajax request failed: " + xhr.responseText;
        $(".breadcrumb_search").html(errorMsg);
      }

    });
  });
});
(window, jQuery, window.Window_Ready);

尽管存在所需的body类，但仍会返回第二个表单，并且打印的body类数组不包含voice-searchable。我尝试将优先级从10更改为更高的数字，但没有成功。

为什么PHP过滤器不解析添加的body类？我怎么才能看到它？我是否需要将其包装在稍后触发的函数中？

感谢您的光临。

编辑：

@loganbertram谢谢。我是使用Ajax的新手，但我试过这个：

/*
 * Ajax for speech recognition; place in functions.php
 */

function my_search_ajax_enqueue() {
  // Enqueue javascript on the frontend.
  wp_enqueue_script(
    'my-search-ajax-script',
    get_stylesheet_directory_uri() . '/js/speech-input.js',
    array('jquery')
  );
  // The wp_localize_script allows us to output the ajax_url path for our script to use.
  wp_localize_script(
    'my-search-ajax-script',
    'my_search_ajax_obj',
    array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) )
  );
}

add_action( 'wp_enqueue_scripts', 'my_search_ajax_enqueue' );

加上这个（在search.php中）：

function my_search_ajax_request() {
  add_filter( 'genesis_search_form', 'my_search_form', 99, 4);
  function my_search_form( $form ) {
    $classes = get_body_class();
    if (in_array('voice-searchable',$classes)) {
      $form = 'CODE FOR FORM HERE';
    } else {
      $form = 'CODE FOR TEXT ONLY FORM HERE';
    }
    return $form;
  }
  die();
}

add_action( 'wp_ajax_my_search_ajax_request', 'my_search_ajax_request' );
add_action( 'wp_ajax_nopriv_my_search_ajax_request', 'my_search_ajax_request' );

最后，这在speech-input.js：

jQuery(document).ready(function ($) {
  $(function () {
    if (Modernizr.speechrecognition) {
      $("body").addClass("voice-searchable");
    }
    $.ajax({
      type: "POST",
      url: "/wp-content/themes/child-theme-name/include/search.php",
      dataType: "json",
      async: false,
      data: {
        'action': 'my_search_ajax_request',
      },
      success: function (data) {
        //If the success function is execute,
        //then the Ajax request was successful.
        //Add the data we received in our Ajax
        //request to the "breadcrumb_search" div.
        $(".breadcrumb_search").html(data);
      },
      error: function (xhr, ajaxOptions, thrownError) {
        var errorMsg = "Ajax request failed: " + xhr.responseText;
        $(".breadcrumb_search").html(errorMsg);
      }

    });
  });
});
(window, jQuery, window.Window_Ready);

这给出了500错误＆amp;显示错误消息。显然不是正确的语法。我能找到的大多数例子都是从变量中获取数据或获取表单值，没有什么比从PHP文件中呈现一些HTML那么简单。如果那里的任何人可以指出我如何做后者的例子，我会很感激。

编辑：我解决了AJAX问题＆amp;将在单独的主题中发布答案。

Answer 1

PHP是服务器端并且首先触发。然后浏览器接收它并处理添加类的JS。简而言之，当PHP运行以呈现页面时，目标类尚未添加。您可以在更改类之后将ajax请求添加到PHP的显着位。

Answer 2

将此代码放入functions.php然后检查

请删除您用于添加课程的所有js。

add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {

    $classes[] = 'voice-searchable';

    return $classes;

}

有条件地添加body类，然后通过PHP过滤

2 个答案: