Page 1 of 1
[SOLVED] Odd javascript behavior with title attribute help
Posted: Thu Aug 01, 2024 5:20 am
by Joe1234
I have a small javascript function that doesn't seem to be behaving normally. It is supposed to update the title of a button in the admin. The problem is it doesn't update the displayed title (when hovering) until the page is refreshed. I have sass and theme cache turned off. Other javascript stuff update without any issue, so I don't think it's a cache issue. Any thoughts?
Code: Select all
<div class="pull-right" style="padding-right: 10px">
<button type="button" data-toggle="tooltip" title="Delete All" class="btn btn-default hidden-md hidden-lg"><i class="fa fa-trash"></i></button>
<a href="{{ delete_all }}" data-toggle="tooltip" id="buttondeleteall" title="Delete All" class="btn btn-danger"><i class="fa fa-trash"></i></a>
</div>
Code: Select all
<script>
function setCookie(name, value) {
const button = document.getElementById('buttondeleteall');
button.setAttribute('title', 'Delete all ' + value + ' IPs');
//alert('Button title updated to: ' + button.getAttribute('title'));
}
</script>
Re: Odd javascript behavior help
Posted: Thu Aug 01, 2024 4:08 pm
by ADD Creative
How are you calling the setCookie function and are you sure it's being called?
Re: Odd javascript behavior help
Posted: Thu Aug 01, 2024 6:42 pm
by paulfeakins
ADD Creative wrote: ↑Thu Aug 01, 2024 4:08 pm
How are you calling the setCookie function and are you sure it's being called?
Exactly this, it's probably not being called.
Re: Odd javascript behavior help
Posted: Thu Aug 01, 2024 10:18 pm
by Joe1234
Code: Select all
<li class="active"><a href="#tab-ratelimit" data-toggle="tab" onclick="setCookie('tab', 'ratelimit')">{{ tab_1 }}</a></li>
Yes it's being called, already verified in the developer console...and also stated in OP, once the page is refreshed the change shows up.
Re: Odd javascript behavior help
Posted: Thu Aug 01, 2024 11:36 pm
by ADD Creative
If you inspect the element in the developer tool does the title actually change?
If you enter the following directly in the console, does it change?
Code: Select all
document.getElementById('buttondeleteall').setAttribute('title', 'Test');
Re: Odd javascript behavior help
Posted: Fri Aug 02, 2024 12:29 am
by Joe1234
Yes it shows it is changing in the console as soon as I click the tab.
I've never entered code directly in the console before, so I don't know if I entered it in the correct place, but here's a screenshot of where I did it and the result.
Re: Odd javascript behavior help
Posted: Fri Aug 02, 2024 1:38 am
by ADD Creative
Should be Id on the end not ID.
Re: Odd javascript behavior help
Posted: Fri Aug 02, 2024 2:25 am
by Joe1234
Right after typing the correction in and pressing ENTER under it pops up "undefined" and the actual button is not updated, but the info in the console shows the title changed.
Re: Odd javascript behavior help
Posted: Fri Aug 02, 2024 2:49 am
by ADD Creative
If it's a Bootstrap tooltip try the following or look at the Bootstrap documentation.
Code: Select all
document.getElementById('buttondeleteall').setAttribute('data-original-title', 'Test');
Re: Odd javascript behavior help
Posted: Fri Aug 02, 2024 4:14 am
by Joe1234
I actually tried that already. I noticed that attribute when I entered the information directly in the console. It didn't work.
Re: Odd javascript behavior help
Posted: Fri Aug 02, 2024 8:29 am
by nonnedelectari
You realize that after setting a cookie, it is only returned on the next request, not instantanious.
Re: Odd javascript behavior help
Posted: Fri Aug 02, 2024 1:04 pm
by Joe1234
Looks like the issue is with bootstrap. Here are two fixes.
Code: Select all
let button = document.getElementById('buttondeleteall');
$(button).attr('title', value).tooltip('fixTitle');
or
Code: Select all
let button = document.getElementById('buttondeleteall');
$(button).attr('data-original-title', value)