renderWith輸出在控制檯中可見，但不更新瀏覽器

Question

我無法讓我的控制器在我的瀏覽器中正確呈現AJAX請求的結果。我使用指定的Include for Ajax請求接收到正確的html響應，但它僅在我的瀏覽器控制檯中可見。該頁面本身不會呈現新的內容。我錯過了什麼？

這是我的用於搜索產品的簡化控制器：

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

的索引方法實際上在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> 

這裏的SearchResult所模板包括：

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