Added meta-data, worked further on example

wet-boew/ajax-fetch/ajax-fetch-en.html

@@ -0,0 +1,69 @@
+---
+{
+	"title": "Ajax Fetch",
+	"language": "en",
+	"description": "Load content dynamically.",
+	"altLangPage": "ajax-fetch-example-fr.html",
+	"dateModified": "2024-07-17"
+}
+---
+<ul class="list-inline">
+	<li><a class="btn btn-primary" href="https://wet-boew.github.io/wet-boew/docs/ref/ajax-fetch/ajax-fetch-en.html">Documentation</a></li>
+	<li><a class="btn btn-primary" href="https://github.com/wet-boew/GCWeb/issues/new?title=Ajax%20Fetch">Questions or comments?</a></li>
+</ul>
+<div class="wb-prettify all-pre"></div>
+<p>
+	This example demonstrates the use of the Ajax Fetch plugin to load content dynamically.
+</p>
+<!-- Triggering the Ajax Fetch -->
+<button class="btn btn-default" type="button" id="ajax-fetch-trigger">
+	Fetch Content
+</button>
+
+<!-- Placeholder for the fetched content -->
+<div id="ajax-fetch-content" class="mrgn-bttm-lg"></div>
+
+<h2>Source code</h2>
+<pre><code>&lt;!-- Triggering the Ajax Fetch --&gt;
+&lt;button class=&quot;btn btn-default&quot; type=&quot;button&quot; id=&quot;ajax-fetch-trigger&quot;&gt;Fetch Content&lt;/button&gt;
+&lt;!-- Placeholder for the fetched content --&gt;
+&lt;div id=&quot;ajax-fetch-content&quot; class=&quot;mrgn-bttm-lg&quot;&gt;&lt;/div&gt;
+</code></pre>
+
+<!-- Include jQuery -->
+<script src="https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js"></script>
+<!-- Include WET-BOEW -->
+<script src="https://cdn.jsdelivr.net/gh/wet-boew/wet-boew-dist/release/wet-boew/js/wet-boew.min.js"></script>
+<!-- Include your custom JavaScript -->
+<script src="ajax-fetch.js"></script>
+<script>
+$( document ).ready( function() {
+	console.log("Document is ready");
+	$( "#ajax-fetch-trigger" ).on( "click", function() {
+		console.log("Fetch button clicked, triggering ajax-fetch.wb event...");
+		var fetchOpts = {
+			url: "./data/content.html",
+			nocache: true
+		};
+		$( this ).trigger( {
+			type: "ajax-fetch.wb",
+			fetch: fetchOpts
+		} );
+	} );
+
+	$( document ).on( "ajax-fetched.wb", function( event, fetchData ) {
+		console.log("Content fetched successfully", fetchData);
+		console.log("fetchData.pointer:", fetchData.pointer);
+		if (fetchData.pointer && fetchData.pointer.html) {
+			$( "#ajax-fetch-content" ).html( fetchData.pointer.html() );
+		} else {
+			console.log("fetchData.pointer is not defined or does not have an html method");
+		}
+	} );
+
+	$( document ).on( "ajax-failed.wb", function( event, fetchData ) {
+		console.log("Content fetch failed", fetchData);
+		$( "#ajax-fetch-content" ).html( "<p>Failed to load content.</p>" );
+	} );
+} );
+</script>

wet-boew/ajax-fetch/ajax-fetch.js

