I have buttons:
<button type="button" id="add_argument_button" class="btn btn-default disabled">
<span class="fa fa-plus"></span>
</button>
<button type="button" id="remove_class" onclick="remove_disabled();">
remove
</button>
And js function:
function remove_disabled(){
$("#add_argument_button").removeClass("disabled);
}
It works and when I click on second button the first button is not de facto disabled and I can click on it. But view of button and cursor stay as disabled. I think, that I need reload first button. Why we can resolve this problem?
You are missing double quotes at the end of your removeClass statement.
$("#add_argument_button").removeClass("disabled");
Maybe you need to disable the first button?
function remove_disabled(){
$("#add_argument_button").removeClass('disabled');
$("#add_argument_button").prop("disabled", true);
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="add_argument_button" class="btn btn-default disabled">
<span class="fa fa-plus"></span>
</button>
<button type="button" id="remove_class" onclick="remove_disabled();">
remove
</button>
<script type="text/javascript">
</script>
</body>
</html>
Try this code, Its working
<body>
<button type="button" id="add_argument_button" class="btn btn-default disabled">
<span class="fa fa-plus"></span>
</button>
<button type="button" id="remove_class">
remove
</button>
<div id="logbefore"></div>
<div id="logafter"></div>
</body>
// Add your javascript here
$(function() {
$("#logbefore").text($("#add_argument_button").attr('class'));
$("#add_argument_button").removeClass("disabled");
$("#logafter").text($("#add_argument_button").attr('class'));
});
Related
Hi Friends am in need your all help that i got an scenario that navigating from one html page to another page
Clear explanation
navigating from html page 1 to html page2 which contains three buttons with different id. i have to make the first button to be selected on page load and have to get all its argument value onclick event.
html page 1
<html>
<body>
click here
</body>
</html>
html page 2
<html>
<body>
<button id="button1" class="btn btn-default" onclick="save('Ice','cube','water')">click
</button>
<button id="button2" class="btn btn-default" onclick="save('Ice','cube','water')">click
</button>
<button id="button3" class="btn btn-default" onclick="save('Ice','cube','water')">click
</button>
<script type="text/javascript">
function save(name,shape,made){
alert(name);
alert(shape);
alert(made);
}
</script>
</body>
</html>
## scenario ##
On navigating to html page2 i have to make the button with id="button1" to be clicked default and have to get alert(); as if give in the save function hope will get a better response thank You
You can use this code.
<html>
<body>
<button id="button1" class="btn btn-default" onclick="save('Ice','cube','water')">click
</button>
<button id="button2" class="btn btn-default" onclick="save('Ice','cube','water')">click
</button>
<button id="button3" class="btn btn-default" onclick="save('Ice','cube','water')">click
</button>
<script type="text/javascript">
function save(name,shape,made){
alert(name);
alert(shape);
alert(made);
}
document.getElementById("button1").click();
</script>
</body>
</html>
<script type="text/javascript">
function save(name,shape,made){
alert(name);
alert(shape);
alert(made);
}
$("#button1").trigger("click")
</script>
You can try this :
document.getElementById('button1').click();
<button id="button1" class="btn btn-default" onclick="save('Ice','cube','water')">click
</button>
<button id="button2" class="btn btn-default" onclick="save('Ice','cube','water')">click
</button>
<button id="button3" class="btn btn-default" onclick="save('Ice','cube','water')">click
</button>
<script type="text/javascript">
function save(name, shape, made) {
alert(name);
alert(shape);
alert(made);
}
document.getElementById("button1").click();
</script>
If not using jquery,
document.getElementById('button1').click();
Hello guys I have some code:
<div class="a">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
<div class="b">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
When i use $("button.btn.approve").addClass("disabled"); the buttons from div a and div b are disabled. How to disabled button-approve only from div a?
If you click the button, you only want to add class to the buttons in the same group?
If so do this:
$('.btn-group .btn').click(function(){
$(this).parent().children('.btn').addClass('disabled');
});
.disabled {
color: #bbb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="a">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
<div class="b">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
You just have to change your selector and make it more general to include your .a class:
$(".a > .btn-group > button.btn.approve").addClass("disabled");`
Select buttons only within the div has class a by updating the selector.
$("div.a button.btn.approve").addClass("disabled");
Try something like this :
$(".a button.btn.approve").addClass("disabled");
.b>.button.btn.approve
You need to define exact element because
button.btn.approve
Matches all buttons, you can add additional class or ID too
I am showing bootstrap popover upon clicking on Anchor element as follows.
Jquery
$("[data-toggle=popover]").popover({
trigger: 'click',
placement: "top",
html: true,
content: function () {
return $('#popover-content').html();
}
});
HTML
<div id="popover-content" class="hide">
<div class="form-group">
<input class="form-control" id="txtContent" type="text" />
<button id="btnOk" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button id="btnCancel" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
<a href='#' class='btn-link' data-html='true' data-toggle='popover'>Sample text</a>
I want to set textbox value(text) which is inside popover to same as anchor element's text (i.e. 'Sample text' here). Can someone please tell me how can I do that?
Inside the content use this which is the element reference from where the popover is invoked. So here this would be the anchor element in your scenario. Get the text from the anchor tag and add the value attribute to your input element and then return $('#popover-content').html().
Check the below code snippet. This might help you!
$(document).ready(function() {
$("[data-toggle=popover]").popover({
trigger: 'click',
placement: "bottom",
html: true,
content: function() {
var anchorText = $(this).text();
$('#popover-content').find('input[id=txtContent]').attr('value', anchorText);
return $('#popover-content').html();
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div id="popover-content" class="hide">
<div class="form-group">
<input class="form-control" id="txtContent" type="text" />
<button id="btnOk" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button id="btnCancel" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
<a href='#' class='btn-link' data-html='true' data-toggle='popover'>Sample text</a>
<script>
</script>
</body>
As docs says, if you would like to show HTML in popover, you have to pass HTML through title argument, so in your case it stands for:
<a href='#' class='btn-link' data-html='true' data-toggle='popover'
data-title="Sample text">Sample text</a>
Is it possible to differentiate between a group of buttons? Given the following buttons.
<div id="slideout_inner">
<h2>Select Size</h2>
<p id="group1">
<button type="button" class="btn btn-primary btn-lg">Small $2.50</button>
<button type="button" class="btn btn-default btn-lg">Medium $3.50</button>
<button type="button" class="btn btn-default btn-lg">Large $4.50</button>
</p>
<h2>Select Milk</h2>
<p>
<button type="button" class="btn btn-default btn-lg">Full</button>
<button type="button" class="btn btn-default btn-lg">Trim</button>
<button type="button" class="btn btn-default btn-lg">Soy</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">Done</button>
<button type="button" class="btn btn-danger btn-lg btn-block cancelOrder">Cancel</button>
</div>
</div>
If I do the following I can highlight the selected button in group1
$('#group1 button').on("click", function(){
$('#group1 button').removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
})
I expect the button list to be dynamic so I want to select buttons with <p> to highlight separately so remove the #group selector and just highlight buttons within each <p>.
So in this example I could highlight Medium $3.50 and then highlight Soy independently.
Try this code:
$(document).ready(function () {
$("button").on("click", function () {
$(this).siblings("button").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
});
});
Try selecting only children of the parent <p> instead of all #group1 buttons.
$(this).parent().find("button").removeClass("btn-primary").addClass("btn-default");
This way you are only accessing a subset of buttons within the parent element, instead of running the query on the entire DOM.
You can use .siblings to select all sibling elements so you can find all sibling elements of the clicked .btn element:
$("p .btn").on("click", function() {
$(this).siblings(".btn").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideout_inner">
<h2>Select Size</h2>
<p id="group1">
<button type="button" class="btn btn-primary btn-lg">Small $2.50</button>
<button type="button" class="btn btn-default btn-lg">Medium $3.50</button>
<button type="button" class="btn btn-default btn-lg">Large $4.50</button>
</p>
<h2>Select Milk</h2>
<p>
<button type="button" class="btn btn-default btn-lg">Full</button>
<button type="button" class="btn btn-default btn-lg">Trim</button>
<button type="button" class="btn btn-default btn-lg">Soy</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">Done</button>
<button type="button" class="btn btn-danger btn-lg btn-block cancelOrder">Cancel</button>
</div>
</div>
You can use :contains() selector to identify which button is clicked. and then use the siblings() selector.
$( "button:contains('Small $2.50')" ).siblings()
Better approach would be to use different classes for each group. But the above should get you going.
I'm testing Bootstrap and I have a silly problem.
When I use tooltips on several buttons (in the same row) at the begining all the buttons are separated by several pixels.
When the tooltip appears then the space between the buttons dissapears.
My code:
<button type="button" class="btn btn-default" data-toggle="tooltip" id="btn01"
data-placement="top" title="Tooltip on top">Button with tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" id="btn02"
data-placement="left" title="Tooltip on left">Button with tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" id="btn03"
data-placement="right" title="Tooltip on right">Button with tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" id="btn04"
data-placement="bottom" title="Tooltip on bottom">Button with tooltip</button>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#btn01').tooltip();
$('#btn02').tooltip();
$('#btn03').tooltip();
$('#btn04').tooltip();
});
</script>
Problem already solved adding inside the button tags ...
data-container="body"
By the way ... I still know nothing about JS. I'm learning.
So I understand I could add for example the class clsTooltip to the 4 buttons and then ... ¿use this ...?
$('document').ready(function() {
$('.clsTooltip').tooltip();
});
Thanks a lot!!