Alerts

Create

To dynamically create an alert, use the jtbAlert() function with create method and your desired parameters. The format is $(container).jtbAlert('create', { parameters }, callbackFunction); where:

• $(container) represents the element in which the alert will be placed,
• parameters represents the object that holds alert's details such as content and classes,
• callbackFunction (optional) stands for the function that you want to call after the creation of your alert element.

                        <!-- Define Alert Container -->
<div id='createHere'></div>

<!-- Assign Function to Button -->
<button class='jtbButton' onclick='createAlert()'>Create Alert</button>

<!-- Function to Create Alert -->
<script type='text/javascript'>
    function createAlert() {
        $('#createHere').jtbAlert('create', {
            html: "Hello! I'm an alert!",
            classes: "jtbAlert-closable jtbAlert-green jtbMB-0_5",
            // Additional parameters goes here
        });
    }
</script>
                    

For a personalized touch that aligns with your project's design, you can customize the parameters of the jtbAlert() function as outlined below:

Update

After creating an alert element, if you wish to modify any of its defined parameters, you can invoke the jtbAlert() function with update method and your new values.

At this point we need to state that the update method needs to be linked directly to alert element that you want to update instead of the container that holds the alert. The defined format for update is: $(alert).jtbAlert('update', { parameters }, callbackFunction); where:

• $(alert) represents the alert element that you want to update,
• parameters represents the object that holds alert's details such as content and classes,
• callbackFunction (optional) stands for the function that you want to call after the update action.

                        /*----- Update the alert element -----*/
$('#alertID').jtbAlert('update', {
    // Parameters goes here
});
                    

Show

To make a specific alert visible on your DOM, you can invoke the plugin with the "show" parameter. Unlike the previous two methods, show method has no attribute as parameters. So you can trigger the method as: $(alert).jtbAlert('show', callbackFunction); where:

• $(alert) represents the alert element that you want to make hidden,
• callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To Show hidden alerts -----*/
$("#alertID").jtbAlert("show");
                    

Hide

To hide a specific alert on your DOM, utilize the jtbAlert() function with the "hide" parameter. Like the "show" method, "hide" has no attribute as parameters. So you can trigger the method as: $(alert).jtbAlert('hide', callbackFunction); where:

• $(alert) represents the alert element that you want to make visible,
• callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To Hide alerts -----*/
$("#alertID").jtbAlert("hide");
                    

Toggle

To toggle visibility of a specific alert on your DOM (hide if visible and make it visible if hidden), utilize the jtbAlert() function with the "toggle" parameter. Like the previous two methods, "toggle" has no attribute as parameters. So you can trigger the method as: $(alert).jtbAlert('toggle', callbackFunction); where:

• $(alert) represents the alert element that you want to toggle visibility,
• callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To Change visibility of alert -----*/
$("#alertID").jtbAlert("toggle");
                    

Destroy

To permanently remove your alert element from the DOM, use the jtbAlert() function with the "destroy" parameter. Please be aware that after destruction, the element is completely removed from the HTML code and cannot be restored. You can trigger the "destroy" method as: $(alert).jtbAlert('destroy', callbackFunction); where:

• $(alert) represents the alert element that you want to destroy,
• callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To remove an alert completely -----*/
$("#alertID").jtbAlert("destroy");