I am using AngularJS' ui-bootstrap module. Here's my markup:
<button class="btn btn-default btn-sm" type="button"
popover-template="dynamicPopover.templateUrl"
popover-trigger="click" id="custom_overview"
popover-placement="bottom">Custom</button>
Here's my controller:
$scope.dynamicPopover = {
templateUrl : '../static/templates/popup-templates/datepicker.html'
};
Here's my popover template:
<div class="row" id="datepicker-container">
<div class="col-sm-12 clearfix">
<div class="col-sm-12">
<span class="heading">From:</span>
<input ng-model="timedata.fromDate" type="text" id="fromDate"
class="form-control" datepicker-popup="dd-MM-yyyy"
is-open="fromOpen.isOpen" ng-click="fromOpen.isOpen = true" placeholder="dd-mm-yyyy">
</div>
<div class="col-sm-12" style="margin-top:5px">
<span class="heading">To:</span>
<input ng-model="timedata.toDate" type="text" id="toDate"
class="form-control" datepicker-popup="dd-MM-yyyy"
is-open="toOpen.isOpen" ng-click="toOpen.isOpen = true" placeholder="dd-mm-yyyy">
<div class="error"
ng-show="timedata.toDate <= timedata.fromDate && timedata.fromDate && timedata.toDate">
<span>'To' date cannot be less than 'From' date.</span>
</div>
</div>
</div>
<div class="col-sm-12" id="submit-button">
<button class="btn btn-primary" ng-click="setInterval('custom')"
ng-disabled="timedata.toDate <= timedata.fromDate || !timedata.toDate || !timedata.fromDate">
Submit
</button>
</div>
</div>
As you can see, I am populating a popover with a popover template which contains a form. Here's a screenshot:
This popover opens up when I click on the 'Custom' button. Now, I want this popover to hide when I take the mouse away from the template and the 'Custom' tab. How can I do it?
In short,
replacing popover-trigger="click" by popover-trigger="'mouseleave : click'" should work for you.
For more understanding,
As per uib-popover documentation, both popover open and close triggers will be enabled by default with the popover-trigger attribute(only if you want to close and open on same event).
For example:
popover-trigger="'mouseenter'" This by default should open the popover on mouseover and close the popover on mouseleave
popover-trigger="'click'" - This will show and hide on clicks
In your case(show and close on different events), popover-trigger attribute should contain both events in order to work.
popover-trigger="'mouseleave : click'" This should work. Here first and second values represents hide and show triggers respectively.
Related
I have a toggle button and after wiring it up i noticed that when i click on it - the style doesn't change unless i refresh the page.
Here is my Html:
<div (click)="onValueChange(item)">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-toggle-switch" [ngClass]="{'active': item.isActive}">
<input type="checkbox">
<span class="status-on">on</span>
<span class="status-off">off</span>
</label>
</div>
</div>
What do i have to do to ensure that upon click the active class is added or removed properly without having to refresh?
Here is my on click function:
private onValueChange(item: ItemType) {
item.isActive = !item.isActive;
this.save(item);
}
I am trying to trigger an event with a button that takes text from a textarea and sends it to a panel using the Bootstrap Framework (v.3.3.7). Currently trying to do this using an event listener in Javascript rather than assigning an ‘onclick’ value for the button.
HTML:
<div class="container-fluid">
<div class="row">
<!-- Panel where text will be appended to -->
<div id="mainChatBox" class="panel-body" style="height:435px; overflow-y:scroll"></div>
<!-- Textarea and button -->
<div class="panel panel-footer" style="height:40px">
<div class="form-group col-md-10 col-lg-10">
<input type="text" placeholder="Type your message here" class="form-control" id="messageBar" />
</div>
<div class="input-group-btn col-md-2 col-lg-2">
<button id="sendMessageButton" class="btn btn-default">Send</button>
</div>
</div>
</div>
</div>
Javascript
var sendMessageButton = document.querySelector('#sendMessageButton');
var messageBar = document.querySelector('#messageBar');
var mainChatBox = document.querySelector('#mainChatBox');
sendMessageButton.addEventListener("click", function (event) {
var message = messageBar.value;
mainChatBox.innerHTML += message + "<br />";
});
I tried debugging by using this code and another version where I instead assign the button an ‘onclick’ value and then keep the function for it.
Here is a link to a reddit post with that version of code where I tried to find a solution with assigning an ‘onclick’ value to the button instead of using an EventListener.
Reddit post link
I need to know why when the event is triggered by the button that the text will not be appended to the mainChatBox when using either the method with the 'onclick' value assignation to the "button" tag for sendMessageButton, or the EventListener in the Javascript.
I am creating an app using knockout and jquery. There are user generated contents which a user can edit and save. I have a save button which is disabled and gets enabled only when new character is added to the editable div.
Problem:
Save button gets activated for all divs. I want only the respective button to get enabled and remaining should stay in disabled state.
HTML:
<div data-bind="foreach: $root.goals">
<div class="ui padded segment mainCard brdR-S" data-bind="attr:{id:Title()}">
<div>
<div>
<div contenteditable="true" class="heading pdM-TB wordwrap" data-bind="attr:{href:'#'+Title()}, editableText: Title, event: { keyup: $root.ShowButtons }" id="goalTitle">
</div>
<div class="mgXl-T pdM-TB">
<button class="ui disabled tiny primary button" id="btnSave" data-bind="click: $root.putGoal">
<i class="refresh icon"></i>Save
</button>
</div>
</div>
</div>
</div>
Jquery
self.ShowButtons = function (data, e) {
$('.button').removeClass('disabled')
};
I have created a html dom structure like this. I have used the ng-click to toggle the visibility of the DOM structure. For example if I am clicking in menu1 and if it is not visible it will be make visible. This is working perfectly . But I came across a scenerio where I need to close menu2(if it is open) on clicking menu1 & vice versa. Is is possible to accomplish using ng-click & ng-show
<span ng-click ="menu1 = !menu1">
<div ng-show="menu1">
//Rest of DOM element
</div>
</span>
<span ng-click ="menu2 = !menu2">
<div ng-show =menu2>
//Rest of DOM element
</div>
</span>
Below I will provide you a sample. I have provided two button, by clicking on each button it hide and show its respective content
HTML :
<body ng-app="ngToggle">
<div ng-controller="myAppCtrl">
<button ng-click="toggleCustom()">Custom</button>
<span ng-hide="custom">From:
<input type="text" id="from" />
</span>
<span ng-hide="custom">To:
<input type="text" id="to" />
</span>
<span ng-show="custom2"></span>
<button ng-click="toggleCustom2()">Custom</button>
<span ng-hide="custom2">From:
<input type="text" id="from" />
</span>
<span ng-hide="custom2">To:
<input type="text" id="to" />
</span>
<span ng-show="custom2"></span>
</div>
</body>
And JS:
angular.module('ngToggle', []).controller('myAppCtrl',['$scope', function($scope){
$scope.custom = true;
$scope.toggleCustom = function() {
$scope.custom = $scope.custom === false ? true: false;
};
$scope.custom2 = true;
$scope.toggleCustom2 = function() {
$scope.custom2 = $scope.custom2 === false ? true: false;
};
}]);
<span ng-click="menuToggle(1)">
<div ng-show="menu1">...</div>
</span>
<span ng-click="menuToggle(2)">
<div ng-show="menu2">...</div>
</span>
And in controller (or inline inside ng-click but you'd be better off having it in the controller (or directive depending on your code structure))
$scope.menuToggle = function(menu) {
$scope.menu1 = (!$scope.menu1 && menu === 1);
$scope.menu2 = (!$scope.menu2 && menu === 2);
};
If I understand your question correctly, you want this scenario:
When component/page/whatever is loaded, nothing is open (or you could set a default by settings '$scope.menu1 = true;' in controller). Then, if you would press menu1 span, menu1 would open. If you then press menu1 again, it would close. If you instead press menu2, menu1 is closed and menu2 opened.
In the future, try to be a bit more descriptive with your questions. Hope it works out!
My problem is when clicking OK in the modal window, which goes to javascript function in the modal will reload or clear the parent fields ?
Here is the use case:
1. enter name string into parent name form input
2. click on Test Modal Button
3. a modal window appears
4. click on the modal window "OK" button. (with the cancel button its not a problem)
5. parent name input was cleared. Possibly the parent was reloaded.
I'ved created a simple rails project with a generated scaffold Post name:string. Nothing special but I just enabled bootstrap js and css.
https://github.com/axilaris/bootstrapmodal/blob/master/app/assets/javascripts/application.js
https://github.com/axilaris/bootstrapmodal/blob/master/app/assets/stylesheets/application.css
And then, I inserted this code into _form.html.erb, you can view it here:
https://github.com/axilaris/bootstrapmodal/blob/master/app/views/posts/_form.html.erb
<div id="windowCreateInvoiceProductDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
<div class="modal-header">
×
<h3>Please enter a new product</h3>
</div>
<div class="modal-body">
<div class="divDialogElements">
Code:<input class="xlarge" id="xlInput" name="modal_code" type="text" />
<br>
Name:<input class="xlarge" id="xlInput" name="modal_name" type="text" />
<br>
Description:<input class="xlarge" id="xlInput" name="modal_desc" type="text" />
<br>
Price:<input class="xlarge" id="xlInput" name="modal_price" type="text" />
</div>
</div>
<div class="modal-footer">
Cancel
OK
</div>
</div>
<div class="divButtons">
<a data-toggle="modal" href="#windowCreateInvoiceProductDialog" class="btn btn-primary btn-large">Test Modal Button</a>
</div>
<script>
$(document).ready(function() {
$('#windowCreateInvoiceProductDialog').bind('show', function () {
// document.getElementById ("xlInput").value = document.title;
});
});
function okClicked () {
$('#windowCreateInvoiceProductDialog').modal('hide');
// document.title = document.getElementById ("xlInput").value;
// closeDialog ();
};
</script>
found the answer!
instead of this
<a href="#" class="btn btn-primary" >OK</a>
replace with this
<button type="button" class="btn btn-primary" onclick="okClicked ();">Save changes</button>
and thats all to it, and its flexible, i could hide, not hide and do something.