child button element is getting called on click on parent element - html

I am trying out the Ionic app. I have the following simple snippet:
<ion-content padding="true" >
<label class="item item-input item-stacked-label">
<button ng-click="clickMe()">ClickMe</button>
</br>
<div class="input-label">Test Label</div>
</label>
</ion-content>
Which gives the following UI:
When I am clicking outside of the ClickMe button, ClickMe button is pushed up and called the clickMe().
Please help me to understand the reason behind this.

That is the property of a label that:
When a LABEL element receives focus, it passes the focus on to its
associated control.
If you want to prevent it, you can write a directive:
myApp.directive('preventClick', function() {
return {
link : function(scope, element, attrs) {
elemenet.on('click', function(e) {
e.preventDefault();
});
}
}
});
And apply it to the label
<label class="item item-input item-stacked-label" prevent-click>
<button ng-click="clickMe()">ClickMe</button>
</br>
<div class="input-label">Test Label</div>
</label>

Don't use label for that. Use any other element.
<div class="item item-input item-stacked-label">
<button ng-click="clickMe()">ClickMe</button>
</br>
<div class="input-label">Test Label</div>
</div>

Related

How to select a box with jQuery but not select the form inside the box?

I have a code where I want the page to close when the box is clicked with the "box-search" class
But even though I said don't consider the form and the elements inside the form, the form will be closed when the form and input are clicked.
$(".box-search *").not('form, form *').click(function() {
$(".box-search").fadeOut();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-search">
<div class="container" style="font-size: 40px; color: red;">
<button type="submit" class="close-box-search">Close</button>
<form method="get" action="">
<input type="text">
<button type="submit">Search</button>
</form>
</div>
</div>
I found the answer to my question
To select the parent, but not apply to the child
We use the following code
$(".box-search").click(function (e) {
if( $(e.target).hasClass("box-search") || $(e.target).hasClass("container") || $(e.target).hasClass("close-box-search") ){
hideBoxSearch()
}
});

Getting keyboard focus on modal once open without JavaScript

Once I click on a button on the main page a modal opens up with a list of items for the user to select from. The content within my modal is not getting focus when the modal is opened instead when I press tab - I see it tabbing through the rest of the items on the homepage (background) before actually getting into the modal.
How can I get my modal content to get focus once open rather than having to tab through the main page before reaching the modal?
Here is my code for the modal:
<div role="dialog" aria-modal="true" class="modal">
<div class="modal-dialog override">
<div class="modal-content">
<div class="section">
<header class="section-header">
<button tabindex="0" class="pull-right win-icon win-icon-Clear" (click)="close()" title="close-dialog"></button>
</header>
<div class="section-body">
<ng-content select=".modal-body"></ng-content>
</div>
</div>
</div>
</div>
</div>
This is my method for opening the modal:
public open() {
this.modal.open();
this.myService.getUsers()
.subscribe((data: ClassRoster[]) => {
this.classData = data;
});
}
You can use the autofocus attribute
The autofocus attribute is a boolean attribute.
When present, it specifies that an element should automatically get focus when the page loads.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name: <input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
Without JavaScript
Give your button the autofocus attribute:
<div role="dialog" aria-modal="true" class="modal">
<div class="modal-dialog override">
<div class="modal-content">
<div class="section">
<header class="section-header">
<button autofocus tabindex="0" class="pull-right win-icon win-icon-Clear" (click)="close()" title="close-dialog"></button>
</header>
<div class="section-body">
<ng-content select=".modal-body"></ng-content>
</div>
</div>
</div>
</div>
</div>
The reason that you have to do it to the button and cannot apply it straight to the div because autofocus only works on input, textarea, select and button. It's not ideal, but it works.
With JavaScript
Make your modal opening function like this:
public open() {
this.modal.open();
document.querySelector('.modal').focus();
this.myService.getUsers()
.subscribe((data: ClassRoster[]) => {
this.classData = data;
});
}

Hiding submit button with CSS when input field is focused

Problem: I want to have the submit button of my search box (HTML Form) to be hidden until the user clicks into the text input box.
HTML:
<div class="views-exposed-form">
<div class="views-exposed-widgets clearfix">
<div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
<div class="views-widget">
<div class="form-item form-type-textfield form-item-search-api-views-fulltext">
<input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
</div>
</div>
</div>
<div class="views-exposed-widget views-submit-button">
<input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">
</div>
</div>
</div>
What I have tried I know you can use at least some type of conditions when working with CSS. Like this right here: how-to-affect-other-elements-when-a-div-is-hovered
My problem now is that my elements are not directly inside of each other. I already played around with something like showing the button when hovering over wrapper div.
It is hidden like this:
#block-views-exp-display-products-page .views-submit-button {
visibility: hidden;
}
What I actually need now is something like this:
#edit-search-api-views-fulltext:focus (operator) #block-views-exp-display-products-page .views-submit-button {
visibility: visible;
}
But I dont know how to do that.
Edit:
In case anyone comes across this, this is my final solution:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#edit-search-api-views-fulltext").on('click', function(){
$("#edit-submit-display-products").css("visibility", "visible");
});
});
</script>
<script>
$(document).ready(function() {
$("#edit-search-api-views-fulltext").on('focusout', function(){
if (!$("#edit-submit-display-products").is(":hover")) {
$("#edit-submit-display-products").css("visibility", "hidden");
}
});
});
</script>
This will hide the button whenever you click outside of the input field and prevents the button from disappearing when trying to click on it.
You can leverage :focus-within.
The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)
MDN
Support is non-IE/Edge though.
Something like:
.views-submit-button input {
visibility: hidden
}
.views-exposed-widget:focus-within + .views-submit-button input {
visibility: visible
}
.views-submit-button input {
visibility: hidden
}
.views-exposed-widget:focus-within+.views-submit-button input {
visibility: visible
}
<div class="views-exposed-form">
<div class="views-exposed-widgets clearfix">
<div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
<div class="views-widget">
<div class="form-item form-type-textfield form-item-search-api-views-fulltext">
<input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
</div>
</div>
</div>
<div class="views-exposed-widget views-submit-button">
<input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">
</div>
</div>
</div>
You could add Javascript (jquery) to solve this problem:
<script src="code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$("#edit-search-api-views-fulltext").on('click', function(){
$("#edit-submit-display-products").css("visibility", "visible");
});
});
</script>

