Question

我正在开发一个用于文档协作的应用程序。我可以为视图加载视图和编辑模板，但发布有一个小障碍。表单有点不同，因为它们使用动作而不是href。响应正是我想要的（我可以使用chrome dev工具看到它），响应字符串附加到右侧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);
  }
});

提前致谢！

Answer 1

原来是一个愚蠢的错误。在我的成功函数中，我选择了ID而不是类（告诉你它是愚蠢的）。

展示和编辑工作的原因是因为.load()包括将响应放入所选元素（duh）。

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

1 个答案: