播放 2 框架 + 循环 + 动态 Javascript
Play 2 Framework + Loop for + Dynamic Javascript
在Play 2.4应用程序的视图中,我想迭代一些数据,并为每次迭代创建Javascript代码。生成的 Javascript 似乎没问题,但是当我单击按钮时无法触发事件。
@for(site <- sites) {
<div class="item">
<div class="item-site-pres">
<span class="item-site-title"><a href="@site.url">@site.title</a></span>
</div>
<div id="div@site.url" class="item-site-desc">
<center>
Load Site
<input type='button' value='+' id='input@site.url' />
</center>
</div>
}
爪哇语
<script type="text/javascript" charset="utf-8">
var load@site.url = function() {
var url = @site.url;
var website = @site.website;
jsRoutes.controllers.Application.loadAjax(url,website).ajax({
success: function(data) {
$("#div@site.url").html(data);
},
error: function() {
alert("Error!")
}
})
};
$("#input@site.url").click(load@site.url);
</script>
生成的div 示例
<div id="divhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210" class="item-site-desc">
<center>
Load Site
<input id="inputhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210" type="button" value="+">
</center>
</div>
示例 Javascript 生成
<script charset="utf-8" type="text/javascript">
var loadshttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210 = function() {
var url = http://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210;
var website = L'Equipe.fr;
jsRoutes.controllers.Application.loadAjax(url,website).ajax({
success: function(data) {
$("#divhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210").html(data);
},
error: function() {
alert("Error!")
}
})
};
$("#inputhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210").click(loadhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210);
</script>
感谢您的支持
假设你的JS是你必须修复字符串值的引号的问题,否则它将无法工作。
var website = L'Equipe.fr
永远不会是有效的 JS 字符串,如果没有在 ""
中包装值。var loadshttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210
的语法都不好。
经过几次尝试,解决方案(感谢Applicius的帮助(。
1(JS语法问题
var website = L'Equipe.fr
必须在
var website = "L''Equipe.fr";
2( 动态脚本名称
在循环中,要为每次迭代创建一个新函数,您可以遵循以下解决方案: Javascript:动态函数名称
3( 我的最终解决方案
// Create just one function with argument before the loop (To avoid generation of many scripts)
<script type="text/javascript" Content-Type="text/plain" charset="UTF-8">
var loadSite = function(url) {
jsRoutes.controllers.Application.loadSiteAjax(url).ajax({
success: function(data) {
var theDiv = document.getElementById("result" + url);
$(theDiv).html(data);
},
error: function() {
alert("Error!")
}
})
};
</script>
// For each button use JQuery onClick to load the function
@for(site <- listeGlobalNewsSection.storiesAjax) {
<div id="result@site.url" >
<div class="item-site-desc">>
<center>
LoadSite
<input type='button' value='+' id='input@site.url' onClick="loadSite('@site.url')" />
</center>
</div>
</div>
}
相关文章:
- 动态Javascript表单不起作用
- 从脚本中的动态(javascript)网页获取信息
- 创建动态javascript对象
- HTML 5 帮助.使用websql数据库中的动态javascript渲染选项
- 更改动态 JavaScript 数据
- 将动态javascript变量附加到HTML标记.InnerHTML&insertAdjacentHTML都不正
- addEvenListener不'我不研究动态javascript
- 使用加载时的Codeigner动态javascript->看法
- JSON动态Javascript解析”;未定义”;
- jsf应用程序中的动态javascript
- UpdatePanel中自定义控件内的动态javascript
- 使用wro4j创建动态javascript捆绑包
- 如何在PHP中包含动态Javascript页面的静态HTML结果
- 动态JavaScript与rail一起徘徊
- 在 Symfony 2 中生成动态 JavaScript 的正确方法
- For 循环中的动态 Javascript 条件
- 如何确定调用动态 JavaScript 文件的页面和 ASP.net 中的用户
- 是否可以缓存具有指向动态JavaScript的链接的HTML页面
- 动态 javascript,用于检测复选框是否被选中并禁用相应的输入字段
- 如何制作具有键和值组的动态JavaScript数组