How to send payload with makeRequest method

[emololftw]

Hi guys,

i have problem with sending payload throught makeRequest method. I have basic function:

confirm-modal.js

export default function confirmModal() {
	document.getElementById('modalConfirmDelete').addEventListener('show.bs.modal', (e) => {
		e.target.querySelector('.btn-ok').addEventListener('click', (c) => {
			naja.makeRequest('GET', e.relatedTarget.getAttribute('data-href'))
				.then(payload => payload.closeModal = true)
				.catch((error) => console.log(error))
		})
	});
}
confirmModal()

and

naja.js

naja.addEventListener('success', event => {

	let modal = event.detail.payload.closeModal;
	console.log(event.detail.payload) # SCREENSHOT FROM THIS LINE #
	console.log([
		event.detail.payload.closeModal,
		typeof event.detail.payload,
		modal,
	]);
    if (typeof modal !== 'undefined' && modal !== null) {
		document.querySelectorAll(".modal").forEach((el) => {
			const modal = bootstrap.Modal.getInstance(el)

			console.log(modal);

			modal?.hide();
		})
    }
});

The topic is, send payload by clicking inside modal window. Payload message is closeModal = true. In separated script naja.js i have condition for checking payload values. When i try to log values i got:

But when i try to access closeModal directly: event.detail.payload.closeModal i got undefined variable status. Did i miss something? PS: browser console is out of errors

[jiripudil]

Hi,

Naja's makeRequest doesn't resolve its promise until the request and response are fully processed – which includes dispatching lifecycle events. Therefore, the code in then(payload => payload.closeModal = true) is executed after the success listener, in which payload.closeModal is indeed undefined.

What you're seeing in the console is probably a consequence of how console.log is implemented in your browser. Quoting MDN:

Please be warned that if you log objects in the latest versions of Chrome and Firefox what you get logged on the console is a reference to the object, which is not necessarily the 'value' of the object at the moment in time you call console.log(), but it is the value of the object at the moment you open the console.

In your case, you don't need to abuse payload to pass along information; that's what options are for:

naja.makeRequest('GET', e.relatedTarget.getAttribute('data-href'), null, {closeModal: true});

and then:

naja.addEventListener('success', event => {
	let modal = event.detail.options.closeModal;
	// ...
}

Hope this helps :)

[emololftw]

Thank you very much sir. Your solution works!! I have form factory where in onSuccess[] method calling $this->payload->closeModal for forms in modal window. I tried to compare all situations into one with using payload. But now i understand.