Using $ajax to retrieve content

Question

I'm using this fork of Pageguide.js to present some guidance on the use of various pages of my web app. This works pretty good, however at the moment all content for the guides are statically set in a script:

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

I want the content to be retrieved dynamically using an $ajax call to the server, so I changed my code to the following adding an $ajax call:

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;
          }
        });
      }
    }
  ]
}

Although the $ajax call appears to work ok (I checked using the Chrome debugger and I can see the correct html being returned and no errors appear in the log), the guide is not updated with the html returned from the server.

What am I doing wrong?

You *can't return* from Ajax, just run some code *on success* right from `success` handler. — VisioN, Apr 04 '13 at 22:28

score 1 · Accepted Answer · edited May 23 '17 at 11:55

That won't work, content will contain an XHR object. You can't return data from an asynchronous AJAX call. You need to run the code after the AJAX has returned:

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

Using $ajax to retrieve content

1 Answers1