I am using AngularJS bootstrap tooltip. tooltip placement by default it is taking top. If I set the placement as "top", "bottom", "right", " left" it is working as per the selected value.
For My Case :
I need tooltip only for left and right.
If I set right, when it will reach end of rightside in screen, the tooltip is hiding.
Same as if i select as "left", when it will first in left hand side, that particular tooltip is hiding.
My requirement is, If it will reach right edge, automatically it should come left, same as left side also.
If I come down, it should visible on top, same as top also.
The conclusion is , it should be auto responsive.
Plunker
js/angular:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
$scope.dynamicPopover = {
content: 'Hello, World!',
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
$scope.placement = {
options: [
'top',
'top-left',
'top-right',
'bottom',
'bottom-left',
'bottom-right',
'left',
'left-top',
'left-bottom',
'right',
'right-top',
'right-bottom'
],
selected: 'top'
};
$scope.htmlPopover = $sce.trustAsHtml('<b style="color: red">I can</b> have <div class="label label-success">HTML</div> content');
});
Html:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<h4>Dynamic</h4>
<div class="form-group">
<label>Popup Text:</label>
<input type="text" ng-model="dynamicPopover.content" class="form-control">
</div>
<div class="form-group">
<label>Popup Title:</label>
<input type="text" ng-model="dynamicPopover.title" class="form-control">
</div>
<div class="form-group">
<label>Popup Template:</label>
<input type="text" ng-model="dynamicPopover.templateUrl" class="form-control">
</div>
<button uib-popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Dynamic Popover</button>
<button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>{{dynamicPopover.content}}</div>
<div class="form-group">
<label>Popup Title:</label>
<input type="text" ng-model="dynamicPopover.title" class="form-control">
</div>
</script>
<hr />
<h4>Positional</h4>
<div class="form-group">
<label>Popover placement</label>
<select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
</div>
<button popover-placement="{{placement.selected}}" uib-popover="On the {{placement.selected}}" type="button" class="btn btn-default">Popover {{placement.selected}}</button>
<hr />
<h4>Triggers</h4>
<p>
<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" type="button" class="btn btn-default">Mouseenter</button>
</p>
<input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="'focus'" class="form-control">
<hr />
<h4>Other</h4>
<button popover-animation="true" uib-popover="I fade in and out!" type="button" class="btn btn-default">fading</button>
<button uib-popover="I have a title!" popover-title="The title." type="button" class="btn btn-default">title</button>
<button uib-popover="I am activated manually" popover-is-open="popoverIsOpen" ng-click="popoverIsOpen = !popoverIsOpen" type="button" class="btn btn-default">Toggle popover</button>
<button uib-popover-html="htmlPopover" class="btn btn-default">HTML Popover</button>
<button uib-popover-html="'<b>HTML</b>, <i>inline</i>'" class="btn btn-default">HTML Popover (inline)</button>
</div>
</body>
</html>
Can anyone please help me how can I do this?
Related
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>회원가입</title>
<style type="text/css">
div{
background-image: "../img/space.jpeg"
}
</style>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$("#ajax_idDuplicate").click(function(){
// userID 변수에 id의 입력된 값을 가져오게 함
var id = $("#id").val();
$.ajax({
type: "POST", // GET or POST 전송방법
url: "../UserIdCheckServlet", // 이쪽으로 보낸다(호출URL)
data: {"id": id}, // userID 이름에 userID 데이터 값을 넣어서 보낸다
success: function(result){ // 만약 성공적으로 수행되었다면 result로 값반환
if(result == 1){ // id가 checkMessage인 것에 아래 텍스트 출력
$('#checkMessage').html('사용할 수 있는 아이디입니다.');
} else {
$('#checkMessage').html('사용할 수 없는 아이디입니다.');
}
// id 가 exampleModal인 모달함수 실행시켜서 모달 실행시키기 위해
$('#checkModal').modal("show");
},
error: function(xhr,status,error){
alert(error);
}
});
});
</script>
</head>
<body>
<div id="join-box">
<div>
<a href="<%=request.getContextPath()%>/MainServlet"><img src="
<%=request.getContextPath()%>/img/joinForm/x_button.jpg" border="0" width="15" height="15"
align="right"></a>
<br>
<h2>회원가입</h2><br/>
<span style="color: red;">${msg }</span>
<form action="<%=request.getContextPath()%>/JoinServlet" method="post">
<input type="text" name="name" class="name" placeholder="이름" /><br>
<input type="text" name="id" id="id" class="id" placeholder="아이디 입력" />
 
