A friend has a site on a platform where we cannot access the source code but can add our own JavaScript. Parts of the site load with Ajax.
I need to add an element when a particular piece of HTML loads. So far I've found:
$(document).ajaxComplete(function() {
$('.booking .simple_form input[type="submit"]').hide();
$('.booking .simple_form').append('<a id="login-btn" href="#">Login</a>');
});
But because there are 4 pieces of content loaded by Ajax on the page, this element gets appended 4 times.
I've tried wrapping that in an if statement, eg:
$(document).ajaxComplete(function() {
if ($('#login-btn').length) {
$('.booking .simple_form input[type="submit"]').hide();
$('.booking .simple_form').append('<a id="login-btn" href="#">Login</a>');
}
});
But this doesn't work - nothing appears.
Would anyone know how to I can just add 1 button?
Your condition is wrong.
if ($('#login-btn').length) {
$('.booking .simple_form input[type="submit"]').hide();
$('.booking .simple_form').append('<a id="login-btn" href="#">Login</a>');
}
Should be
if (!$('#login-btn').length) {
$('.booking .simple_form input[type="submit"]').hide();
$('.booking .simple_form').append('<a id="login-btn" href="#">Login</a>');
}
When there are no elements, you have to check the falsy and then enter. add ! before your condition.