Here's my button:
<button type="button" id="myButton" class="myButtonCSS" onclick="handleMyButtonClick()"> myButton! </button>
In my handleMyButtonClick() function I have a bit of logic, but what I want to accomplish is to add a waiting icon while it's doing that logic. I found out how to do this with this code:
<i class="fa fa-spinner fa-spin"></i>
If I add that to my original button statement it works, but it's ALWAYS there. I only want this to show up when clicked. I'm trying to add the "i class" to the button within my JavaScript on click function. I've tried to use .classList.add() but I must be doing it wrong, or approaching it wrong entirely. How can I do this?
What you need to do is update the inner html of button in the beginning of your method handleMyButtonClick()
var btn = document.getElementById('myButton');
btn.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...';
Then when you are done with your logic, reset the button back to the original state.
btn.innerHTML = 'myButton!';
Have a look at this complete code. Works just as you wanted.
function handleMyButtonClick(){
// Get button element
btn = document.getElementById('myButton');
// Set the spinner
btn.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...';
// Do the work. A sample method to wait for 3 second.
setTimeout(function(){
console.log("work done");
// When the work is done, reset the button to original state
btn.innerHTML = 'myButton!';
}, 3000);
}
<button type="button" id="myButton" class="myButtonCSS" onclick="handleMyButtonClick()"> myButton! </button>
I guess this will work out for you please check
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button type="button" id="myButton" class="" onclick="handleMyButtonClick()"> <span id='spin'></span>myButton! </button>
</body>
<script>
function handleMyButtonClick(){
$("#spin").addClass("fa fa-spinner fa-spin");
setTimeout(()=>{
//Do some logic
$("#spin").removeClass("fa fa-spinner fa-spin");
},5000)
}
</script>
</html>
As javascript uses single thread, and if your code is synchronous, you will not be able to see the style change immediately. Once the execution of the method is finished, then it will renders the UI with new style. So, in your case, it wont' show any difference. As you are showing and hiding by the end of the function. If you want show the spinner you have to hide the spinner in setTimeout().
Try following:
<button type="button" id="myButton" class="myButtonCSS" onclick="handleMyButtonClick()">
<i class="fa fa-spinner fa-spin"></i>
myButton!
</button>
function handleMyButtonClick() {
document.getElementById('myButton').classList.add('loading');
// your logic goes here
setTimeout(function() {
document.getElementById('myButton').classList.remove('loading');
}, 2000);
}
.myButtonCSS {
position: relative;
}
.myButtonCSS .fa-spinner {
display: none;
position: absolute;
left: 5px;
top: 5px;// you can modify according to your button height and width
}
.myButtonCSS.loading .fa-spinner {
display: inline-block;
}
Thank you for all of your suggestions but I have a far simpler answer.
tempButton = document.getElementById('myButton'); //snag button
tempButton.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...';
I'm VERY new to web programming. Sorry I cannot explain for you, but this 1 line change the code of my button within my JavaScript on click function instantly.
Related
In Bootstrap 4 I used the following sample code to update the title of the tooltip (where 'statusIcon' is the element, in this case is a font awesome icon, but same principal would apply for a button or anything else:
$(statusIcon).attr('data-original-title', 'Check Error logs for details').tooltip();
Razor page html element:
<i class="fas fa-circle fa-lg" id="statusIcon:#item.Id" data-bs-toggle="tooltip" data-bs-placement="right" title="Started" data-bs-animation="false" style="font-size: 1.5em; color: #28A745"></i>
Reading the manual for Bootrap 5, they don't appear to tell us how to achieve this with Vanilla JS
What I've tried so far in Javascript:
var statusIconId = 'statusIcon:' + pluginId + '';
var statusIcon = document.getElementById(statusIconId);
document.getElementById(statusIconId).setAttribute("data-bs-original-title", 'Check Error logs for details');
Am using variables in the element Id because I'm working with element in a Razor List View.
You can update the tooltip title by changing the data-bs-original-title attribute
$(function () {
// Init
$('[data-toggle="tooltip"]').tooltip()
// Update jquery
// $('#tt').attr('data-bs-original-title', 'New Tooltip Title');
// Update js
document.getElementById('tt').setAttribute('data-bs-original-title', 'New Tooltip Title');
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id='tt' class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip title">
Tooltip
</button>
Since Bootstrap 5.0 no longer requires jQuery, use document.querySelector(), then reinitialize the tooltip after modifying the element:
// initialize
const tooltipElement = document.querySelector('[data-bs-toggle="tooltip"]')
let bsTooltip = new bootstrap.Tooltip(tooltipElement)
// update
tooltipElement.title = 'New Title'
bsTooltip = new bootstrap.Tooltip(tooltipElement)
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<i class="fas fa-circle fa-lg" id="statusIcon:#item.Id" data-bs-toggle="tooltip" data-bs-placement="right" title="Started" data-bs-animation="false" style="font-size: 1.5em; color: #28A745"></i>
(updated to use your Razor page element)
Here is example if your tooltip is in loop, and you want to update the clicked button tooltip.
Use case:
Copy button in table row using clipboard.js
Code:
index.blade.php
<button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to clipboard" class="btn-clip btn btn-primary" data-clipboard-text="{{ user.domain }}">Copy</button>
index.js
let clipboard = new ClipboardJS('.btn-clip');
clipboard.on('success', function (e) {
let trigger_button = e.trigger;
// update the tooltip title, get the tooltip instance, and show it
trigger_button.setAttribute('data-bs-original-title', 'Copied!');
let btn_tooltip = bootstrap.Tooltip.getInstance(trigger_button);
btn_tooltip.show();
// reset the tooltip title
trigger_button.setAttribute('data-bs-original-title', 'Copy to clipboard');
});
I had to do the following to get it working with Bootstrap 5 and ClipboardJS 2:
<script src="js/clipboard.js"></script>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script>
$(document).ready(function () {
// Tooltip
$('[data-bs-toggle="tooltip"]').tooltip()
// Clipboard
const clipboard = new ClipboardJS('.btn-clipboard')
clipboard.on('success', function(e) {
$('.tooltip-inner').html('Copied!')
$(e.trigger).tooltip('update')
e.clearSelection()
})
clipboard.on('error', function (e) {
var fallbackMsg = /Mac/i.test(navigator.userAgent) ? 'Press \u2318 to copy' : 'Press Ctrl-C to copy'
$('.tooltip-inner').html(fallbackMsg)
$(e.trigger).tooltip('update')
})
})
</script>
<button type="button" class="btn btn-clipboard" data-clipboard-text="copied text" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click/touch to copy">Button</button>
only thing worked for me was disposing tooltip and rebuilding it again with setTimeout and 'enable' instead of 'show' for repeat hover..
$('#shareLink').on('click', function (e) {
$('#shareLink').tooltip('dispose').attr('title', 'Link copied!');
$('#shareLink').tooltip('show');
setTimeout( function () {
$('#shareLink').tooltip('dispose').attr('title', 'Copy link to Clipboard');
$('#shareLink').tooltip('enable');
}, 2000);
});
For bootstrap 5.2, use this:
const tooltipInstance = bootstrap.Tooltip.getInstance(tooltipElement);
tooltipInstance.setContent({ '.tooltip-inner': 'new title'});
where tooltipElement is either a html element or a string which represents the query selector. E.g. : '.tooltip'
I have a task in school and I think Javascript is really hard. Now in the beginning I need to google everything and I only find solutions in different libraries.
In this case I need to use Vanilla JS. When I click on logout button it need to toggle and show the login button.
In the task I cant change the HTML only add JS.
// student
<button class="signin-btn is-hidden">Log in </button>
<button class="signout-btn">Log out </button>
You can add click event listeners to both of the buttons to change its own display to none and display the other button.
var login = document.querySelector('.signin-btn'),
logout = document.querySelector('.signout-btn');
login.addEventListener('click', function(e){
this.classList.add('is-hidden');//adds is-hidden class
logout.classList.remove('is-hidden');//removes is-hidden class
});
logout.addEventListener('click', function(e){
this.classList.add('is-hidden');
login.classList.remove('is-hidden');
});
.is-hidden{
display: none;
}
<button class="signin-btn is-hidden">Log in </button>
<button class="signout-btn">Log out </button>
here's a extremely basic way to do it, I would recommend using more advanced techniques later
function change() {
document.getElementById('but').style.display = "none"
document.getElementById('butother').style.display = "block"
}
function changeother() {
document.getElementById('butother').style.display = "none"
document.getElementById('but').style.display = "block"
}
<html>
<body>
<button id="but" onclick='change()'>log in </button>
<button id="butother" onclick='changeother()'>log out </button>
</body>
</html>
Onclick button "button1" , we are displaying pop up box and hiding "button1".
but now we want to display the "button1" once we click on "close" button of "pop up box"
pop up close button code
<a href="javascript:void(0)" class="close">
<input type="button" onclick="showDiv()" style="display:none;" />
</a>
function showDiv() {
document.getElementById('aitcg-control-panel').style.display = "block";
}
button1 code
<div id="aitcg-control-panel"><button>button1</button></div>
Edit
I tried this code : document.getElementById('aitcg-control-panel').style.display = "block"; but still it didt worked for me....
After looking into your website you've provided i found out that the elements you wanted to reappear were removed from the page.
Why don't you just keep the button instead? Because after saving the item it refreshes the page anyway.
There should be any javascript code in the module (aitcg) you've installed on your site that removes the elements aitcg-toolbox-{{somenumber}} and aitcg-control-pane from the page.
I hope this could be of any help.
Is this what you were looking for? I'm sure there is a cleaner way to do it, but your question wasn't super clear.
function showDiv() {
document.getElementById('aitcg-control-panel').style.display = "block";
document.getElementById('ShowDivButton').style.display = "none";
}
function hideDiv() {
document.getElementById('aitcg-control-panel').style.display = "none";
document.getElementById('ShowDivButton').style.display = "initial";
}
div{
width: 200px;
height: 200px;
background: red;
display: none;
}
<button id='ShowDivButton' onclick="showDiv()">Open Div</button>
<div id="aitcg-control-panel" >
<button id='ShowDivButton' onclick="hideDiv()">Close Div</button>
</div>
I've sincerely not fully understood your question. But from what you've said, I'm assuming this is what you want:
function display(a) {
//Hide the button
a.style.display = "none";
//You need setTimeout for the code to wait for the alert to show the button again
setTimeout(function() {
alert('ok');
a.style.display = "block";
}, 100);
}
<button onclick="display(this);">Click me</button>
Hope it helps in some way and if this is not what you wanted, please reply.
after giving link for you website. i can tell you the reason why its not working for you.
on click of save design you are removing code for aitcg-control-panel
that's why you are not able to show it back
proof: before clicking code for button div exists
After click on save design
proof:
code is not there. that's why you are not able to show.
i debugged your code i found one function
_getControlPanelHtml: function()
{
if (this.config.editorEnabled) {
var returnHtml = "";
returnHtml += '<div id="aitcg-control-panel" style="display:none">' +
'<button onclick="return setproductlogin(\'null\', event);" class="aitcg-button apply-but" id="submit-editorApply-{{rand}}" title="{{apply_text}}">{{apply_text}}</button>' +
'<button class="aitcg-button reset-but" id="submit-editorReset-{{rand}}" title="{{reset_text}}">{{reset_text}}</button>' +
'</div>';
return returnHtml;
}
return '';
},
in this function they are returning '';
please change this function or other function to give you the same code what you had before clicking.
I am have a button like this:
<a class="btn btn-sm btn-danger employee" data-emp_id="23" href="javascript:void(0)" disabled>Resign</a>
If ajax response success it adds disabled to this button.
Here I need to this button has disabled on click event. If it has, need to alert different message, or if it hasn't I need to alert different message.
This is how I tried it.
$(document).on('click', 'a.employee', function(e){
var empID = $(this).data('emp_id');
if($(this).is(':disabled')) {
alert('message1');
} else {
alert('message2');
}
});
Also tried it something like this:
$(document).on('click', 'a.employee:not(:disabled)', function(e){
var empID = $(this).data('emp_id');
alert('here');
});
But, both are not working for me..
Hope somebody may help me out.
Thank you.
You cannot disable an anchor element, and adding a disabled attribute to it would mean that your HTML is invalid.
To solve this you could simply add a class to the element and key the click behaviour on that. Try this:
$(document).on('click', 'a.employee', function(e) {
e.preventDefault();
var empID = $(this).data('emp_id');
if ($(this).hasClass('disabled')) {
console.log('message1');
} else {
console.log('message2');
}
});
.disabled {
color: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn btn-sm btn-danger employee disabled" data-emp_id="23" href="#">Disabled</a>
<a class="btn btn-sm btn-danger employee" data-emp_id="23" href="#">Not disabled</a>
Also note the use of preventDefault() instead of adding javascript: to the href attribute of the a element.
Disabled is not an attribute and hence not a property of anchor tag
try this way
$(document).on('click', 'a.employee[disabled])', function(e){
var empID = $(this).data('emp_id');
alert('here');
});
I have two functions. One that hides a Edit and Delete button, and shows a Save button, and another one that does the opposite (hides save, shows edit and delete).
Right now the first button works: Save appears and Edit/Delete disappear, but the second function does not work: It hides Save but only shows Delete...somehow Edit is not being shown.
button code within a <td>
<td class="col-lg-3 col-lg-offset-1">
<span style="visibility:hidden" class="ID">#Html.DisplayFor(modelItem => item.ID)</span>
<span class="item-edit-button">
<button type="button" onclick="someFunction(this)" class=" btn btn-warning col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
</span>
<span class="item-save-button">
<button type="button" onclick="saveFunction(this)" class="btn btn-success col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Save</button>
</span>
<span class="item-delete-button"> // no use right now - ignore
<button type="button" onclick="deleteFunction(this)" class="btn btn-danger col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</span>
</td>
the JQuery
<script>
function someFunction(element)
{
$(element).hide();
$(element).closest("td").find("span.item-save-button").show();
$(element).closest("td").find("span.item-delete-button").hide();
}
function saveFunction(element)
{
$(element).hide();
$(element).closest("td").find("span.item-edit-button").show();
$(element).closest("td").find("span.item-delete-button").show();
}
</script>
http://jsfiddle.net/isherwood/BrP2a/
Hopefully I am just making some silly mistake.
ANSWER
I was accidentally hiding the button, not the span, thus when I tried to show my edit button's span it did not work as the button itself was hidden originally to fix this I had to use.
function someFunction(element) {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-save-button").show();
$(element).closest("td").find("span.item-delete-button").hide();
}
function saveFunction(element) {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-edit-button").show();
$(element).closest("td").find("span.item-delete-button").show();
}
You have hide the actual button by $(element).hide(); in someFunction and you are showing item-edit-button span so actual button is still hidden. Try this,
function saveFunction(element)
{
$(element).hide();
$(element).closest("td").find("span.item-edit-button button").show();
$(element).closest("td").find("span.item-delete-button").show();
}
You have to define the function before your HTML elements that mean if your elements are in body tag then you have to define the function in the head tag
then you can change the code little bit
function someFunction(element)
{
$(element).hide();
$(element).siblings("span.item-save-button").show();
$(element).siblings("span.item-delete-button").hide();
}
function saveFunction(element)
{
$(element).hide();
$(element).siblings("span.item-edit-button").show();
$(element).siblings("span.item-delete-button").show();
}
Here is the working fiddle for the code
http://jsfiddle.net/murli2308/YeZDe/
I think the problem is your use of the .closest() function, which finds the nearest parent of the given selector, starting with the selected element. See documentation for closest().
You probably are intending to use the .prev() and .next() functions.
You are hiding the Element (the button) but them Showing the TD. So the result is TD is visible but button itself is still hidden.
Here is the working code:
function someFunction(element)
{
$(element).closest("td").find("span.item-edit-button").hide();
$(element).closest("td").find("span.item-save-button").show();
$(element).closest("td").find("span.item-delete-button").hide();
}
function saveFunction(element)
{
$(element).closest("td").find("span.item-save-button").hide();
$(element).closest("td").find("span.item-edit-button").show();
$(element).closest("td").find("span.item-delete-button").show();
}
This doesn't answer your question directly, but I think it presents a simplification of your code that may help.
http://jsfiddle.net/isherwood/BrP2a/4/
<button id="item-edit" ...>...Edit</button>
...
$('#item-edit').click(function () {
$(this).hide();
$('#item-save').show();
$('#item-delete').hide();
});
$('#item-save').click(function () {
$(this).hide();
$('#item-edit, #item-delete').show();
});