<!-- <button class="duplicate_check">중복확인</button> -->
<!-- 부트스트랩 테스트 -->
<!-- Button trigger modal -->
<button type="button" value="중복확인" id="ajax_idDuplicate" class="social-signin" data-bs-toggle="modal"data-bs-target="#checkModal">
중복확인
</button>
<!-- Modal -->
<div class="modal fade" id="checkModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">아이디 중복 확인</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="checkMessage">
<!-- 적을 내용 (알람창) -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
<!-- 부트스트랩 테스트 -->
<input type="password" name="pw" placeholder="비밀번호 입력" /><br>
연락처 : <br/><select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="018">018</option>
<option value="019">019</option>
</select>
-<input type="text" class="phone" name="phone2">
-<input type="text" class="phone" name="phone3"><br>
성별 :
남자 <input type="radio" name="gender" value="man">
여자 <input type="radio" name="gender" value="woman"><br>
</div>
<div>
<input type="submit" name="signup_submit" value="회원가입" />
</form>
<br>
<br>
<img src=" <%=request.getContextPath()%>/img/home.png" border="0" width="30" height="30" align="center">
</body>
</html>
I am trying to use AJAX, and I am struggling with a problem which I can't find anymore.
Even though I press the button which has id of ajax_idDuplicate, the function which I decided to activate through the button is not working.
and there is no error in a console window and on my web browser. Could you guys help me for a while?
Dom needs to be loaded before you call your function
<script type="text/javascript">
$(document).ready(function() {
$("#ajax_idDuplicate").click(function(){
I have this HTML template:
<div class="container">
<div class="row">
<div class="col-md-12">
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="field-name">Link </label>
<input type="text" class="form-control" id="field-name" placeholder="Link"
[(ngModel)]="HrefLink" name="HrefLink">
</div>
<span>-</span>
<div class="form-group">
<label class="sr-only" for="field-value">Label</label>
<input type="text" class="form-control" id="Label" placeholder="Label"
[(ngModel)]="HrefLabel" name="HrefLabel">
</div>
<button class="btn btn-danger" data-role="remove">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button class="btn btn-primary" data-role="add">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div> <!-- /div.form-inline -->
</div> <!-- /div[data-role="dynamic-fields"] -->
</div> <!-- /div.col-md-12 -->
</div> <!-- /div.row -->
</div>
In this simple form, I can add one or more inputs. This is the live example: https://bootsnipp.com/snippets/VPRlZ
My question is: How can I get the values of all added fields inside my angular component ? I can add the directive ngModel like above in every input but then all directives will have the same name and I'll not get all values?
Unfortunately, I can't place the ngModel in a higher level in the div of form-group ...
Please tell me if my question is clear or you need more information.
Why not you base the quantity of input in an array of Objects(InputModel it is a custom interface or class) and finally use *ngfor to show them.
InputModel
{
input_value: string,
index_of: number,
isDelete: boolean, //if false is "+" if true is "x"
}
Component.ts
inputValues: InputModel[] = [];
count: number = 0;
OnInit{
this.inputValues.push({
input_value:"",
index_of: this.count,
isDelete: true
});
}
addMore(){
this.inputValues.push({
input_value:"",
index_of: this.count++,
isDelete: false
});
}
Html Template
<div *ngFor="let input of inputValues">
<input [(ngModel)]="input.input_value" />
<!-- TODO button with 'x' or '+' depends of input.isDelete -->
</div>
I have this code
<input type="text" name="search" placeholder="Author...">
I want a button and when I click on it, it should show this textfield and the button should disappear.
You may do this simply by using AngularJS. Here is a short example.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.a=1;
$scope.b=null;
$scope.check=function(){
$scope.a=null;
$scope.b=1;
}});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-show="a"><button ng-click="check()">Click</button></div>
<div ng-show="b"><input></div>
</div>
</body>
You can use Javascript / jquery for that.There are so many ways for doing that.
Here is an example with jquery
$('#button').click(function(){
$(this).hide();
var html ='<input type="text" name="search" placeholder="Author...">'
$('#holder').html(html);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
</div>
<button id="button">Cick to add textbox</button>
Another method using hide and show
$('#button').click(function(){
$(this).hide();
$('#holder').show();
})
#holder{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
<input type="text" name="search" placeholder="Author...">
<select>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
</select>
</div>
<button id="button">Cick to add textbox</button>
You can learn more about javascript here
HTML:
<input class="input" type="text" name="search" placeholder="Author...">
<button class="btn" type="button">
click
</button>
CSS:
.input {
display: none;
}
JS:
$('.btn').on('click', function() {
$('.input').show();
$(this).hide();
})
working example: https://jsfiddle.net/n05reomv/
Try this
<script>
function next(){
document.getElementById("text").hidden=false;
document.getElementById("addBtn").hidden=true;
}
</script>
<input type="text" name="search" placeholder="Author..." id="text" hidden="true">
<input type="button" value="Add" onclick="next()" id="addBtn">
I have two buttons inside separate controllers.
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> Add </button>
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<button class="EditButton" ng-click="toggle()"> Add </button>
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
Note: Toggle just switches the hide/show bool in the back-end
As you can see when clicking the Addbutton it will show the form for aCtrl and EditButton for bCtrl. The result of the current layout is when Add Buttons form expands it pushes the EditButton down. I don't think this can be fixed with CSS as its the logical flow of the HTML.
I am looking for solutions that would allow me to have the buttons at the top in the flow of the page then the forms below.
for example I tried:
<button ng-controller="aCtrl" class="EditButton" ng-click="toggle()"> Add </button>
<button ng-controller="bCtrl" class="addButton" ng-click="toggle()"> Add </button>
<div ng-controller="aCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
Which doesn't seem to work.
The problem is that ng-hide hides the content with a display: none that causes the space occupied by the element to collapse.
You need visibility: hidden that also hides the element, but keeps the space.
Therefore, use ng-class instead of ng-hide:
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<button class="EditButton" ng-click="toggle()"> Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
and the CSS
.hidden {
visibility: hidden;
}
Here is a live sample:
var myApp = angular.module('myApp',[]);
function aCtrl($scope) {
$scope.myVar = true;
$scope.toggle = function () {
$scope.myVar = !$scope.myVar;
}
}
function bCtrl($scope) {
$scope.myVar = true;
$scope.toggle = function () {
$scope.myVar = !$scope.myVar;
}
}
.hidden {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="myApp">
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> aCtrl.Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input type="text" value="aCtrl.form">
</form>
</div>
<div ng-controller="bCtrl">
<button class="EditButton" ng-click="toggle()"> bCtrl.Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input type="text" value="bCtrl.form">
</form>
</div>
</section>
As you can see, the bCtrl.Add button remains in place, regardless whether aCtrl.form is visible or not.
It can be done via css only, just wrap the two in a div with position: relative and then add position:absolute to addButton and editButton together with top/left/right positioning values.
<div class="formContainer">
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> Add </button>
<form ng-hide="myVar" ng-submit="submit()">
<h1>Add form</h1>
<input type="text">
<input type="text">
</form>
</div>
<div ng-controller="bCtrl">
<button class="editButton" ng-click="toggle()"> Edit </button>
<form ng-hide="myVar" ng-submit="submit()">
<h1>Edit form</h1>
<input type="text">
<input type="text">
</form>
</div>
</div>
and css:
.formContainer {
position: relative;
width: 200px;
padding-top: 30px;
}
.addButton {
position: absolute;
top: 0;
right: 40px;
}
.editButton {
position: absolute;
top: 0;
right: 0;
}
Here's a working demo: Plunker CSS Only
There's another way, put them in a parent controller, which would hold the logic for toggling between the forms and then each form have their own controller for their respective functionalities.
Here's a working demo of the second version: Plunker with parent Controller
Here is example as u mentioned in your post. u can keep button outside of your controllers
var myApp = angular.module('myApp',[]);
myApp.controller('aCtrl', ['$scope', function ($scope) {
$scope.myVar = true
}]);
myApp.controller('bCtrl', ['$scope', function ($scope) {
$scope.myVar = true;
}]);
function getscope(ctrlName) {
var sel = 'div[ng-controller="' + ctrlName + '"]';
return angular.element(sel).scope();
}
function showForm(ctrlName) {
var $scope = getscope(ctrlName);
$scope.myVar = !$scope.myVar;
$scope.$apply();
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<section ng-app="myApp">
<button class="addButton" onclick="showForm('aCtrl')"> aCtrl.Add </button>
<button class="EditButton" onclick="showForm('bCtrl')"> bCtrl.Add </button>
<div ng-controller="aCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input type="text" value="aCtrl.form">
</form>
</div>
<div ng-controller="bCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input type="text" value="bCtrl.form">
</form>
</div>
</section>
Is having two controllers is your requirement ?
You can have a separate controller of the button for eg. btnCtrl and toogle the value using a $rootscope variable. As follows.
<button ng-controller="btnCtrl" class="EditButton" ng-click="toggle()"> Add </button>
<button ng-controller="btnCtrl" class="addButton" ng-click="toggle()"> Add </button>
<div ng-controller="aCtrl">
<form ng-hide="$root.myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<form ng-hide="$root.myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
I have a website with a modal dialog box containing an input form. The text box at the bottom of the form is set up to use an autocomplete list to suggest options as you type into it. This is provided by a typeahead javascript module.
By default, the typeahead list falls underneath the modal footer:
So I edited the css for the containing dev to set the 'overflow' to 'visible'. This allowed the typeahead to overlap the footer, but the div shrunk, because it no longer had to contain all of the content:
The only way I could think to fix this was to make the height of the div constant, but now I have the problem that the error boxes can push the content into the footer:
My question is: Is there a way that I can set up the div so that it automatically resizes to fit its usual content (the input boxes and the validation boxes), but allows the suggestion list to overlap the footer?
I have attached the HTML here:
<div class="modal-body" #*Note! This height value will need to be updated if the contents change, it is here to allow the Typeahead list to
overlap the rest of the div*# style="height: 345px; overflow: visible">
<!-- Container for top half of objection form -->
<div class="span4 offset2">
#Html.Partial("OfferDisplay",Model.OfferDisplayModel)
</div>
<div class="span8">
<form id="rejectionForm" class="form-horizontal" method="POST" data-ajax-pubsubupdate="RenderPresentOfferOptionsForm">
<input type="hidden" value="#Model.NegotiationSessionId" name="NegotiationSessionId"/>
<hr />
<div class="control-group">
#Html.LabelFor(m => m.RejectionReasonId, new { #class = "control-label" })
<div class="controls">
#Html.DropDownListFor(m => m.RejectionReasonId, Model.RejectionReasons, new { #class = "input-large" })
<button type="button" class="btn pull-right btn-validation" tabindex="-1" disabled="disabled"><i class="icon-ok"></i><i class="icon-warning-sign"></i></button>
<div class="help-block">
<p>#Html.ValidationMessageFor(m => m.RejectionReasonId)</p>
</div>
</div>
</div>
<div class="control-group">
#Html.LabelFor(m => m.TargetPrice, new { #class = "control-label" })
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-gbp"></i></span>#Html.TextBoxFor(m => m.TargetPrice, new { #class = "input-medium", style = "width:162px", #data_val_keypressfilter_regex = UIValidationRegularExpressions.NumberKeyPressFilterRegex })
</div>
<button type="button" class="btn pull-right btn-validation" tabindex="-1" disabled="disabled"><i class="icon-ok"></i><i class="icon-warning-sign"></i></button>
</div>
</div>
<div class="control-group">
#Html.LabelFor(m => m.CompetitorNameId, new { #class = "control-label" })
<div class="controls">
<div class="input-prepend">
<input id="competitorName" type="text" data-provide="typeahead" class="input-large" style="width: 198px"/>
</div>
<button type="button" class="btn pull-right btn-validation" tabindex="-1" disabled="disabled"><i class="icon-ok"></i><i class="icon-warning-sign"></i></button>
</div>
</div>
<!-- the real submit button has to be hidden because the button we want to click is outside this div, and the form cannot span both divs -->
<input id="RejectionFormSubmitButton" type="submit" style="display: none"/>
<input id="competitorIdField" name="CompetitorNameId" type="hidden"/>
<input id="showNextOfferInput" type="hidden" value="true" name="ShowNextOffer"/>
</form>
</div>
</div>
<div class="modal-footer">
<form method="POST" data-ajax-pubsubupdate="RenderOverrideConfirmationForm">
<input type="hidden" value="#Model.NegotiationSessionId" name="NegotiationSessionId" />
<input type="hidden" value="#Model.SchemeId" name="SchemeId" />
<button class="btn btn-warning pull-left" type="submit"><i class="icon-warning-sign"></i> #Html.DisplayNameFor(m => m.OverrideButton)</button>
<input id="cancelButton" class="btn" type="button" value="#Html.DisplayNameFor(m => m.CancelButton)"/>
#if (Model.OfferDisplayModel.Offer.IsFinalOffer)
{
<input id="submitAndCloseButton" class="btn btn-primary" type="button" value="#Html.DisplayNameFor(m => m.SubmitAndCloseButton)"/>
}
else
{
<input id="rejectAndShowNextOffer" class="btn btn-primary" type="button" value="#Html.DisplayNameFor(m => m.SubmitButton)"/>
}
</form>
You should try to use the "z-index" css property.