In my JS when a button with data-complete is clicked it gives me the value I need via targetDiv.
From this I am having issues with the .complete-tick class as I would like to add the .css({'display' : 'block'}); class to it. How?
HTML:
<button class="complete" data-complete="showTick-1" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>
JS:
$(function(){
$('[data-complete]').on('click', function(e) {
var targetDiv = jQuery(this).attr('data-complete');
(".complete-tick").css({'display' : 'block'});
e.preventDefault();
});
});
You need to add necessary styling for div with class .complete-tick. as far as your issue is concerned below code should work.
$(function(){
$('[data-complete]').on('click', function(e) {
//var targetDiv = $(this).attr('data-complete');
$(this).find(".complete-tick").css('display','block');
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="complete" data-complete="showTick-1" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>
PS: You are missing font-awesome css.
EDIT: I added some spare buttons to demonstrate that it works for multiple buttons, and the text 'Tick goes here' as a placeholder (I assume in your actual project you are including the font-awesome files so that an actual tick displays)
Is this what you mean? You don't need to worry about fetching targetDiv if you always just want to target .complete-tick inside the clicked button:
$(function(){
$('[data-complete]').on('click', function(e) {
$(".complete-tick", this).css('display','block');
e.preventDefault();
});
});
.complete-tick {
display:none;
}
.complete-tick i:before {
content:'tick goes here';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="complete" data-complete="showTick-1" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>
<button class="complete" data-complete="showTick-2" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>
<button class="complete" data-complete="showTick-3" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>
Related
I'm using following codes in a JSP page.This is my function to change button text by a button click in JavaScript.
How do I change the button to click?
<!-- btn1 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility</i>
visibility
</button>
<!-- btn2 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility_off</i>
visibility off
</button>
<script>
$(document).ready(function () {
$("#btnvisibility").on("click", function () {
$(".visibility").toggle("slow");
if ($(this).val() == "visibility")
$(this).val("visibility off");
else
$(this).val("visibility");
});
});
</script>
The html seems to be broken. Only use 1 button, never reuse an id attribute.
It is not completely evident what you want to achieve, but you probably want to add a visibility state to your button and visualize it with an embedded icon and show a matching text.
Importing the material design font, you would only need to change these texts. Your button also needs state to conveniently inform the handler what to do (this could also be derived from the current structure of the element but it would be unneccessarily complicated).
Example html
<!DOCTYPE html>
<!--
https://stackoverflow.com/questions/61189795/change-button-in-javascript-when-clicked
-->
<html>
<head>
<title>Adorning buttons with material icons</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function () {
$("#btnvisibility").on("click", function ( eve ) {
let b_isVisible = this.classList.contains("_btn-visible")
, s_buttontext
, s_text
;
if (b_isVisible) {
s_buttontext = 'visibility off';
s_text = 'visibility_off';
this.classList.remove("_btn-visible");
} else {
s_buttontext = 'visibility';
s_text = 'visibility';
this.classList.add("_btn-visible");
}
$("span", this).text(s_buttontext);
$("i", this).text(s_text);
$(this).val(s_buttontext);
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<button id="btnvisibility" class="btn btn-primary btn-round _btn-visible">
<i class="material-icons">visibility</i>
<span>visibility</span>
</button>
</body>
</html>
Explanation
The css class _btn-visible encodes the visibility state for the button.
The textual id for the icon to visualize the visibility state is the textual content of the i element inside the button. This text is changed upon a click.
The button label is remaining text inside the button. For easier referencing it is wrapped in a span element. This text is also changed upon a click.
I think this is what you're looking for.
HTML
<!-- btn1 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility</i>
visibility
</button>
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility_off</i>
visibility off
</button>
JS
$(document).ready(function(){
$("#btnvisibility").click(function(){
$(this).text($(this).text() == 'visibility' ? 'visibility off' :
'visibility');
});
});
I have created a popover so that if I click on the image the popover should appear.
The popover is working. what my main problem is I have inserted buttons in the popover.
so I want to write javascript or jquery code for the button when it is clicked. Can anyone help on this?
I have tried but it's not working!!!!
$(function() {
$('button').click(function() {
var x = $(this).attr('class');
alert(x);
});
});
$(function() {
$("[data-toggle=popover]").popover({
html: true,
container: 'body',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
},
placement: "auto"
});
});
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./isobar.js">
</script>
<span>
<img src="./img/more_options_icon.png" data-toggle="popover" tabindex="5" data-trigger="focus" data-popover-content="#moreoptions">
</span>
<div id="moreoptions" class="hidden">
<div class="popover-body">
<div class="list-group">
<button type="button" class="list-group-item"><span class="gap"></span>Edit</button>
<button type="button" class="list-group-item"><span class="gap"></span>Logic Builder</button>
<button type="button" class="list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
O.k. Here is an updated version of my answer and checked and working code. A secret of a popover is to fire the correspondence function in a right time with a popover firing. So the JS code is:
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
Here I an using html selector
:not(.main)
to prevent binding and unbinding events to the main button. In addition, we have to pay attention on the fact that every popover rising binds a new event handler to each button. This means that after n popover risings every button will fire it's alert n times. To prevent this effect, it is possible to bind events in the first rising only, or as I did, to unbind an event from a button every popover rising. As to html code, here it is:
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
I only added the ".main" button to accept a simulation, and each button got additional corresponding class "class-0", "class-1", "class-2" for successful demonstration. Now, when you push on the main button, other 3 buttons appear. And to the contrary, pushing on any of those 3 buttons, is following by alert firing and disappearing of all of them. I hope this will help you.
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
.hidden {
display: none;
}
button {
float: left;
}
.class-0 {
clear: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
I have in HTML a button with id="button1".
We have JavaScript function:
$('#button1').click(function() { ... } );
It works well.
But what if we have 100 buttons with different IDs?
I can duplicate 100x function. However, this is not very elegant and good solution.
How to easily and effectively solve a problem for many buttons?
The function performed is the same for all buttons.
Add a class bind to this:
$(document).ready(function(){
//dot (.) selector binds to classes
$('.boundButton').click(function(){
//clicked button
var $this = $(this);
alert($this.attr('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="1" class="boundButton">1</button>
<button id="2" class="boundButton">2</button>
<button id="3" class="boundButton">3</button>
You need to use a class instead of ID. For example, your JS code could look like:
$('.button-class').click(function() { ... } );
and your HTML might look like
<button name='example' class='button-class' id='exampleID'>Button Text</button>
Here is the basic example:
$(document).ready(function () {
$(".btn").on("click", function(){ //attach click event to all buttons with class "btn"
console.log($(this).attr("id")); //$(this) refers to the button clicked
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button 1</button>
<button id="btn2" class="btn">Button 2</button>
<button id="btn3" class="btn">Button 3</button>
I am looking for some assistance and there must be a better way to code this. I have a series of buttons that change the same span Id and well I can get it to work but it seems like an excessive number of actions. Is there a way to make this more efficient? Any help would be appreciated. Thank you!
jQuery("#All-Btn").click(function(event) {
event.preventDefault();
jQuery('#Type').html("red wine");
});
jQuery("#Awesome-Btn").click(function(event) {
event.preventDefault();
jQuery('#Type').html("Awesome");
});
You can use a custom function:
function myBtn(id, text) {
$(id).click(function (e) {
e.preventDefault();
$('#Type').html(text);
})
}
myBtn("#All-Btn", "red wine");
myBtn("#Awesome-Btn", "Awesome");
Well, provided you gave all your buttons a shared class and a data element you could reduce the logic as such.
<input type="button" id="All-Btn" class="typeButton" data-type="red wine">
<input type="button" id="Awesome-Btn" class="typeButton" data-type="some other value">
jQuery('.typeButton').on('click', function(e){
e.preventDefault();
jQuery('#Type').html(jQuery(this).data('type'));
}
Common Approach is using data attributes
$("[data-test]").on("click", function () {
var text = $(this).data("test");
$("#out").text(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-test="Red">Button 1</button>
<button data-test="Blue">Button 2</button>
<button data-test="Green">Button 3</button>
<div id="out"></div>
Another approach is a lookup
var text = {
btn1 : "Red",
btn2 : "Green",
btn3 : "Blue",
};
$(".btn").on("click", function () {
var id = $(this).attr("id");
$("#out").text(text[id]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button 1</button>
<button id="btn2" class="btn">Button 2</button>
<button id="btn3" class="btn">Button 3</button>
<div id="out"></div>
Or a switch
$(".btn").on("click", function () {
var id = $(this).attr("id"),
text;
switch (id) {
case "btn1" :
text = "Red";
break;
case "btn2" :
text = "Green";
break;
case "btn3" :
text = "Blue";
break;
}
$("#out").text(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button 1</button>
<button id="btn2" class="btn">Button 2</button>
<button id="btn3" class="btn">Button 3</button>
<div id="out"></div>
You could make object, with key-value pairs: Key is button id, value is span html, e.g:
buttons={
'All-Btn':'red wine',
'Awesome-Btn':'Awesome'
};
And then iterate through it:
$.each( buttons, function( key, value ) {
jQuery("#"+key).click(function(event) {
event.preventDefault();
jQuery('#Type').html(value);
});
});
buttons={
'All-Btn':'red wine',
'Awesome-Btn':'Awesome'
};
$.each( buttons, function( key, value ) {
jQuery("#"+key).click(function(event) {
event.preventDefault();
jQuery('#Type').html(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="All-Btn">
fffff
</div>
<div id="Awesome-Btn">
fffffffffff
</div>
<span id="Type"></span>
However, you have to type... a lot, again. :)
You can store the text that you want to display as an attribute of the button (ex data-text). Then, you just need one function to handle the event
jQuery("#All-Btn, #Awesome-Btn").click(function(event) {
event.preventDefault();
var text = jQuery(this).data('text');
jQuery('#Type').html(text);
});
How about that?
The first way that came to mind was to use a data- attribute to specify the text associated with each button, and then bind a single, delegated click handler to handle clicks on all buttons with that attribute.
Notice that then your buttons don't need IDs.
$("body").on("click", "[data-text]", function() {
$("#type").text($(this).attr("data-text"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="type"> </span><br>
<button data-text="Awesome">Awesome</button>
<button data-text="Whatever">Something</button>
<button data-text="Greetings">Hello</button>
<button data-text="Fare well">Goodbye</button>
<button>This button does nothing because it has no data- attribute</button>
(I've bound the delegated click handler to the body, but the best practice is to bind it to the closest common parent of the elements in question.)
I would like to hide the div (which is "hide-div") as soon as the user cliks on the button when there is a navigation to the same page. Please help me on this. Thanks
<div id="hide-div">
<button type="button" title="test" class="button btn-small" onclick="setLocation('abc.com');"><span>'Add to Cart'</span></button>
</div>
Using Vanilla JavaScript. Although I recommend using event handler instead of inline JS, this is in view of your code.
Hide the element using style.display
You can redirect the page after hiding the button using window.location
function setLocation(loc) {
document.getElementById('hide-div').style.display = 'none';
window.location = loc;
}
<div id="hide-div">
<button type="button" title="test" class="button btn-small" onclick="setLocation('http://google.com')"><span>'Add to Cart'</span></button>
</div>
You can do this by simple jquery
<script>
jQuery(document).ready(function($) {
$(".button").click(function(){
$("div").fadeOut();
});
});
</script>
Using jQuery you can do this in your onclick:
$('#hide-div').hide()
http://api.jquery.com/hide/
Use jQuery to hide it:
$('#hide-div button').click(function(){
$(this).parent().hide();
});
I assume you have jQuery added to your page already. So, something like this maybe:
$('#hide-div .button').on('click', function() {
$('#hide-div').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hide-div">
<button type="button" title="test" class="button btn-small" onclick="setLocation('abc.com');"><span>'Add to Cart'</span></button>
</div>