使用content_for和和Ajax / jQuery来部分地更新网页 [英] using content_for and and ajax/Jquery to partially update webpage
问题描述
我一直在慢慢学习Mojolicious和Perl感谢那些在本网站有很大的帮助。我一直在尝试确定要动态地更新我的页面的基于jQuery的结果得到调用部分的最佳方式。
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.
目前，我有这样的（感谢魔的一个贡献者乔尔）
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请求，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以上未嵌入我的网页。我认为它是因为content_for js_imports不再在DOM存在。我可以添加一个content_for标记，以我的测试页面，但随后的脚本是我的DIV ID为内容中添加。我试图以某种方式achienve已经是我的脚本添加到页面月底，根据我现有的脚本。我知道我可以使用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 ：
$("div#content").append(data);
乔尔·伯杰（在评论）创造了一个很好的 pastie ，显示你想要的。
这篇关于使用content_for和和Ajax / jQuery来部分地更新网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