@@ -0,0 +1,121 @@
+/**
+ * @title WET-BOEW Ajax Fetch [ ajax-fetch ]
+ * @overview A basic AjaxLoader wrapper for WET-BOEW
+ * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
+ * @author WET Community
+ */
+( function( $, wb, DOMPurify ) {
+"use strict";
+
+/*
+	* Variable and function definitions.
+	* These are global to the plugin - meaning that they will be initialized once per page,
+	* not once per instance of plugin on the page. So, this is a good place to define
+	* variables that are common to all instances of the plugin on a page.
+	*/
+var $document = wb.doc;
+
+// Event binding
+$document.on( "ajax-fetch.wb", function( event ) {
+
+	// TODO: Remove event.element in future versions
+	var caller = event.element || event.target,
+		fetchOpts = event.fetch,
+		urlParts = fetchOpts.url.split( " " ),
+		url = urlParts[ 0 ],
+		urlSubParts = url.split( "#" ),
+		urlHash = urlSubParts[ 1 ],
+		selector = urlParts[ 1 ] || ( urlHash ? "#" + urlHash : false ),
+		fetchData = {},
+		callerId, fetchNoCacheURL, urlSub,
+		fetchNoCache = fetchOpts.nocache,
+		fetchNoCacheKey = fetchOpts.nocachekey || wb.cacheBustKey || "wbCacheBust";
+
+	// Separate the URL from the filtering criteria
+	if ( selector ) {
+		fetchOpts.url = urlParts[ 0 ];
+
+		if ( urlParts[ 1 ] ) {
+			selector = urlParts.slice( 1 ).join( " " );
+		}
+	}
+
+	if ( fetchNoCache ) {
+		if ( fetchNoCache === "nocache" ) {
+			fetchNoCacheURL = wb.guid();
+		} else {
+			fetchNoCacheURL = wb.sessionGUID();
+		}
+		fetchNoCacheURL = fetchNoCacheKey + "=" + fetchNoCacheURL;
+
+		urlSub = urlSubParts[ 0 ];
+		if ( urlSub.indexOf( "?" ) !== -1 ) {
+			url = urlSub + "&" + fetchNoCacheURL + ( urlHash ? "#" + urlHash : "" );
+		} else {
+			url = urlSub + "?" + fetchNoCacheURL + ( urlHash ? "#" + urlHash : "" );
+		}
+
+		fetchOpts.url = url;
+	}
+
+	// Filter out any events triggered by descendants
+	if ( caller === event.target || event.currentTarget === event.target ) {
+
+		if ( !caller.id ) {
+			caller.id = wb.getId();
+		}
+		callerId = caller.id;
+
+		// Ensure we don't allow jsonp load
+		if ( fetchOpts.dataType && fetchOpts.dataType === "jsonp" ) {
+			fetchOpts.dataType = "json";
+		}
+		if ( fetchOpts.jsonp ) {
+			fetchOpts.jsonp = false;
+		}
+
+		$.ajax( fetchOpts )
+			.done( function( response, status, xhr ) {
+				var responseType = typeof response;
+
+				if ( selector ) {
+					response = $( "<div>" + response + "</div>" ).find( selector );
+				}
+
+				fetchData.pointer = $( "<div id='" + wb.getId() + "' data-type='" + responseType + "'></div>" )
+					.append( responseType === "string" ? response : "" );
+
+				if ( !xhr.responseJSON ) {
+					try {
+						response = $( response );
+					} catch ( e ) {
+						response = DOMPurify.sanitize( xhr.responseText );
+					}
+				} else {
+					response = xhr.responseText;
+				}
+
+				fetchData.response = response;
+				fetchData.hasSelector = !!selector;
+				fetchData.status = status;
+				fetchData.xhr = xhr;
+
+				$( "#" + callerId ).trigger( {
+					type: "ajax-fetched.wb",
+					fetch: fetchData
+				}, this );
+			} )
+			.fail( function( xhr, status, error ) {
+				$( "#" + callerId ).trigger( {
+					type: "ajax-failed.wb",
+					fetch: {
+						xhr: xhr,
+						status: status,
+						error: error
+					}
+				}, this );
+			}, this );
+	}
+} );
+
+} )( jQuery, wb, DOMPurify );

wet-boew/ajax-fetch/data/content.html

@@ -0,0 +1,4 @@
+<div>
+	<h2>Fetched Content</h2>
+	<p>This content was fetched dynamically using the Ajax Fetch plugin.</p>
+</div>