0

我正在使用Pageguide.js 的这个分支来提供一些关于使用我的网络应用程序的各个页面的指导。这工作得很好，但是目前指南的所有内容都是静态设置在脚本中的：

var guide = {
  id: 'jQuery.PageGuide',
  title: 'What can I do here?',
  steps: [
    {
      target: '#user-tools',
      content: 'Some static content here'
    }
  ]
}

$(function() {
  // Load the default guide!
  $.pageguide(guide);
});

我希望使用$ajax对服务器的调用动态检索内容，因此我将代码更改为以下添加$ajax调用：

var guide = {
  id: 'jQuery.PageGuide',
  title: 'What can I do here?',
  steps: [
    {
      target: '#user-tools',
      content: function() {
        $.ajax({
          type: 'GET',
          url: 'user-guide',
          data: {elementId: '#user-tools'},
          success: function(html) {
            return html;
          }
        });
      }
    }
  ]
}

尽管$ajax调用似乎工作正常（我使用 Chrome 调试器进行了检查，我可以看到返回了正确的 html，并且日志中没有出现错误），但该指南并未使用从服务器返回的 html 进行更新。

我究竟做错了什么？

4

1 回答 1

1

那是行不通的，内容将包含一个XHR对象。您不能从异步 AJAX 调用返回数据。您需要在 AJAX 返回后运行代码：

$.ajax({type: 'GET',url: 'user-guide', data: {elementId: '#user-tools'}}).done(function(html){
  var guide = {
      id: 'jQuery.PageGuide',
      title: 'What can I do here?',
      steps: [{target: '#user-tools',content:html}]
  };
  //rest of your code goes here       
});
于 2013-04-04T22:30:51.010 回答