javascript - renderWith 输出在控制台中可见，但不更新浏览器

Question

我无法让我的 Controller 在浏览器中正确呈现 AJAX 请求的结果。我使用 Ajax 请求的指定 Include 收到正确的 html 响应，但它仅在我的浏览器控制台中可见。页面本身不会呈现新内容。我错过了什么？

这是我用于搜索产品的简化 Controller :

class ProductSearch_Controller extends Page_Controller {
  public function index(SS_HTTPRequest $request) {

    // external api request, parsing response, returning as ArrayList $units

    $return_data = array(
      'Products' => $units
    );

    if($request->isAjax()) {
      return $this->customise($return_data)->renderWith('SearchResults');
    } else {
      return $return_data;
    }
  }
}

index 方法实际上从外部源提取 json 数据，解析它，然后将其传递到 ArrayList，$units，然后将其作为 Products 提供给模板。这是简化的 ProductSearch.ss 模板:

<section>
  <div class="container">
    <div class="productsearch__container">
      <aside>$SearchForm</aside>
      <main>
        <h2>Search Results</h2>
        <% include SearchResults %>
      </main>
    </div>
  </div>
</section>

这是搜索结果模板，包括:

<div class="product__container">
    <% loop $Products %>
      <a href="$URL" class="product">
        <h3>Unit $UnitNo</h3>
        <ul>
          <li>Price: $Lot_Price</li>
          <li>SQFT: $SQFT</li>
          <li>Bedrooms: $bedrooms_no</li>
          <li>Baths: $baths_no</li>
        </ul>
      </a>
    <% end_loop %>
</div>

这是我的简化 JavaScript:

$("[name='example-filter-variable']").on('change', function(e) {
  e.preventDefault();
  var params = $( "#Form_SearchForm" ).serialize();
  $.get("url/example?" + params, function(data) {
    console.log("Data: " + data);
  });
});

触发 ajax 事件使用 SearchResults.ss Include 返回适当的响应，这在我的 console.log() 输出中可见:

<div class="product__container">
      <a href="/homes/search/show/6/101" class="product">
        <h3>Unit 101</h3>
        <ul>
          <li>Price: </li>
          <li>SQFT: 1531</li>
          <li>Bedrooms: 2</li>
          <li>Baths: 2</li>
        </ul>
      </a>

      <a href="/homes/search/show/12/102" class="product">
        <h3>Unit 102</h3>
        <ul>
          <li>Price: </li>
          <li>SQFT: 1535</li>
          <li>Bedrooms: 2</li>
          <li>Baths: 2</li>
        </ul>
      </a>

    ... and so on

</div>

问题是模板实际上是在浏览器中呈现的。我做错了什么吗？

Answer 1

模板中的这一行:<% include SearchResults %>导致您的模板包含 SearchResults 模板。

您的 JavaScript 中也没有任何内容可将数据附加到 DOM 中。

试试这个模板:

<section>
  <div class="container">
    <div class="productsearch__container">
      <aside>$SearchForm</aside>
      <main>
        <h2>Search Results</h2>
        <div class="results"></div>
      </main>
    </div>
  </div>
</section>

使用这个js:

$("[name='example-filter-variable']").on('change', function(e) {
  e.preventDefault();
  var params = $( "#Form_SearchForm" ).serialize();
  $.get("url/example?" + params, function(data) {
    console.log("Data: " + data);
    $(".results").append(data); // add something along these lines
  });
});