Javascript 如何在.js.erb文件中使用单击逻辑根据单击的按钮呈现不同的HTML?
我有一个四步表单,用户通过它来完成一个过程。每个步骤都是一个单独的部分。我想使用Ajax引导用户浏览表单,并根据过程中的步骤决定显示哪个部分。我可以根据单击的按钮来判断它们是基于哪个步骤的。但是,一旦我添加了单击逻辑,下面的代码就不会在浏览器中呈现任何内容。当我拿出click listener时,一切正常Javascript 如何在.js.erb文件中使用单击逻辑根据单击的按钮呈现不同的HTML?,javascript,ruby-on-rails,ajax,Javascript,Ruby On Rails,Ajax,我有一个四步表单,用户通过它来完成一个过程。每个步骤都是一个单独的部分。我想使用Ajax引导用户浏览表单,并根据过程中的步骤决定显示哪个部分。我可以根据单击的按钮来判断它们是基于哪个步骤的。但是,一旦我添加了单击逻辑,下面的代码就不会在浏览器中呈现任何内容。当我拿出click listener时,一切正常 $(function(){ $("#ask2-btn").click(function(e){ $("div#ask").html("<%= escape_jav
$(function(){
$("#ask2-btn").click(function(e){
$("div#ask").html("<%= escape_javascript(render('asks/ask3')) %>")
});
$("#ask3-btn").click(function(e){
$("div#ask").html("<%= escape_javascript(render('asks/ask4')) %>")
});
});
$(函数(){
$(“#ask2 btn”)。单击(功能(e){
$(“div#ask”).html(“”)
});
$(“#ask3 btn”)。单击(功能(e){
$(“div#ask”).html(“”)
});
});
更新:以下是未呈现的浏览器响应
$(function(){
$("#ask2-btn").click(function(e){
$("div#ask").html("<p class=\"lead\">Help with this issue<\/p>\n<ul><li class=\"profile\">Sam Smith<\/li><\/ul>\n<em>\"Expected outcome of the ASK?<\/em>\n <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"✓\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n \n <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Advice\" />\n <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Advice\" />\n<\/form> <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"✓\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n \n <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Introduction\" />\n <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Introduction\" />\n<\/form> <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"✓\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n \n <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Support\" />\n <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Support\" />\n<\/form> <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"✓\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n \n <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Money\" />\n <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Money\" />\n<\/form> <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"✓\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n \n <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Don't know\" />\n <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Don't know\" />\n<\/form>")
});
$("#ask3-btn").click(function(e){
$("div#ask").html("<p class=\"lead\">Help with this issue<\/p>\n<ul>\n <li class=\"profile\">Sam Smith<\/li>\n <li class=\"check\"><\/li>\n<\/ul>\n <hr/>\n <a href=\"/\">Add another ASK<\/a>")
});
});
$(函数(){
$(“#ask2 btn”)。单击(功能(e){
$(“div#ask”).html(“此问题的帮助\n
- Sam Smith\n\“询问的预期结果?\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n”
});
$(“#ask3 btn”)。单击(功能(e){
$(“div#ask”).html(“
此问题的帮助\n
\n- Sam Smith\n
- \n\n
\n添加另一个问题”)
});
});
经过几天的努力,我决定只在客户端使用Javascript(而不是Ajax)在表单中呈现四个步骤而不使用HTTP刷新。我没有使用四个单独的表单,而是使用一个单独的表单分解成四个单独的div。div的2-4从一开始是隐藏的,我编写Javascript来监听对“提交”的点击“在流程中的每个步骤上单击。在click事件中,我从字段输入中复制了值,并使用.text将值写入屏幕,给用户留下保存到数据库的印象
根据我的经验,我不确定Rails和Ajax是否能够很好地使用Ajax处理具有多个连续更新操作的复杂表单
下面是Javascript:
<script>
$("#ask1-btn").click(function(e){
findDescription();
$("div#ask-list").toggleClass("hidden");
$("div.ask1").toggleClass("hidden");
$("div.ask2").toggleClass("hidden");
e.preventDefault();
});
$("#ask2-btn").click(function(e){
askStep3();
});
function askStep3(){
findContact();
$("div.ask2").toggleClass("hidden");
$("div.ask3").toggleClass("hidden");
};
function findDescription(){
var ask_description = document.getElementById("ask-desc-input").value;
$("li#ask-description p.cname").text(ask_description);
};
function findContact(){
var ask_contact = document.getElementById("ask-contact-input").value;
$("li#ask-contact").text(ask_contact);
};
</script>
$(“#ask1 btn”)。单击(功能(e){
findDescription();
$(“div#ask list”).toggleClass(“隐藏”);
$(“div.ask1”).toggleClass(“隐藏”);
$(“div.ask2”).toggleClass(“隐藏”);
e、 预防默认值();
});
$(“#ask2 btn”)。单击(功能(e){
askStep3();
});
函数askStep3(){
findContact();
$(“div.ask2”).toggleClass(“隐藏”);
$(“div.ask3”).toggleClass(“隐藏”);
};
函数findDescription(){
var ask_description=document.getElementById(“ask desc input”).value;
$(“li#ask description p.cname”)。文本(ask#u description);
};
函数findContact(){
var ask_contact=document.getElementById(“ask contact input”).value;
$(“询问联系人”)。文本(询问联系人);
};
您是否考虑过将所有HTML直接放在网页中,然后使用CSS/JavaScript显示/隐藏网页的不同部分。我对此进行了讨论,但每个部分都显示了迄今为止已完成的信息,因此我更愿意从数据库中提取这些信息,但根据我在上面代码中看到的内容,在用户开始填写表单之前,所有部分都是在初始页面请求时生成的。Rails中的更新操作会调用此代码,因为KControllerit似乎适合我: