2

我正在开发一个用于文档协作的应用程序。我可以很好地加载视图和编辑部分的模板，但发布有 1 个小障碍。表单有点不同，因为它们使用动作而不是 href。响应正是我想要的（我可以使用 chrome 开发工具看到它）并且响应字符串附加到正确的 div 然后在 ajaxComplete 时删除。如果我将表单操作视为 href，除了正确的响应外，我还会收到缺少的模板 500 响应。

任何人都知道将表单响应加载到 DOM 中的最后一步是什么？这是我的 ajax 成功函数：

$('section')
.live('ajax:success', function(event, data, status, xhr) {
  $('#' + response_str).html(data);
});

值得一提的是，显示和编辑使用，e.preventDefault()然后.load()在捕获链接href 后使用。我不能用它来发布，因为它会搞砸表单操作。

这是我的展示、编辑和发布功能。

// .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);
  }
});

提前致谢！

4

1 回答 1

0

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

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

于 2012-12-19T18:40:44.000 回答