Welcome to LoadMeThere (LMT), an innovative JavaScript utility designed to simplify and enhance the dynamics of your web applications through efficient Ajax interactions. At its core, LMT revolutionizes the way content is loaded and presented on your web pages, making it an indispensable tool for modern web development.
My personal opinion, LMT is something that should have already come out-of-the-box with jQuery.
Traditionally, dynamically loading content into a part of your web page via Ajax requires writing custom JavaScript or jQuery for each trigger element, such as links or buttons. This process involves setting up event listeners, crafting Ajax requests, and handling the insertion of returned content into the DOM. It's repetitive, time-consuming, and prone to errors.
LMT changes the game entirely by encapsulating all these functionalities into a highly versatile and easy-to-use package. Here's what makes LMT so powerful:
At the heart of LMT is the loadMeThere() function. This powerhouse is equipped with everything needed to make Ajax requests using GET, POST, and other methods, and to handle the response effectively. But it doesn't stop there – loadMeThere() offers extensive flexibility in how the response is integrated into your webpage:
- Content Placement: Choose exactly where to place the loaded content – inside, at the beginning, at the end, before, after, or even replace the target element entirely.
- Return Response: Opt to return the response directly (note: this makes the Ajax call synchronous and may block the UI).
- Custom Callbacks: Specify a custom callback function to process the response as you see fit.
- and more (see below)...
What truly sets LMT apart is its dynamic listener. This feature allows any HTML element to become an Ajax trigger with just one data-* attribute. This transforms static elements into interactive triggers that can load content, toggle states (like turning a light on and off), and more – all with minimal coding.
- Simplicity in Action: Turn a regular link into an Ajax trigger by adding the
loadmethereclass and adata-targetattribute, like so:<a href="/path-to/file.php?foo=bar" class="loadmethere" data-target="mySpecialDIV">My Link</a> - Browser History Management: LMT offers innovative ways to manage the browser history. Using just
href, the URL is loaded via Ajax and added to the browser history. Usingdata-hrefinstead, the URL is loaded but not added to the history – perfect for actions that don't represent page changes. And if you need both, specifying bothhrefanddata-hrefwill load one URL via Ajax while pushing the other to the history, giving you full control over the user's navigation experience. - Furthermore, the listener provides a corresponding data attribute for all LMT options.
LMT is designed for developers who want to enhance their web applications with dynamic content loading but don't want to get bogged down in the intricacies of Ajax and DOM manipulation for every new trigger. Whether you're adding interactive content, building a single-page application, or just improving the user experience on your website, LMT provides the tools you need with unprecedented ease and flexibility.
Below are examples illustrating how to set up LoadMeThere (LMT) for both manual triggering and automatic triggering via the listener.
Please remember that you must have jQuery loaded. Load the loadmethere.min.js after jQuery with <script src="/js/loadmethere/loadmethere.min.js"></script> (adjust the path accordingly).
Additionally, you should also include the CSS file. This is not mandatory, but it gives all elements with the loadmethere class the "pointer" cursor and includes a simple loading animation if you want to use the fullscreen-loader. Include the CSS in the header: <link rel="stylesheet" href="/js/loadmethere/loadmethere.min.css"> (adjust the path accordingly).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LMT Setup</title>
<link rel="stylesheet" href="js/loadmethere/loadmethere.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="js/loadmethere/loadmethere.min.js"></script>
</head>
<body>
<h1>Hello-LMT</h1>
</body>
</html>To manually trigger LMT, you need to call the loadMeThere() function with the appropriate parameters. Here’s a basic example:
<div id="contentArea">This is where the AJAX content will be displayed.</div>
<button id="loadContentButton">Load Content</button>
<script>
// when the button #loadContentButton is clicked, load content from 'example.html' into the '#contentArea'
$('#loadContentButton').click(function() {
loadMeThere('example.html', 'contentArea');
});
</script>In this example, clicking the "Load Content" button will load content from example.html into the div with the ID contentArea.
To use LMT's built-in listener for automatic triggering, simply add the necessary data-* attributes to your HTML element. Here you can remove the entire script part. LMT will listen for clicks on these elements and load content accordingly:
<div id="contentArea">Some predefined content in my special DIV</div>
<a href="example.html" class="loadmethere" data-target="contentArea">Load Content</a>In this setup, clicking on the link with the class loadmethere automatically loads the content from example.html into the div with the ID contentArea. No additional JavaScript is needed for the triggering since LMT listens for clicks on elements with the loadmethere class and handles them based on the data-* attributes provided.
The loadMeThere function is designed to enhance the dynamic content loading of your web applications. Here is a complete example with all parameters:
<script>
$('#loadContentButton').click(function() {
loadMeThere(
'example.html', // requestURL: the URL to load
'contentArea', // targetContainer: target element
'in', // position: where to load the content (relative to target element)
{ // options: see descriptions below
ajaxLoadParameter: 'ajaxload=true',
requestType: 'GET',
postData: {firstName: 'John', lastName: 'Doe'},
showResponse: true,
onComplete: 'myCustomFunction',
scrollToTarget: true,
scrollToTargetOffset: '100px',
disableCustomElement: '#myCustomElement',
disableAnyLMT: true,
animationTime: 1200,
fullscreenLoading: true,
loadingText: 'Please wait...',
showContainer: '#myCustomLoadingContainer',
returnContent: false,
}
);
});
</script>Below are the parameters that you can use to customize the function's behavior.
requestURL(String): The URL from which to load the content. This parameter is essential as it defines the source of the data to be fetched.targetContainer(String): The ID of the container element where the content will be inserted. This parameter is crucial for determining where on the page the fetched data should be placed. Ifoptions.showResponseis set tofalse, this parameter is not mandatory.position(String) [Default: 'in']: The position where the content will be inserted relative to the target container. Possible values include 'before', 'prepend', 'in', 'append', 'after', and 'as'. This allows you to customize how the content integrates into your page's layout. Note: if you use 'as', you will replace the targetContainer! So a second click wont work accordingly if your response HTML doesn't bring back the removed targetContainer including the id tag.options(Object) [Default: {}]: A collection of additional options for customizing the loading behavior:ajaxLoadParameter(String) [Default: 'ajaxload=true']: The parameter added to the request URL to indicate an AJAX loading process. I use a lot of AJAX calls to PHP files where the files behave differently depending on whether they are called via AJAX or not. This parameter is essential for making sure that the PHP file knows that it is being loaded via AJAX. If you don't use a parameter to indicate an AJAX loading process, you can ignore this option, but keep in mind that it is still there.requestType(String) [Default: 'GET']: The type of the AJAX request. While 'GET' and 'POST' are the most common, other valid HTTP methods can also be used. This option is essential for defining how data is sent to the server.postData(Object) [Default: null]: The data to be sent with the AJAX request. This is particularly important for 'POST' requests.showResponse(Boolean) [Default: true]: Controls whether the loaded response content should be displayed or not. This parameter is useful when using a custom callback function and handling the placement manually, here you don't want to show the response automatically - or when you want to use thereturnContentoption and don't need the response shown.onComplete(Function) [Default: null]: A callback function that is called after the content has been successfully loaded. The response content is passed as the first parameter to the function.scrollToTarget(Boolean) [Default: false]: Determines whether the page should scroll to the target container after loading the content.scrollToTargetOffset(Number) [Default: 0]: Specifies an offset value for the scroll-to-target functionality.disableCustomElement(Boolean) [Default: false]: Allows you to disable a custom element while loading is in progress. Use '#myElement' or '.allMyElements'.disableAnyLMT(Boolean) [Default: true]: Whether to disable all elements with the class 'loadmethere' during the loading process to prevent multiple simultaneous loads.animationTime(Number) [Default: 600]: The duration (in milliseconds) of the animation when inserting the content.fullscreenLoading(Boolean) [Default: false]: Whether to display a fullscreen loading overlay during the loading process. Useful for AJAX calls that take a long time to load. Overlay shows with a delay to prevent flashing of the page. The overlay is automatically removed when the content is loaded.loadingText(String) [Default: '<div class="loadmethere-loader"></div>']: HTML content to be displayed in the fullscreen loading overlay. The default value is a simple loading-circle (you need to include the CSS file to make it work).showContainer(String) [Default: null]: A selector used to filter the response content to be shown. Useful for partial content updates. If your requestURL has multiple elements, you can specify a selector to filter the elements to be shown. Use '#myElement' will show only this element in targetContainer or use '.allMyElements' which will show all elements with the class 'allMyElements'.returnContent(Boolean) [Default: false]: Determines whether to return the filtered content for further processing. Note that setting this totruewill make the AJAX call synchronous and may block the UI.
The LMT listener empowers HTML elements to act as dynamic triggers for Ajax content loading, transforming them into powerful tools for interactive web development.
<a
class="loadmethere" <!-- dont forget the class -->
href="example.html"
data-href="action.php"
data-target="contentArea"
data-position="append"
data-load-parameter="ajaxload=true"
data-request-type="POST"
data-post="{firstName: 'John', lastName: 'Doe'}"
data-post-callback="myPrePOSTCallback"
data-scrollto-target="true"
data-scrollto-offset="0"
data-disable-lmt="true"
data-disable-element="#myCustomElement"
data-fullscreen-loading="true"
data-loading-text="Please wait..."
data-show-response="true"
data-show-container=".myContainers"
data-return-content="false"
>Foo bar</a>Below, find detailed descriptions of the data attributes and their functionalities which you can assign to any HTML element to leverage the LoadMeThere capabilities. Please also consult the corresponding parameters in the loadMeThere() function itself for further details and customization options.
href: The standard hyperlink reference attribute. Ifdata-hrefis not provided, this URL is used to fetch data and is pushed to the browser history if applicable.data-href: An alternative URL for Ajax content loading without updating the browser history. If you use only data-href, nothing will be pushed to the browser history only data-href URL will be loaded.- using
hrefanddata-hreftogether will load content with AJAX from data-href but push URL to browser history from href. data-target: The ID of the container element where the Ajax-loaded content will be placed. Essential for determining the content's destination within your webpage. This is not mandatory if you use thereturnContentoption.data-position[Default: 'in']: Specifies how the loaded content will be inserted relative to the target container. Options include 'before', 'prepend', 'in', 'append', 'after', and 'as', allowing detailed control over content placement.data-load-parameter[Default: 'ajaxload=true']: An additional parameter appended to the Ajax request URL, useful for server-side processing decisions.data-request-type[Default: 'GET']: The HTTP method used for the Ajax request. While 'GET' is standard for content retrieval, 'POST' and other methods are supported for more complex interactions.data-post[Default: null]: The data to be sent with the AJAX request. You can use this as a JSON string to send as postData to the server or use data-post-callback to dynamically generate the postData. If both are given, data-post-callback will take precedence.data-post-callback: The name of a JavaScript function to be called for generatingpostData. This allows dynamic creation of request payloads before sending the AJAX request. This function should return a JSON string or a JavaScript object. If you use data-post and data-post-callback, data-post will be ignored.data-scrollto-target[Default: false]: Determines whether the browser should scroll to the target container after content loading, improving user focus and interaction.data-scrollto-offset[Default: 0]: An offset applied when scrolling to the target container, allowing fine-tuning of the final scroll position.data-disable-lmt[Default: true]: Globally disables all LMT-trigger elements on the page during Ajax requests, preventing multiple simultaneous operations.data-disable-element: Selector for specific elements to be disabled during the Ajax request, enhancing user experience by preventing redundant interactions.data-fullscreen-loading[Default: false]: Enables a fullscreen loading overlay during Ajax operations, providing clear feedback that content is being loaded.data-loading-text[Default: '']: Custom HTML content displayed within the fullscreen loading overlay.data-show-response[Default: true]: Controls whether the Ajax-loaded content should be displayed within the target container.data-show-container: A CSS selector for filtering which parts of the Ajax response should be displayed, allowing partial updates of page content.data-return-content[Default: false]: If set to true, the Ajax request is performed synchronously, and the loaded content is returned. Note: This option should be used sparingly as it can affect user experience by blocking the UI.
These attributes enable you to configure how each element with the loadmethere class should behave upon interaction, making your web pages more dynamic and responsive without the need for bespoke JavaScript for each trigger.
Please check folder examples for more detailed examples.