I have a button in <a> tag like below.
<a type="button" href="{{ url('/team') }}" class="btn btn-primary team">Team</a>
I want to disable this button in some conditions so i used jquery to disable. I implement something like below.
$('.team').prop("disabled", true);
But it didn't disabled.
Instead of <a> if i use <button> it works.
Any solutions?
Try this, bootstrap also has a disabled class, which will put cursor to default arrow and styles like disabled item.
$('.team').addClass("disabled");
working fiddle: https://jsfiddle.net/wvbcxj50/1/
Try this when you don't want the user to redirect on click
I am a useless link
as one of the options you can put a button in a block
<div id="btdis"><a type="button" href="{{ url('/team') }}" class="btn btn-primary team">Team</a></div>
if need disable
document.getElementById('btdis').innerHTML='';
if need enable
document.getElementById('btdis').innerHTML='<a type="button" href="{{ url('/team') }}" class="btn btn-primary team">Team</a>'
Related
I'm working on improving the accessibility of an HTML page. I have a "refresh" button. Is it possible that every time I click the button, the screenreader will read out "refreshing".
This is my HTML code:
<button id="refresh_btn" title="refresh the content" aria-label="refresh" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i></button>
You have to investigate the aria-live attribute:
<div aria-live="polite" id="ele"></div>
Each time you press the button you can populate the above tag with the text you want using javascript:
<div aria-live="polite" id="ele">Loading</div>
i have a div with href and background image also i have the button with onclick also , but when i tried to click the button it does not redirects the button link , where as it redirects the background href link.
<div class="banner-container">
<div class="banner-box">
<div class="banner-div">
<div class="bannerheading">
<p><span>The correct link should be </span></p>
</div>
<div style="text-align: test">
<button id="ngwr40hslzejpruyuvx" onclick="window.open('https://stackoverflow.com/')" data-gahref="https://stackoverflow.com/" class="btn btn-primary btn-xs newtab">Learn more</button>
</div>
</div>
<a href="https://www.google.com/">
<div class="banner-img" style="background-image:url('https://ssl.gstatic.com/gb/images/i1_1967ca6a.png');">
</div>
</a>
</div>
with out hcnaging hte HTML can anyone able to help https://jsfiddle.net/uqbhcdn6/2/ , how to redirect the button click ?
just add css pointer-events: fill; to the button...
<button style="pointer-events: fill;" id="ngwr40hslzejpruyuvx" onclick="window.open('https://stackoverflow.com/')" data-gahref="https://stackoverflow.com/" class="btn btn-primary btn-xs newtab">Learn more</button>
i edit your fiddle for your ease: https://jsfiddle.net/syamsoul/a8e1kng7/1/
Remove pointer-events:none for .banner-div class.
The above property doesn't react to pointer events, hence the click/hover events couldn't be performed
I'm trying to have a fully-clickable span or Button with a Bootstrap refresh glyph-icon. With the code I've inherited, the icon itself is clickable, but the area between icon and button border isn't, i.e., it feels to the user as if clicking on the edge of the button doesn't work.
Here is the current code:
<span class="btn btn-default btn-xs" style="background-color: transparent;">
<h:commandLink id="refresh" style="height:25px">
<span class="glyphicon glyphicon-refresh"></span>
<a4j:ajax render="richTable cnt_label scroller"
execute="richTable cnt_label scroller" event="click" immediate="true"
oncomplete="richTableRerenderCompleted('refresh')"/>
</h:commandLink>
</span>
I've tryed replacing the outer span with a <button> and that seemed to do the trick, but it warps the table in a funny way while refreshing.
Using a RichFaces commandButton or commandLink directly made everything worse.
Any ideas?
Since the icon is just a letter you can create a button and put the icon in the label.
If you inspect the span you should see something like this:
<span …>
::before
</span>
Then check the CSS for ::before and you should see:
.glyphicon-refresh:before {
content: "\e031";
}
e031 is the number of letter, you can convert it to an HTML entity and do this:
<h:commandButton value="" styleClass="btn btn-default btn-xs glyphicon">
I have a bootstrap button
<button onclick="leaveOpen()">TEST</button>
It calls a custom function
function leaveOpen(){
$("#rangeDropdown").addClass('open');
$("#dropdownMenu2").trigger('focus').attr('aria-expanded', 'true');
}(jQuery);
Which should affect these elements
<div class="dropup mobilewidth mobilebottom" id="rangeDropdown">
<button class="btn btn-default dropdown-toggle mobilewidth" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
...
</div>
This part works
$("#dropdownMenu2").trigger('focus').attr('aria-expanded', 'true');
but this part doesn't
$("#rangeDropdown").addClass('open');
When I click the the TEST button, the "dropup mobilewidth mobilebottom" lights up in the chrome developer tool as if something changed, but the 'open' class is not added. What am I doing wrong?
It's clearly the issue that the class is added & it's removed.
Probably bootstrap watches on focus event and toggles the open class.
If your handler is before bootstrap:
you: open added
bootstrap: open is toggled
-> result: nothing changes
In the other case the class would be added, but looking at your description that Chrome Dev Tools flashes that something changed it's rather the issue of double changing the open class
Not sure, it seems to work for me if the button is on the page. This alerts the class attribute after clicking the button:
function leaveOpen(){
$("#rangeDropdown").addClass('open');
alert($("#rangeDropdown").attr('class'));
$("#dropdownMenu2").trigger('focus').attr('aria-expanded', 'true');
}(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropup mobilewidth mobilebottom" id="rangeDropdown">
<button class="btn btn-default dropdown-toggle mobilewidth" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
...
</div>
<button onclick="leaveOpen()">TEST</button>
Bootstrap Button Link Not Working see code below:
<ul>
<li>
<a href="home.aspx?Id=146">
<button class="btn btn-primary btn">Button Link</button>
</a>
</li>
</ul>
I use firebug for development, is there an easy place to see what javascript events are attached and to which objects such as this button class? find it hard to debug as don't know what code is being called and on what events for bootstrap and other external js files
Or, you can just use a link which looks like a button..
Button Link
Remove a tag and add window.location.href to button onclick
<button class="btn btn-primary btn"
onclick="window.location.href='home.aspx?Id=146'; return false;">
Button Link
</button>