Change Text on Button After Click and Again After AJAX
As web developers, we often need to provide visual feedback to users when they interact with our applications. One common scenario is changing the text on a button after a click event, and then changing it again after an AJAX request completes. In this blog post, we'll explore a simple and reusable solution to this problem using a custom jQuery.fn plugin.
The Problem
Imagine you have a button on your website that triggers an AJAX request when clicked. You want to provide some visual feedback to the user during this process, such as changing the button text to indicate that the request is in progress. Once the AJAX request is complete, you want to change the button text again to reflect the new state.
This is a common requirement in many web applications, including WordPress-powered websites. However, implementing this functionality from scratch can be tedious and repetitive, especially if you need to do it across multiple buttons or in different parts of your application.
The Solution
To solve this problem, we'll create a small, lightweight, and reusable custom jQuery.fn plugin that allows us to easily change the text on a button after a click event, and then change it again after an AJAX request completes.
Here's the code for the plugin:
jQuery.fn.extend({
spin: function() {
this.data("original-html", this.html());
var i = '<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i>';
this.html(i + this.html());
this.attr("disabled", "disabled");
},
reset: function() {
this.html(this.data("original-html"));
this.attr("disabled", null);
}
});
This plugin defines two new methods: spin()
and reset()
.
-
The spin()
method does the following:
- Stores the original HTML of the button in a data attribute.
- Prepends an animated spinner icon to the button text.
- Disables the button to prevent multiple clicks.
-
The reset()
method does the following:
- Restores the original HTML of the button.
- Removes the "disabled" attribute from the button.
Here's how you can use this plugin:
$("button").click(function() {
var b = $(this);
b.spin();
$.ajax({
url: "",
button: b,
success: function(result) {
// Do something with the AJAX response
b.reset();
}
});
});
In this example, when the user clicks the button, the spin()
method is called, which changes the button text and disables the button. Then, the AJAX request is made, and when it completes successfully, the reset()
method is called, which restores the original button text and enables the button again.
This approach has several benefits:
-
Reusability: The custom jQuery.fn plugin can be used across multiple buttons or even different parts of your application, reducing code duplication.
-
Simplicity: The plugin provides a simple and intuitive API, making it easy to use and integrate into your project.
-
Flexibility: The plugin allows you to customize the spinner icon or the button text as needed, making it adaptable to different design requirements.
-
Performance: The plugin is small and lightweight, adding minimal overhead to your application.
-
Accessibility: By disabling the button during the AJAX request, the plugin ensures that users cannot click the button multiple times, which can improve the overall user experience.
Real-World Example
Let's consider a real-world example to see how this plugin can be useful in a WordPress context.
Imagine you have a WordPress website that allows users to submit feedback or contact the site owner. You have a "Submit" button on the feedback form that triggers an AJAX request to the server. You want to provide visual feedback to the user during this process, so you decide to use the custom jQuery.fn plugin we've created.
Here's how you might implement this in WordPress:
-
Enqueue the required scripts and styles (jQuery, Font Awesome, and your custom plugin) in your WordPress theme or plugin:
function my_enqueue_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
wp_enqueue_script('my-custom-plugin', get_stylesheet_directory_uri() . '/js/my-custom-plugin.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
-
Add the custom jQuery.fn plugin code to a file called my-custom-plugin.js
in your WordPress theme or plugin directory:
jQuery.fn.extend({
spin: function() {
this.data("original-html", this.html());
var i = '<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i>';
this.html(i + this.html());
this.attr("disabled", "disabled");
},
reset: function() {
this.html(this.data("original-html"));
this.attr("disabled", null);
}
});
-
In your feedback form, add the click event handler to the "Submit" button:
<form id="feedback-form">
<!-- Form fields -->
<button type="submit" class="submit-button">Submit</button>
</form>
<script>
jQuery(document).ready(function($) {
$('#feedback-form').submit(function(e) {
e.preventDefault();
var button = $(this).find('.submit-button');
button.spin();
$.ajax({
url: ajaxurl, // WordPress AJAX endpoint
type: 'POST',
data: $(this).serialize(),
success: function(response) {
// Handle the AJAX response
button.reset();
},
error: function(xhr, status, error) {
// Handle AJAX errors
button.reset();
}
});
});
});
</script>
In this example, when the user clicks the "Submit" button on the feedback form, the spin()
method is called, which changes the button text and disables the button. The AJAX request is then made to the WordPress AJAX endpoint. When the request completes, either successfully or with an error, the reset()
method is called, which restores the original button text and enables the button again.
This approach provides a seamless user experience, giving the user visual feedback during the AJAX request and ensuring that the button cannot be clicked multiple times, which could lead to duplicate submissions or other issues.
Conclusion
In this blog post, we've explored a simple and reusable solution to the problem of changing the text on a button after a click event and again after an AJAX request. By creating a custom jQuery.fn plugin, we've encapsulated this functionality in a way that can be easily used across multiple buttons or different parts of a web application, including WordPress-powered websites.
This approach helps improve the user experience, reduce code duplication, and make your web applications more maintainable and scalable. Feel free to use and adapt the code provided in this article to fit your specific needs.
If you're interested in learning more about improving the conversion rates of your website, be sure to check out Flowpoint.ai. Flowpoint's AI-powered analytics and recommendations can help you identify and fix technical, UX, and content-related issues that may be impacting your website's performance.
Happy coding!
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.