I have a button:
Now I have a method on that button:
function showPreview(event) {
var button = event.target;
$(button).empty().html('<i class="fa fa-spinner fa-pulse"></i>');
$.post(
...,
function (data) {
...
$(button).empty().html('<i class="fa fa-fw fa-file-pdf-o"></i> Preview');
}
);
}
Sometimes (rarely) when I click the button in Chrome, it ends up looking like this:
But when I check in the page inspector in Chrome, it reveals that there's only 1 icon and 1 "Preview" string in the button.
I've tested this with other browsers, and none share a similar bug.
Browsers I've tested this with:
Internet Explorer 11
Firefox
Opera
Safari
I have concluded this to be a Chrome bug, and this is unacceptable behaviour. As you can see I'm already trying to empty the button before adding new content to no avail. Is there any other workaround for this specific problem?
Here's my JSFiddle: https://jsfiddle.net/spe0asbo/2/
Please take note that this only happens rarely. It might not happen at all to you.
Give the button an ID and replace event.target with the button element itself.
HTML:
<button id='btn01' type="button" onclick="javascript:showPreview(event);">
<i class="fa fa-fw fa-file-o"></i> Preview
</button>
JS:
function showPreview(event) {
var button = $('#btn01');
$(button).attr("disabled", "disabled");
$(button).html('<i class="fa fa-fw fa-spin fa-spinner"><i>');
setTimeout(function() {
$(button).html('<i class="fa fa-fw fa-file-o"></i> Preview');
$(button).removeAttr("disabled");
}, 2000);
}
See the JSFiddle link here : https://jsfiddle.net/4h5pehr9/
It only happened when I double-clicked the button.
Check my changes: https://jsfiddle.net/ag0ztLna/3/
function showPreview(event) {
var button = event.target;
$(button).attr("disabled", "disabled");
$(button).html('<i class="fa fa-fw fa-spin fa-spinner"><i>');
setTimeout(function() {
$(button).html('<i class="fa fa-fw fa-file-o"></i> Preview');
$(button).removeAttr("disabled");
}, 2000);
}
Related
I have a button that shows a bootstrap modal, it has an onclick attribute set to a function,
The button:
<span style="color:blue;margin-left: 2rem;" data-id="{{student.id}}" id="{{student.id}}"
type="button" data-bs-toggle="modal" data-bs-target="#grade-modal"
onClick="getEnrolledSubjects(this.getAttribute('data-id'))">
<i class="fas fa-plus"></i>
</span>
My javascript function:
function getEnrolledSubjects(id){
var modal = document.getElementById('grade-modal')
modal.addEventListener('shown.bs.modal', function(){
console.log(id)
}
}
at first, it looks fine because it will only log the id once, but when I close the modal and open it again, it will log 2 times, then 3 times, and so on... it goes incrementally. how can i fix this?
as Bootstrap Modal documentation
You can Use event.relatedTarget:
<span style="color:blue;margin-left: 2rem;" data-id="{{student.id}}" id="{{student.id}}" type="button" data-bs-toggle="modal" data-bs-target="#grade-modal">
<i class="fas fa-plus"></i>
</span>
without onClick event
const modal = document.getElementById('grade-modal')
modal.addEventListener('shown.bs.modal', function(event){
const button = event.relatedTarget
const id = button.getAttribute('data-id');
console.log(id)
})
I am trying to change the text of a button when clicked and back to normal when clicked again. The button is using a font awesome icon so figured I would try using this.html instead of this.text, but for some reason it is not recognising the HTML I am indicating?
If I change the HTML on the else statement then it will change on click which is what makes me think it is an issue with it not recognizing my HTML.
I know it might be something really stupid but cant seem to figure it out.
$(document).ready(function(){
$("#submitbutton").on("click", function(){
if($(this).html()=="View code <i class=\"fas fa-chevron-right fa-xs\"></i>")
{
$(this).html("Close code <i class=\"fas fa-chevron-right fa-xs\"></i>");
} else {
$(this).html("View code <i class=\"fas fa-chevron-right fa-xs\"></i>");
}
})
});
<div class="getcodebuttoncontainer">
<button
type="button"
class="btn-primary"
id="submitbutton"
onclick="retrieveData()"
>View code <i class="fas fa-chevron-right fa-xs"></i></button>
</div>
It seems as if the only change is the text ( "View || Close ") so you can simply put that variable text in spans - one with a display: none styling and then on the click - toggle the visibility of each.
$(document).ready(function(){
$("#submitbutton").on("click", function(){
$(this).find('span').toggle();
})
});
#submitbutton span:nth-of-type(2) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="getcodebuttoncontainer">
<button
type="button"
class="btn-primary"
id="submitbutton"
>
<span>View</span>
<span>Close</span>
code <i class="fas fa-chevron-right fa-xs"></i>
</button>
</div>
I am just wondering about how can I emulate an ENTER key clicking a button. It is designed as this image, as it is an input field, its working with the enterkey and its inserting the text correctly.
But the button designed has to work as if the "enter" key has been pressed.
For example:
Text: "Hi there"+ENTER KEY --> WORKS WELL;
Text: "Hi there"+ Click button as ENTER KEY PRESSED --> I dont know how to implement it.
The code is the below:
<div class="message-input">
<input name="message" id="textEle" placeholder="Escribe aquí...">
<button class="sendMsg">
<span id="sendBtn" class="fa-stack fa-2x visible-xs">
<i class="fa fa-circle fa-stack-2x" style="color:#0f2638"></i>
<i class="fa fa-paper-plane-o fa-stack-1x fa-inverse"></i>
</span>
</button>
</div>
I have already the following javascript code, where is cheking every single input key and when its the ENTER one it makes the insert action:
Template.channel.events({
'keyup [name="message"]' ( event, template ) {
handleMessageInsert( event, template );
}
}
Please let me know if there is any way to do it.
Thanks a lot!
So with native JS:
// buttonEle would be your button, textEle would be your text input
buttonEle.addEventListener('click', function (e) {
var event = document.createEvent('KeyBoardEvent');
event.initEvent('keypress', true, false);
event.key = 'Enter';
event.keyCode = 13;
// now dispatch the event from whichever element your other listener is bound on im gonna assume this is the text input
textEle.dispatchEvent(event);
});
Or with jquery
$(buttonEle).on('click', function (e) {
var event = jQuery.event('keypress', {'keyCode': 13, 'key': 'Enter'});
$(textEle).trigger(event);
});
#prodigitalson's answer in the meteor way:
template.html
<template name = "magic">
...
...
<div class="message-input">
<input name="message" placeholder="Escribe aquí...">
<button class="sendMsg">
<span id="sendBtn" class="fa-stack fa-2x visible-xs">
<i class="fa fa-circle fa-stack-2x" style="color:#0f2638"></i>
<i class="fa fa-paper-plane-o fa-stack-1x fa-inverse"></i>
</span>
</button>
...
...
</template>
template.js
Template.magic.events({
// when you click the button
'click .sendMsg' (event){
event.preventDefault();
// same #prodigitalson's code
var e = jQuery.Event("keypress");
e.which = '13';
$(textEle).trigger(e);
}
});
Edit : Check out this answer for simulating a keypress.
Font awesome is not working for me when I try to change the value of an element using a javascript.
Javascript:
function onClick() {
document.getElementById("dicebutton").value='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
}
HTML code for button:
<form>
Bet<br>
<input type="text" name="bet"><br>
Chance<br>
<input type="text" name="chance"><br>
<h3>Payout: 0.0000BTC</h3>
<input value = "Roll dice" id="dicebutton" onClick="onClick()" type="button" style="vertical-align:middle"></input>
</form>
Result:
Notice how the green button spits raw HTML while the top of the website correctly displays the fonts? How can I fix this?
Use the element.innerHTML = content; syntax if you want to add HTML. ".value" only passes data as a string.
So
document.getElementById("dicebutton").innerHTML='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
Edit:
I just realized you are using an < input > field for your button. This wont work in that case. The only value for an < input > field that you can use to change the button text is value= as you tried. Unfortunately "value" treats anything assigned to it as a string.
Instead of an < input > field, you will need to use an element that you can attach HTML to - for example, an < a > tag, a < button > tag, or simply using a styled div as a button. This will allow you to pass the HTML to it without having to use "value".
Use a <button> tag instead of <input> and change
document.getElementById("dicebutton").value
to
document.getElementById("dicebutton").innerHTML
You must use button instead of input button, then update the content with innerHTML.
Example:
Javascript:
function onClick() {
// you can you "this.innerHTML" too
document.getElementById("dicebutton").innerHTML='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
}
HTML:
<button id="dicebutton" onclick="onClick()" style="vertical-align:middle">Roll dice</button>
I've been stuck all day on a project I'm working on. All funcitonality is there, I'm just having trouble with the jquery, can someone help me out?
here is a visual of the application:
Pretty simple, when I click "like post" a function is called via ajax to run a update to the count on the database, also the same when I press "Dislike"
My problem is with the JQuery, I can't seem to figure out how to make it so when "Like post" is clicked, it is changed to "Already Liked" and the "Already Disliked" changed to "Dislike"
CSS Classes:
"Like Post" = fa fa-thumbs-up like_btn
"Dislike Post" = fa fa-thumbs-down dislike_btn
"Already Liked" = fa fa-check like_btn
"Already Disliked" = fa fa-check fa-check-dislike dislike_btn"
Here is the current JQuery, I've tried a few different things but nothing seems to be working, any suggestions I greatly appreciate.
$('.fa-thumbs-up').click(function() {
var annid = $(this).attr('id');
update_likes(annid, 'like');
//code goes here
});
$('.fa-thumbs-down').click(function() {
var annid = $(this).attr('id');
update_likes(annid, 'dislike');
//code goes here
});
UPDATED JFIDDLE: http://jsfiddle.net/T9wvL/2/
It's easier to toggle elements than to swap text, so I modified your HTML a bit.
http://jsfiddle.net/isherwood/T9wvL/8
.hide {
display: none;
}
<article>
<div class="updates updates-like">
<i class="fa fa-thumbs-up like_btn" id="like">
<span>Like Post</span>
<span class="hide">Already liked</span>
</i>
</div>
<div class="updates updates-dislike">
<i class="fa fa-thumbs-down dislike_btn" id="dislike">
<span>No Good</span>
<span class="hide">Already disliked</span>
</i>
</div>
</article>
$('.updates').click(function () {
$(this).find('i').toggleClass('fa-thumbs-up fa-thumbs-down')
.find('span').toggleClass('hide');
});
HTML:
<article>
<div class="updates-like">
<i class="fa fa-thumbs-up like_btn" id="<? echo $update->annid; ?>">
<span>Like Post </span>
</i>
</div>
<div class="updates-dislike">
<i class="fa fa-thumbs-down dislike_btn" id="<?echo $update->annid;?>">
<span>No Good</span>
</i>
</div>
</article>
JQuery:
$('.like_btn').click(function () {
/*This here runs the update function on the DB.. Not Important
var annid = $(this).attr('id');
update_likes(annid, 'like');*/
//Code here to change "Like Post" to "already Liked" ON CLICK, and to change "already disliked" back to "No Good"
if ( $(this).hasClass('fa-thumbs-up') ) {
$(this).removeClass('fa-thumbs-up')
.addClass('fa-check')
.find('span')
.text('Already Liked');
if ( $('.dislike_btn').hasClass('fa-check fa-check-dislike') ) {
$('.dislike_btn').removeClass('fa-check fa-check-dislike')
.addClass('fa-thumbs-down')
.find('span')
.text('No Good');
}
}
return true;
});
$('.dislike_btn').click(function () {
/*This here runs the update function on the DB.. Not Important
var annid = $(this).attr('id');
update_likes(annid, 'dislike'); */
//Code here to change "No Good" to "already disliked" ON CLICK, and to change "already Liked" back to "No Like Post"
if ( $(this).hasClass('fa-thumbs-down') ) {
$(this).removeClass('fa-thumbs-down')
.addClass('fa-check fa-check-dislike')
.find('span')
.text('Already Disliked');
if ( $('.like_btn').hasClass('fa-check') ) {
$('.like_btn').removeClass('fa-check')
.addClass('fa-thumbs-up')
.find('span')
.text('Like Post');
}
}
return true;
});
Here is the JSFiddle that should work for what you need. I tried to optimize a little bit your code, but I hope it still works fine.