I'm using Ajax to add an array of data to a database.
Currently when "#bookingbutton" is clicked on this returns a block of HTML with ".select-room-button" button.
I've added the ".select-room-button" code in the success function of the original Ajax call for "#bookingbutton" otherwise it doesn't work.
I want to be able to click on the ".select-room-button" unlimited times without having to repeat the code loads of times in each success function if that makes sense? I feel like there must be a smarter way to do this but I'm not sure how?
jQuery(document).ready(function($) {
$('#bookingbutton').click(function() {
$('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$.ajax({
type: 'POST',
url: AJAX_URL,
data: $('#bookroom').serialize(),
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('#bookroom')[0].reset();
}
$('.booking-main').html(response.content);
$('.booking-side-response').html(response.sidebar);
$('.select-room-button').click(function() {
$('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$.ajax({
type: 'POST',
url: AJAX_URL,
data: $('#bookroom').serialize(),
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('#bookroom')[0].reset();
}
$('.booking-main').html(response.content);
$('.booking-side-response').html(response.sidebar);
}
});
});
}
});
});
});
For this you can use various selector for a single event to trigger ajax calls. So your code snippet will look like
jQuery(document).ready(function($) {
$(document).on("click",'#bookingbutton, .select-room-button', function() {
$('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$.ajax({
type: 'POST',
url: AJAX_URL,
data: $('#bookroom').serialize(),
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('#bookroom')[0].reset();
}
$('.booking-main').html(response.content);
$('.booking-side-response').html(response.sidebar);
}
});
});
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments