CODEWITHSUNDEEP
javascriptajax
jumps4fun
jumps4fun

Reputation: 4132

How should I deal with an ajax get function, that is reused across multiple pages?

I have a web application with booking/reservation-functionality. One of my core functions is to check whether a booking conflicts with other bookings, and this function is used across multiple pages. Its return data is not usually loaded with a page, as it's request parameters are dependent upon user input. In other words:

However, an ajax function is not suitable for my intended use. The wrapper function will return nothing, before the ajax call is complete, due to it's asynchronous nature. If i need to execute something with the returned data, it should be inside the success-function of the ajax call, but as I need different things to happen, based on in which page, and which situation the data is needed.

I see three solutions to my problem. I just can't decide which is the best approach, or if there might be a fourth and better option:

1. Skip the abstraction of the ajax function. In other words, just copy/paste it into every function where I need the data, and voilla; I would have the success-condition function available at all times.

2. Pass a succes-function as a parameter. If i need something dynamic to happen, I could make it so, by passing a function to the ajax-wrapper function, and making sure that the passed function accepts the ajax returned data as it's own parameter.

3. Make the ajax call synchronous. Possible, but kind of ruins the concept of ajax (actually I am also using JSON, so that will make ajax into sjoj).

Honestly, I really can't see that either of the solutions stand out as the winner here. I would greatly appreciate any help.

Upvotes: 1

Views: 51

Answers (2)

gyosifov
gyosifov

Reputation: 3223

I suggest using an event based approach. Inside ajax success you can fire (trigger) an event for example booking-check-complete and the specific page handles the event the way it needs.

This way you keep the benefits of the ajax being well - asynchronous and keep the pages decoupled.

For uses like this I use jQuery event mechanism, but there are also other libraries available. Check it out here - trigger

For example in page one you have:

$( document ).on( "booking-check-complete", function( event, param1, param2 ) {
  alert( "Hello from page 1" );
});

On the second page you have:

$( document ).on( "booking-check-complete", function( event, param1, param2 ) {
  alert( "Hello from page 2" );
});

And in ajax success: 

$( document ).trigger( "booking-check-complete", [ "Custom", "Event" ] );

NOTE You don't need jQuery to use events as described here This uses plain javascript, but it is not compatible with IE.

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

Upvotes: 1

Quentin
Quentin

Reputation: 943939

  1. No. That violates DRY.
  2. Yes. This is idiomatic JavaScript.
  3. No. That locks up the UI (and synchronous XHR is deprecated).

Option 2 is the standout winner.

Upvotes: 1

Related Questions