How I get return value after trigger jquery?

Question

I have custom event.

$('body').on('searchPlaceOnWebMap', (event, payload) =>
  this.webMap.getPlaces(payload).then(data => data)
);

I get google places in my getplaces promise function, this function return data for me. If I write .then(data => { console.log(data) }) I see result.

Then I try get data after trigger

const result = $('body').trigger('searchPlaceOnWebMap', searchValue)

But I can't do it.

How I can get return value after trigger?

What is `this.$app.trigger`? To what library/framework does this belong? — t.niese, Jan 03 '19 at 20:25
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — ic3b3rg, Jan 03 '19 at 20:26
You're returning a Promise - read through the duplicate I marked to learn how to return its response instead — ic3b3rg, Jan 03 '19 at 20:27
@ic3b3rg it's not duplicate, because I know how i can promise result. I don't know how I get this after trigger method — Роман Татаринов, Jan 03 '19 at 20:29

t.niese · Accepted Answer · 2019-01-03T20:51:00.097

You can't directly return a value from an event handler. You would need to pass your Promise using the event object. jQuery does this automatically by assigning the value to the result property of the event object:

event.result

Description: The last value returned by an event handler that was triggered by this event, unless the value was undefined.

$('body').on('searchPlaceOnWebMap', (event, payload) => this.webMap.getPlaces(payload));

That is equal to:

$('body').on('searchPlaceOnWebMap', (event, payload) => {
  event.result = this.webMap.getPlaces(payload)
});

And to be able to access the returned Promise after your trigger, you need to create a custom event object that you pass to the trigger function:

var e = jQuery.Event("searchPlaceOnWebMap");
$('body').trigger(e, obj)

//e.result now holds the promise
e.result.then(value => {
  // do something with value
})

score 0 · Answer 2 · answered Jan 03 '19 at 20:44

The best answer to your question as asked is that you shouldn't try to access the results after the event handler gets triggered. Instead, you want to put the code that uses the promise result inside the .then() callback.

Think of it like this: Javascript programming is very event-driven. What this means is that you are writing code all the time that says "when foo happens, run function bar". And this type of code is often nested, and that's fine, for a sequence of events.

In your case, you want to write code that expresses the following:

Whenever a searchPlaceOnWebMap event gets triggered, make a call to get matching places based on the payload of the event. When that call returns, then do something with the results.

The way to do something with the results in this case, because .getPlaces() returns a promise, is to use .then(results => doSomething(results)) or async/await syntax if that is available for you.

But the important thing is to realize that because you don't know when the promise is going to resolve, you can't immediately access it's results immediately after triggering the event, because they won't be available yet.

Of course, you could store the promise object returned by .getPlaces() somewhere and access it elsewhere after you call .trigger(), but that's not a very good idea, as it introduces a side effect of altering external state, which makes for code that is difficult to test, debug and maintain. Steer clear of it if you can.

How I get return value after trigger jquery?

2 Answers2