Cascade AJAX requests for data retrieval (similar to the process in Wolfram Alpha)

Question

Cascade AJAX requests for data retrieval (similar to the process in Wolfram Alpha)

Struggling with a challenge here - I want to make multiple AJAX requests, but I need the second request to be sent only after the first one successfully completes.

I attempted using jQuery Deferred object, jQuery.when(), and jQuery.then() methods, but encountered some difficulties...

Eventually, I turned to a plugin called https://github.com/dio-el-claire/jquery.waterfall. However, I couldn't achieve my desired outcome. It seems that this plugin outputs all returned data simultaneously.

Similar to what is seen on .

Thanks in advance!

Apologies for any mistakes in my English)

jquery ajax

Answer 1

Answer №1

Utilize the success part of the ajax call to handle the returned data. You can define a function there to process the data and also manage any errors that may occur.

I'm demonstrating this in pseudo-coffeescript, but I hope it is understandable.

jQuery(() ->
  window.App = {};
  window.App.behaviors = [];
  window.App.behaviors.push(ComposableBehavior.new());
)

class ComposableBehavior(() ->
  getData: ((url,successFunction, errorFunction) ->
    $.ajax(
      url:url,
      type:'GET',
      data: {this: "that"},
      success: (data) =>
        successFunction(data)
      error: (errorData) =>
        errorFunction
      )
    )
  )
  initialParse: ((data) ->
    thePlayer = JSON.parse(data)
    //updatePlayerUi(thePlayer)
    @getScores(thePlayer)
  )
  getScores: ((thePlayer) =>
    getData('player/'+thePlayer.id+/'scores', @displayScores, @uhOh)
  )

  displayScores: (data) =>
    //updateScoreUi(data)

  uhOh: (errorData) =>
   // displayError(errorData)
)

Trust this information proves helpful.

Answer 2

Utilize the success part of the ajax call to handle the returned data. You can define a function there to process the data and also manage any errors that may occur.

I'm demonstrating this in pseudo-coffeescript, but I hope it is understandable.

jQuery(() ->
  window.App = {};
  window.App.behaviors = [];
  window.App.behaviors.push(ComposableBehavior.new());
)

class ComposableBehavior(() ->
  getData: ((url,successFunction, errorFunction) ->
    $.ajax(
      url:url,
      type:'GET',
      data: {this: "that"},
      success: (data) =>
        successFunction(data)
      error: (errorData) =>
        errorFunction
      )
    )
  )
  initialParse: ((data) ->
    thePlayer = JSON.parse(data)
    //updatePlayerUi(thePlayer)
    @getScores(thePlayer)
  )
  getScores: ((thePlayer) =>
    getData('player/'+thePlayer.id+/'scores', @displayScores, @uhOh)
  )

  displayScores: (data) =>
    //updateScoreUi(data)

  uhOh: (errorData) =>
   // displayError(errorData)
)

Trust this information proves helpful.

Cascade AJAX requests for data retrieval (similar to the process in Wolfram Alpha)

Answer №1

Similar questions

Have you ever wondered why req.body returns as undefined when using body parser?

Converting a PHP array into a jQuery array using <<<EOT syntax

Retrieving JSON data from PHP using jQuery

What is the method for including a message within the Ajax success function?

Guide on integrating a jQuery confirmation popup in CodeIgniter

Clicking on an absolute HTML element will instantly scroll back to the top of the page

Exploring Django and testing JSON/AJAX interactions

Sending data to a PHP page to maintain state in an Angular application

Transferring the link value to an AJAX function when the onclick event is triggered

Utilizing pure JavaScript to dynamically fetch HTML and JavaScript content via AJAX, unfortunately, results in the JavaScript

Position the division at the location of the cursor for particular usemap components

Fancybox operates successfully when I manually include a class, yet fails to function when utilizing jQuery's .addClass() method

I am experiencing difficulties with my focusin not functioning properly for the input element that I added

What is the best way to incorporate a sliding effect into my cookie form?

What is the method for configuring the URL of an ajax request to open in a separate window?

Collapse the Bootstrap Menu upon selecting a Link

Ways to activate a function using jQuery

Creating an array of multiple divs based on numerical input

The absence of data in a c# web api controller is causing issues with jQuery AJAX post requests

Using jQuery to control mouseenter and mouseleave events to block child elements and magnify images