Alpine.js

Das Framework alpine.js ist sehr nützlich um interaktive Frontend-Seiten schnell und sauber hin zu bekommen. Wenn man jedoch einen AJAX Call durchführen möchte und und aus irgendwelchen Gründen kein .fetch() nutzen kann, muss man auf das bekannte XMLHttpRequest() Objekt zurück greifen. Innerhalb des Responses eines solchen Calls, kann man jedoch nicht mehr per this auf die Alpine.JS Modul-Instanz zurück greifen.

Dafür gibt es aber einen Workaround um das aktuelle Alpine.js Modul global verfügbar zu machen. Der Trick ist this im Modul Context auf ein window Objekt zu schreiben im init()

Mini Beispiel zur Verdeutlichung:

// dummy data
function alpinejs_dummy_ajax_app(){
	return {
		'dummy_data' : false,
		init() {
			window.this_alpinejs_module = this; // makes it globally available
			change_data_in_alpinejs_module();
			console.log( this.dummy_data ); // --> true
		}
	}
}
 
// This could be a new XMLHttpRequest() success-handler
function change_data_in_alpinejs_module(){
	window.this_alpinejs_module.dummy_data = true;
}

Im Beispiel mit dem Ajax call sieht es dann so aus:

function alpinejs_dummy_ajax_app(){
 
	return {
		'dummy_data' : function() {
			return { 
				'dummy_json' : 'Data 123' 
			};
		},
 
		'repsonse_json' : false,
 
		'submit_data' : function(  ) {
 
			// AJAX POST VORBEREITEN
			const ajax_post_url =  window.globale_ajax_url; // Kommt von PHP oder so.
			const xhttp         = new XMLHttpRequest();
			xhttp.open( 'POST', ajax_post_url, true );
			xhttp.setRequestHeader("Content-Type", "application/json");
			xhttp.onreadystatechange = function() {
				if(this.readyState == 4 && this.status == 200) {
					const response_json = JSON.parse( this.response );
					console.log( "Antwort: " );
					console.log( response_json );
 
					// Zurück auf dieses Modul die Daten schreiben 
					// Dafür unten die Zeile mit (*) beachten!
					window.this_alpinejs_module.repsonse_json = response_json; // <-- Important
 
					return true;
				}
			};
 
			// AJAX DURCHFÜHREN
			const data = JSON.stringify( this.dummy_data() );
			xhttp.send( data );
		},
 
		init() {
			console.log( "Verfügbare DATEN: " );
			console.log( this.dummy_data() );
 
			// POST CALL DIREKT STARTEN
			this.submit_data();
 
			// (*) DAS IST WICHTIG, DASS WIR DATEN AUS DEM AJAX RESPONSE ZURÜCK
			// INS ALPINE SCHREIBEN KÖNNEN
			window.this_alpinejs_module = this; // <-- I M P O R T A N T
		}
	}
}