I'm using the 'data-toggle'-option from Bootstrap for a button. In the button I have a with glypicons and sometext. However, when you click on the text it works, but when you click on the glyphicon it doesn't trigger the data-toggle.
Since the data-toggle does not work in JSFiddle I cannot post a link to it.
HTML:
<button type="button" id="showHide" class="btn btn-default" data-toggle="button"><span class="glyphicon glyphicon-eye-open"></span> show</button>
JavaScript:
document.getElementById("showHide").onclick = function () {
if ($("#showHide").text() == " show") {
document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-close\"></span> hide";
document.getElementById("showHide").blur();
} else {
document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-open\"></span> show";
document.getElementById("showHide").blur();
}
}
I've looked online but haven't found a solution or someone with the same problem.
It appears the span is being replaced before the toggle event is propogated. You can use the button method to activate the toggle rather than the data attribute.
<button type="button" id="showHide" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span> show</button>
document.getElementById("showHide").onclick = function () {
if ($("#showHide").text() == " show") {
document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-close\"></span> hide";
jQuery("#showHide").button('toggle');
document.getElementById("showHide").blur();
} else {
document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-open\"></span> show";
jQuery("#showHide").button('toggle');
document.getElementById("showHide").blur();
}
}
View Fiddle
Related
Im working with Boostrap 3 and Jquery and Im trying toggle the text inside a button with an boostrap icon span, but doesnt know how to do. This is what I tried: The html code:
<button type='button' class='btn btn-success btn-md'>
<span class='glyphicon glyphicon-edit'></span> Edit</button>
Jquery code:
$(this).text(function(i, text){
return text === "<span class='glyphicon glyphicon-edit'></span> Close" ? "<span class='glyphicon glyphicon-edit'></span> Edit" : "<span class='glyphicon glyphicon-edit'></span> Close"
})
So...How could be this works?
1) An example with the toggle text button but keeping the same icon.
2) Another example with the toggle text button but toggle the icon class
Thanks.
Instead of === you can use indexOf because:
$(this).text() === "↵ Edit"
Like you can see there is an extra char (newline) and you cannot rely on this.
The snippet with the jQuery.html is:
$('button').on('click', function(e) {
$(this).html(function(i, text){
return (text.indexOf("Close") != -1) ? "<span class='glyphicon glyphicon-edit'></span> Edit" : "<span class='glyphicon glyphicon-edit'></span> Close"
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type='button' class='btn btn-success btn-md'>
<span class='glyphicon glyphicon-edit'></span> Edit</button>
Or, in JS you may write:
this.childNodes[2].textContent = (this.childNodes[2].textContent.indexOf("Close") != -1) ?
' Edit' : ' Close';
The snippet:
$('button').on('click', function(e) {
this.childNodes[2].textContent = (this.childNodes[2].textContent.indexOf("Close") != -1) ? ' Edit' : ' Close';
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type='button' class='btn btn-success btn-md'>
<span class='glyphicon glyphicon-edit'></span> Edit</button>
How about this:
<button class="btn btn-primary toggle-text" data-toggle="collapse" href="#collapseExample">
<span class='glyphicon glyphicon-edit'></span><span>Edit</span><span class="hidden">Close</span>...
$('.hidden').removeClass('hidden').hide();
$('.toggle-text').click(function() {
$(this).find('span').each(function() { $(this).toggle(); });
});
http://jsfiddle.net/bcwhh8cp/
You should use html() instead of text()
$(this).html(function(i, text){
return text === "<span class='glyphicon glyphicon-edit'></span> Close" ? "<span class='glyphicon glyphicon-edit'></span> Edit" : "<span class='glyphicon glyphicon-edit'></span> Close"
})
I have a button:
<button ng-click="deleteCompany(company.id)"
class="btn btn-danger"
onClick="return window.confirm('This will permernently delete the entity\n
Are you sure you want to delete this post?'); ">
<span class="glyphicon glyphicon-trash"></span>
</button>
I also have an angular function:
$scope.deleteCompany = function(id){
console.log(id);
}
When i click cancel in the confirm the console outputs:
1
When i click ok in the confirm the console outputs:
1
I want the angular code to execute when the "Ok" is pressed but not when the "Cancel" is pressed.
JSFiddle example: http://jsfiddle.net/4304ewu5/
Throw your confirm inside the $scope.deleteCompany() function:
function MyCtrl($scope) {
$scope.deleteCompany = function(id) {
if (confirm('This will permernently delete the entity\nAre you sure you want to delete this post?')) {
$scope.name = id;
// delete the stuff.
}
}
}
And remove it from the inline HTML:
<div ng-controller="MyCtrl">
<button ng-click="deleteCompany('1')" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
<button ng-click="deleteCompany('2')" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
Hello, {{name}}!
</div>
Fiddle: http://jsfiddle.net/0Laztrfk/
Why don't you put the confirm within your deleteCompany method?
$scope.deleteCompany = function(id) {
if (!confirm("Delete company?"))
return;
console.log(id);
}
I have a few buttons each with a specific class to differentiate it from other similar buttons. Class name follows the format moreid where id changes with button. I am using following code to change button text:
function changeText(btn){
$('.'+btn).text(function(i, text){
return text === "Show More" ? "Show Less" : "Show More";}
)}
I call this function using changeText(moreid). With this code I get the error:
Error: Syntax error, unrecognized expression: .[object HTMLDivElement]
This is the HTML of button
<button type="button"
class="btn btn-primary btn-lg moreapple"
data-toggle="collapse"
data-target="#moreapple"
onclick="changeText(moreapple)">Show More</button>
The only thing that change from one button to another is moreapple to morenews etc.
How can I change this function to change button text?
Your changeText(btn) tells that, you're passing btn as an argument, so you might have to give this a try
$(btn).text(function(i, text){
return text === "Show More" ? "Show Less" : "Show More";
});
Your markup should be like this unless you've specific requirements
<button type="button"
class="btn btn-primary btn-lg moreapple"
data-toggle="collapse"
data-target="#moreapple"
onclick="changeText(this)">Show More</button>
use $(btn) as it comes from the calling function
changeText()
Fiddle Example
Obviously your Id's would be different depending on your naming convention
Duplicate Question Answer
var status = "less";
function toggleText()
{
var text="Here is some text that I want added to the HTML file";
if (status == "less") {
document.getElementById("textArea").innerHTML=text;
document.getElementById("toggleButton").innerText = "See Less";
status = "more";
} else if (status == "more") {
document.getElementById("textArea").innerHTML = "";
document.getElementById("toggleButton").innerText = "See More";
status = "less"
}
}
You need to update your markup from
<button type="button"
class="btn btn-primary btn-lg moreapple"
data-toggle="collapse"
data-target="#moreapple"
onclick="changeText(moreapple)">Show More</button>
to
<button type="button"
class="btn btn-primary btn-lg moreapple"
data-toggle="collapse"
data-target="#moreapple"
onclick="changeText('moreapple')">Show More</button> <!-- Pass moreapple as string -->
I am trying to toggle both the icon and the button text on a button and each function works independently, but they will not work when run consecutively. Seems that the function to toggle the button text is removing my icon altogether.
<button type="button" id="toggle-list-details">
<i class="fa fa-list fa-lg"></i>
List View
</button>
$("#toggle-list-details").click(function() {
$(this).text(function(i, text){
return text === " List View" ? " Details View" : " List View";
});
$(this).find('i').toggleClass('fa-list fa-th-list');
)};
When you do
$(this).text(function(i, text){
this reffers to <button type="button" id="toggle-list-details">, so it replaces all inner content with plain text.
To avoid this, you can do smth like this:
<button type="button" id="toggle-list-details">
<i class="fa fa-list fa-lg"></i>
<span class="text">List View</span>
</button>
$("#toggle-list-details").click(function() {
$(this).find('span').text(function(i, text){
return text === " List View" ? " Details View" : " List View";
});
$(this).find('i').toggleClass('fa-list fa-th-list');
)};
I'm making the twitter follow button , when you click on it it turns to following, when hover again it turns to unfollow , when click on unfollow , it becomes follow and here even if the mouse goes out nothing happens , my problem is something happens here .. (last step)
HTML:
<div class="col-xs-2 menu followBlock">
<button type="button" class="btn btn-primary btn-lg" data-follow="follow">
<span class="glyphicon glyphicon-plus"></span> Follow
</button>
</div>
JS:
$(".followBlock").on('click', "button[data-follow=follow]", function(e) {
$btn = $(this);
$btn.html("<span class='glyphicon glyphicon-ok'></span> Following").removeClass('btn-primary').addClass('btn-success');
$("button[data-follow=follow]").attr("data-follow", "unfollow");
$btn.hover(function(e) {
$(this).html("<span class='glyphicon glyphicon-minus'></span> Unfollow").removeClass('btn-success').addClass('btn-danger');
}, function(e) {
$(this).html("<span class='glyphicon glyphicon-ok'></span> Following").removeClass('btn-danger').addClass('btn-success');
})
});
$(".followBlock").on('click', "button[data-follow=unfollow]", function(e) {
$btn = $(this);
$btn.html("<span class='glyphicon glyphicon-plus'></span> Follow").removeClass('btn-danger').addClass('btn-primary');
});
The jsfiddle that explains my problem:
jsfiddle.net/TQ5nn/1/
Help please
try this
$(".followBlock").on('click', "button[data-follow=unfollow]", function(e) {
$btn = $(this);
$btn.html("<span class='glyphicon glyphicon-plus'></span> Follow").removeClass('btn-danger').addClass('btn-primary');
$btn.unbind('mouseenter mouseleave');
$btn.attr('data-follow', 'follow');
});
jsfiddle