Использование $ ajax для извлечения содержимого

Question

Я использую этот fork of 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, возвращенным с сервера.

Что я делаю неправильно?

Answer 1

Это не сработает, содержимое будет содержать объект XHR. Вы can't return data from an asynchronous AJAX call. Вам необходимо запустить код после Аякса вернулась:

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