通过jqueryajax将表单响应加载到div中
我正在开发一个文档协作应用程序。我可以加载视图和编辑章节模板,但发布有一个小障碍。表单有点不同,因为它们使用动作而不是href。响应正是我想要的(我可以通过chrome开发工具看到),响应字符串将附加到右div,然后在ajaxComplete时删除。如果我将表单操作视为href,那么除了正确的响应之外,还会得到一个缺少的模板500响应 有人知道将表单响应加载到DOM的最后一步是什么吗?这是我的ajax成功函数:通过jqueryajax将表单响应加载到div中,jquery,ruby-on-rails-3.1,Jquery,Ruby On Rails 3.1,我正在开发一个文档协作应用程序。我可以加载视图和编辑章节模板,但发布有一个小障碍。表单有点不同,因为它们使用动作而不是href。响应正是我想要的(我可以通过chrome开发工具看到),响应字符串将附加到右div,然后在ajaxComplete时删除。如果我将表单操作视为href,那么除了正确的响应之外,还会得到一个缺少的模板500响应 有人知道将表单响应加载到DOM的最后一步是什么吗?这是我的ajax成功函数: $('section') .live('ajax:success', functio
$('section')
.live('ajax:success', function(event, data, status, xhr) {
$('#' + response_str).html(data);
});
值得一提的是,显示和编辑使用e.preventDefault()
然后在捕获链接href后使用.load()
。我不能用它来发布,因为它会把表单操作搞砸
这是我的显示、编辑和发布功能
// .live() because edit btn is an ajax loaded element
$('[id^=edit_s]').live('click', function(e) {
e.preventDefault();
target = $(this).attr('href');
sectionID = $(this).attr('id').match(/[\d]+$/);
sectionLayer = $(this).attr('data-target');
response_str = 'response_s' + sectionID;
appropriateDiv.addClass(response_str);
$("." + response_str).load(target);
});
//this could stand to be less ambigious. select the actual form for example.
$('[id^=publish_s]').live('click', function(e) {
target = $(this).closest('form').attr('action');
alert(target);
appropriateDiv.addClass(response_str);
$(this).addClass('disabled');
//$("." + response_str).load(target); // doesn't work!
});
$('[id^=show_s]').live('click', function(e) {
target = $(this).attr('href');
sectionID = $(this).attr('id').match(/[\d]+$/);
sectionLayer = $(this).attr('data-target'); // contains "#"
appropriateDiv = $('div.tab-pane' + sectionLayer);
// Don't need preventDefault() if tab since bootstrap does it
if($(this).attr('data-toggle') != "tab") {
e.preventDefault();
appropriateDiv.removeClass('loaded');
}
response_str = 'response_s' + sectionID;
if ($(appropriateDiv).hasClass('loaded')) {
//alert("Already loaded, bro");
} else {
appropriateDiv.addClass(response_str + ' loaded');// ensure AJAX fills the right section
$("." + response_str).load(target);
}
});
提前谢谢 结果是一个愚蠢的错误。在我的成功函数中,我选择的是ID而不是类(告诉你这很愚蠢)
显示和编辑之所以有效,是因为
.load()
包括将响应放入所选元素(duh)。此问答仍然说明了如何使用jquery ajax将表单响应放入DOM中。让表单提交(不要使用e.preventDefault()
)并在ajax:success函数中使用approvediv.html(数据)
。