How to get data from a div in AngularJS

I use an input text to put text in div. When I write something in the input and I press the key Enter, the text from the input field is added to a div just below and normally, an array should be updated in my controller with the new value. I don't know how can I get the list of element text added to the div from a controller.
I'm trying to use the property n-change on my div with ng-model but it doesn't work.
<div class="row center" id="searchD" >
<form id="search" >
<input type="text" id="searchInput" onchange="createTag($(this).val());"/>
</form>
</div>
<div class="row center" ng-controller="Mainctrl">
<div id="tagContainer" ng-model="tagList" ng-change="tagList()">
</div>
</div>
You could do it something like below if that is what you are expecting.
Html :
<div class="row center" id="searchD" ng-controller="Mainctrl">
<form id="search" >
<input type="text" id="searchInput" ng-model="tagInput" ng-change="addTag()"/>
</form>
</div>
<div class="row center">
<div id="tagContainer" ng-repeat="tag in tagList">{{tag}}
</div>
</div>
Mainctrl:
$scope.tagList = [];
$scope.addTag = function () {
$scope.tagList.push($scope.tagInput);
$scope.tagInput = '';
}
Are you asking how to get data from the controller onto the html page? If so, you just use angular interpolation {{ someData }}
<div id="tagContainer" ng-model="tagList" ng-change="tagList()">
{{ tagList }}
</div>

How to get clickable button inside form label in radio control

I want to have a radio group where each label contains a clickable icon on the right that does NOT select the element, only executes a click event. Clicking on any other area within the label should select that item in the radio group. But clicking on the icon should ONLY execute that code.
The problem is that the <label> assumes all control of any click within its area. I have adjusted x-indexes and simply can't get the icons to be clickable without also selecting the item in the radio group. I am using angularjs and ionic framework.
<label class="item-button-right item item-radio" >
<input type="radio" name="radio-group">
<div class="item-content disable-pointer-events" >
<span>My Radio Button</span>
<button ng-click="doSomething(); $event.stopPropagation();" class="button button-icon radio-button">
<i class="button-icon icon ion-ios-information-outline"></i><i class="icon ion-ios-arrow-right"></i>
</button>
</div>
<i class="radio-icon disable-pointer-events icon ion-checkmark"></i>
</label>
If i understood you correclty, then you can add a ng-click option in the ng-repeat. Then just pass in the scope name and do stuff with that. Example
Html Example
<h5>Your group</h5>
<ul class="list-group" ng-repeat="obj in objs">
<li class="list-group-item">
{{obj.name}}
<button class="btn btn-primary btn-xs" data-title="View" data-toggle="modal" data-target="#view" ng-click="Dosomething(obj.name)"><span class="glyphicon glyphicon-pencil"></span></button>
<input type="radio" ng-model="color.name" ng-value="specialValue">
<input type="radio" ng-model="color.name" value="red">
color = {{color.name | json}}
</li>
</ul>
script example
app.controller('ExampleController', ['$scope', function($scope) {
$scope.color = {
name: 'blue'
};
$scope.specialValue = {
"id": "12345",
"value": "green"
};
$scope.Dosomething = function(name) {
alert("MyName");
};
}]);
You can also take the css positioning route by moving the button/icon html out of the label, then use css to preposition it where you need it. kind of like in this fiddle: https://jsfiddle.net/nwx9kzw1/
Here's some sample css to get the job done:
.special-icon-class{
position:relative;
z-index: 999;
top:1px;
left:25px;
}