使用content_for和ajax / Jquery来部分更新网页 [英] using content_for and ajax/Jquery to partially update webpage
问题描述
由于本网站的帮助，我一直在慢慢学习Mojolicious和Perl。我一直在尝试根据Jquery get调用的结果来确定动态更新页面部分的最佳方法。
I've been slowly learning Mojolicious and Perl thanks to the great help from those on this site. I have been trying to determine the best way to dynamically update parts of my page based on the results of Jquery get calls.
目前我有这样的模板（感谢其中一位Mojo贡献者Joel）
At the moment I have a template like this (Thanks to one of the Mojo contributors Joel)
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
%= content
%= include 'common_js'
%= content_for 'js_imports'
</body>
</html>
然后我有一个使用此布局的页面，如下所示。
Then I have a page that uses this layout, like below.
%title 'Script Test';
% content_for 'js_imports' => begin
%= javascript begin
$(document).ready(function(){
$("input#testbutton").click(function(){
$.get('<%= url_for('testbutton') %>',
function (data) {
$("div#content").html(data);
});
})
});
% end
% end
<p>Main Page</p>
<input type="button" id="testbutton" class="btn btn-danger" value="test">
<div class="span9" id="content"></div><!--/span9-->
因此，当点击'testbutton'时，我正在将来自get请求的响应写入div id内容。
So when the 'testbutton' is clicked I am writing the response from the get request to the div with id content.
我回来的'数据'是;
The 'data' I'm getting back is;
% content_for 'js_imports' => begin
%= javascript begin
$(document).ready(function(){
$("input#testbutton2").click(function(){
alert('testbutton2 clicked');
});
});
% end
% end
<p>Test Button Clicked</p>
<input type="button" id="testbutton2" class="btn btn-danger" value="test2">
现在，我上面的javascript没有嵌入到我的页面中。我认为这是因为DOM中不再存在content_for js_imports。我可以在我的测试页面添加'content_for'标签，但随后脚本会在我的DIV中添加ID内容。我正在尝试以某种方式将我的脚本添加到我现有脚本下的页面末尾。我知道我可以使用javascript来添加和删除脚本，但我想知道是否有办法用标签帮助器做到这一点？
Now, my javascript above isn't embedded in my page. I think its because content_for js_imports no longer exists in the DOM. I can add a 'content_for' tag to my test page, but then the script is added within my DIV with ID content. What I'm trying to achienve somehow is have my script added to the end of the page under my existing script. I know I can use javascript to add and remove script but I was wondering if there is a way to do it with tag helpers?
推荐答案
您无需将这些数据包含在content_for块中。只需直接包含它：
There's no need to include that data your getting back in a content_for block. Just include it directly:
%= javascript begin
$(document).ready(function(){
$("input#testbutton2").click(function(){
alert('testbutton2 clicked');
});
});
% end
<p>Test Button Clicked</p>
<input type="button" id="testbutton2" class="btn btn-danger" value="test2">
如果您不希望它替换现有内容，只是附加到它，那么使用追加而不是 html ：
And if you don't want it to replace the existing content, but just append to it, then use append instead of html:
$("div#content").append(data);
Joel Berger（在评论中）创造了一个不错的 pastie ，显示你想要的东西。
Joel Berger (in the comments) created a nice pastie that shows what you want.
这篇关于使用content_for和ajax / Jquery来部分更新网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
