通过jqueryajax将表单响应加载到div中

通过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

我正在开发一个文档协作应用程序。我可以加载视图和编辑章节模板,但发布有一个小障碍。表单有点不同,因为它们使用动作而不是href。响应正是我想要的(我可以通过chrome开发工具看到),响应字符串将附加到右div,然后在ajaxComplete时删除。如果我将表单操作视为href,那么除了正确的响应之外,还会得到一个缺少的模板500响应

有人知道将表单响应加载到DOM的最后一步是什么吗?这是我的ajax成功函数:

$('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(数据)