renderWith输出在控制台中可见,但不更新浏览器
renderWith output visible in console, but does not update browser
我无法让我的控制器在浏览器中正确呈现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;
}
}
}
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>
这是SearchResults模板包括:
<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>
问题是该模板实际上是在浏览器中呈现的。我做错什么了吗?
模板中的这一行:<% 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
});
});
相关文章:
- 强制浏览器更新缓存的HTML5视频对象
- 浏览器之间的文本区域更新方式不同
- 当 SASS 更新时,浏览器同步无法使用 gulp
- 为什么我的 cshtml 页面的 javascript 没有在浏览器中更新/刷新
- Javascript 不会在浏览器中更新文档
- Php循环不会在浏览器上更新
- 在循环锁定浏览器时暂停执行(用fiddles更新)
- 如何更新浏览器'使用Ajax将html添加到页面后的缓存
- GULP:如何在不刷新的情况下更新浏览器(仅适用于 CSS 更改)
- HTML5画布未更新:浏览器错误或我做错了什么
- 用户发送到更新浏览器后是否可以打开 URL
- 如何检查表中的新内容,然后更新浏览器选项卡标题
- 在Angular和Nodejs应用中,如果我改变了html文件,它也不会更新浏览器
- 动态更新浏览器窗口的高度
- react setState()更新浏览器中的所有组件
- Facebook(1)-使用新的通知号更新浏览器标题
- Rails 4远程真实表单请求(用于ajax加载器),更新浏览器url
- 使用JS或jQuery更改或更新浏览器地址栏中查询字符串的可见部分
- 使用JS或PHP,更新浏览器地址栏中的URL-无需访问它
- renderWith输出在控制台中可见,但不更新浏览器