I have an web app which is working phine on the simulator,android and ios, but on windows phone one onclick event does not work. This is my HTML code:
<ul id ="triggerresolutionbg" class="table-view">
<li class="table-view-cell media">
<element>
<button class="btn btn-link btn-nav pull-left">
<span class="icon icon-left-nav" id ="triggerLeft" onClick = "triggerText(this.id)" ></span>
</button>
</element>
<button class="btn btn-link btn-nav pull-right">
<span class="icon icon-right-nav" id ="triggerRight" onClick = "triggerText(this.id)"></span>
</button>
<element>
<center id ="triggerText">After I...</center>
</element>
</li>
</ul>
I´m using Ratchet,Bootstrap and JQuery.
Why the onclick methods on Windows Phone does not work ?
According to the HTML5 spec for button putting interactive content inside a button element is invalid.
Content model:
Phrasing content, but there must be no interactive content descendant.
So you should not expect event listeners to work on elements inside a button. Some browser violate the spec and permit this, but others do not. Try attaching the onclick handler to the button element itself.
Since you are using this.id, I would recommend restructuring your HTML in the process, but something like this should work.
<button class="btn btn-link btn-nav pull-left" onclick="triggerText(this.firstElementChild.id)">
<span class="icon icon-left-nav" id="triggerLeft"></span>
</button>
Related
I have a button which when user click on it, phone numbers will be appear slowly.
Here is the HTML Codes:
<span id="show-phone-numbers" class="btn btn-success">
<i class="fe fe-phone-call"></i> Show Phone Number
</span>
<div class="media margin-top-20" id="phone-number-section" style="display:none">
<div class="media-body text-center">
<a href="tel:00000000">
<p class="btn btn-outline-primary">
<i class="fe fe-phone-call"></i> somephonenumber
</p>
</a>
<a href="tel:00000000">
<p class="btn btn-outline-primary">
<i class="fe fe-phone-call"></i> somephonenumber
</p>
</a>
</div>
</div>
And here is the scripts:
$("#show-phone-numbers").on("click",function(){
$("#phone-number-section").toggle("slow");
});
The problem is when I click on the "Show Phone Number" button, nothing happens, even in console I see nothing happening
I did search about the error but I couldn't find a way which help me to handle this error.
Why do you have data-bs-toggle="tab" in there, without any bootstrap tab elements? This causes the BS event handler to be registered, which throws this error, because it can't find properly setupped tabs.
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 am trying to pass JavaScript Function on HTML Button element and its Child elements, But child element function is not trigger on the Firefox.
Its working well on the Chrome and Safari.
Test here.
HTML Block:
<div class="container p-5">
<button onClick="sayButton();" class="btn btn-block btn-primary">
<span class="badge badge-light" onClick="sayDiv(event)">Hello</span>
</button>
</div>
JavaScript function:
function sayButton() {
alert("button");
}
function sayDiv(e) {
e.stopPropagation();
alert("div");
}
Say Div function is not working on the firefox.
Jsfiddle:
https://jsfiddle.net/jainvabhi/nmp2L7ma/3/
Code Pen:
https://codepen.io/jainvabhi/pen/VQNgZq
I am not sure if Firefox will let you do this with a button element as the parent. In my understanding, according to the Content Model for the button, you should not have interactive children. That being said, if you change the button to a div like following, it will work.
<div class="container p-5">
<div onClick="sayButton();" class="btn btn-block btn-primary">
<span class="badge badge-light" onClick="sayDiv(event)">Hello</span>
</div>
</div>
Fiddle Fork
If this is for a production application, please take into consideration potent accessibility considerations when using an element other than a button for this purpose.
I have an Angular JS 1.3 app.
In it I have a table row repeater with an ng-click:
<tr ng-repeat-start="user in users.users" ng-click="showDetails = !showDetails">
<!-- main row, with the menu td shown below -->
<tr class="row-details" ng-show="showDetails" ng-class="{ 'active': showDetails }">
<td>this is the row that hows details</td>
</tr>
<tr ng-repeat-end></tr>
Which toggles opening a detail view. Works fine. But now I need to add another item in each of the tds, a Bootstrap button menu:
<td>
<div class="btn-group">
<div ng-switch on="user.status">
<button class="btn btn-link btn-gear dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-cog"></i></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-when="Inactive">
<li>Delete</li>
</ul>
<ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-when="Invited">
<li>Resend invitation</li>
<li>Delete</li>
</ul>
<ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-default>
<li>Reset password</li>
<li>Delete</li>
</ul>
</div>
</div>
</td>
Problem is, trying to click on this menu button instead triggers the ng-click on the row, toggling the row state but never opening my menu. How can I prevent this?
This is pretty tricky problem. The thing is that when you click menu button two things happens: the first is that it opens Bootstrap dropdown menu, and the second is that event propagates to the parent element and also triggers showDetails = !showDetails.
The obvious solution is to try to stop event propagation with $event.stopPropagation() on the td level, so that event doesn't bubble up the DOM tree and never triggers parent ngClick. Unfortunately, it will not work because Bootstrap sets up click event listener on the document element to benefit from bubbling, so you can't stop propagation.
The simplest solution I came up with in such cases is to set a flag on the original event object whether event occurred on the menu button. If this is the case ngClick on the tr won't do anything.
It will look like this for tr:
<tr ng-repeat-start="user in users.users" ng-click="$event.originalEvent.dropdown || (showDetails = !showDetails)">
ans for button:
<button ng-click="$event.originalEvent.dropdown = true" class="btn btn-link btn-gear dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-cog"></i>
</button>
Demo: http://plnkr.co/edit/eIn6VW3Y2jHn0MtJQVcU?p=preview
With help of dfsq's answer I managed solve same kind of problem in Angular 2. Here is my sample code.
<td class="tablerowdata" (click)="$event.dropdown || onSelect(track)" >
<button (click)="$event.dropdown = true" type="button" class="btn btn-default dropdown-toggle trackbuttons" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
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>