I am using bootbox alert in my angular2 application to display information to the user on the UI. I am displaying href links in the alert message. When the user clicks on any of the href links, the page should be navigated to that link and also the bootbox alert modal should get closed.
In my code, the page is navigated to the href link. However, the modal is not getting closed. How can i achieve this?
Below is my code:
bootbox.alert({
title: "Select option for profile #"+this.profileId,
message:
"View/Update<br>" +
"Deactivate/Reactivate<br>"+
"Ad Hoc Request<br>"+
"Internal Download<br>"+
"Audit Tracking<br>"
});
Any inputs appreciated!
You can capture the modal object that is created (see https://jsfiddle.net/q1Lm385a/1/):
var $mymodal = bootbox.alert({
title: "Select option for profile #"+this.profileId,
message:
"View/Update<br>" +
"Deactivate/Reactivate<br>"+
"Ad Hoc Request<br>"+
"Internal Download<br>"+
"Audit Tracking<br>"
});
That would make it relatively easy to manually dismiss the modal:
$mymodal.on('click', '.bootbox-body a', function(e){
$mymodal.modal('hide');
});
Bootbox also has a global function you can call:
$mymodal.on('click', '.bootbox-body a', function(e){
bootbox.hideAll();
});
Related
I am installing this modal dialog on a client's website, with practically no modifications.
However, I could not find how to make the modal dialog display on page load in the documentation.
Right now it just says:
<!-- Link to open the modal -->
<p>Open Modal</p>
But I am sure there is a way to make it just open on load.
I am using a hosted version of jQuery (jquery.min.js, jquery.modal.min.js) so I'm not trying to add/edit code in the JS file.
http://github.com/kylefox/jquery-modal Method 2: Manually:
$(function() {
$('#login-form').modal();
});
You need to create on your html a div like this:
<div ng-include="'/Somepast/busyModal.html'" ng-show="isLoading"></div>
<div> after load</div>
Then in your javascript you create:
function init() {
$scope.isLoading = true;
SomeFunction().then(function (data) {
$scope.isLoading = false;
}, onError);
};
that's it.
Have a problem that is driving me insane! I suspect I am doing something wrong...
I am using jQuery mobile with multiple pages in the same HTML file.
I have a page #mainregister on which I check for any user changes. If they try to navigate away, I stop the navigation using this code (using info I found here on SO):
$(document).on("pageinit", '#mainregister', function(){
$(document).on('pagebeforechange', function(e, data){
ResetTimeOutTimer(); // Reset inactivity timer
if (typeof data.toPage != "string") {
if (isDirty) {
var to = data.toPage.attr('id');
to = '#' + to;
console.log(to);
if(to !== '#mainregister')
{
var confirmationMessage = 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.';
e.preventDefault();
e.stopPropagation();
isDirty = false;
console.log(to);
$("#leavebutton").on('click', function(){
changePage(to, false);
return false; // This is to prevent events bubbling up and causing double page flips
// See https://github.com/jquery/jquery-mobile/issues/2369#issuecomment-4830800
// and https://css-tricks.com/return-false-and-prevent-default/
});
$("#leavetext").html(confirmationMessage);
$('#confirmLeave').popup('open');
return false;
}
}
}
});
});
This brings up a popup asking the user if they wish to Save or Leave. This popup is defined as:
<!-- Leave Warning Popup -->
<div data-role="popup" id="confirmLeave" data-overlay-theme="a" data-theme="a" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Info</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content" id="leaveContent">
<h3 class="ui-title" id="leavetext"></h3>
<input type="button" value="Save" onclick="SaveRegister()"/>
<input type="button" value="Leave" id="leavebutton"/>
</div>
</div>
<!-- End Leave Warning Popup -->
Now, if the user goes 'back' from #mainregister the navigation is stopped and the popup is shown. If the user chooses save, the save occurs but the URL still changes even though we're still on `#mainregister' page.
So, user is on index.html/#mainregister, hits back button, popup comes up, user chooses to save, popup closes, page shown is still #mainregister but URL is now index.html but should be index.html/#mainregister.
So, now the URL and the actual page do not match; and navigation is a little broken from here.
Am I using the wrong page event? Or something else?
Also (perhaps related) I notice that if I go back after a popup (in other use cases) I get the same URL twice - e.g. `\index.html#\index.html (is this because I am testing from file:// or something else)?
I have a custom directive placed on a Kendo UI treeview widget.
It seems to be working fine side-by-side, except that I'm trying to simply display the custom icons next to the tree node which is clicked on (see sample image below).
So my directive is data-toggle-me, placed next to the Kendo k-template directive as follows :
<div class="reports-tree" kendo-tree-view="nav.treeview"
k-options="nav.treeOptions"
k-data-source="nav.reportsTreeDataSource"
k-on-change="nav.onTreeSelect(dataItem)" >
<span class="tree-node" k-template data-toggle-tree-icons>{{dataItem.text}}</span>
</div>
and the directive code here inserts some custom icons next to the tree node when a user clicks on that tree node :
.directive('toggleMe', function ($compile) {
// Kendo treeview, use the k-template directive to embed a span.
// Icons appear on Click event.
return {
restrict: 'AE',
transclude: true,
template: '<span ng-show="nav.displayIcons" id="myIcons" class="reptIcons" style="display:none;width:50px;align:right;">' +
' <a title="add new folder" ng-click="nav.addAfter(nav.selectedItem)"><i class="fa fa-folder-open"></i></a> ' +
'<a title="add report here" ng-click="nav.addBelow(nav.selectedItem)"><i class="fa fa-plus"></i></a> ' +
'<a title="remove" ng-click="nav.remove(nav.selectedItem)"><i class="fa fa-remove"></i></a> ' +
'<a title="rename" onclick="showRename(this);"><i class="fa fa-pencil"></i></a>' +
'</span>',
link: function (scope, elem, attrs) {
var icons = elem.find("#myIcons");
elem.on('click', function (e) {
$('.reptIcons').css('display', 'none');
icons.css("display", "inline");
icons.css("margin-left", "5px");
});
}
}
})
My biggest problem at this point is getting the icons to appear on the treenode which is clicked on. Then once the user clicks on a different node, the icons will only render again on the newly-clicked node.
This fiddle represents a partially-working example but the icons are appearing on every single treenode - click tree item to show icons
**** UPDATED TREE IMAGE - All child nodes now show icons (not what I want) ****
I'm not sure to understand your issue, you should try to reduce the code to the minimum and have a snippet/jsfiddle that works.
If all you want is not trigger click events when $scope.disableParentClick is set to true, simply add
elem.on('click', function (e) {
// Do not execute click event if disabled
if (!$scope.disableParentClick) { return; }
...
});
Now that seems all not very angular friendly to me. You should externalize your HTML in either the template or templateUrl of your directive, potentially adding to it a ng-if="displayTemplate" which would only display the node when a click would set $scope.displayTemplate = true;
Also, instead of listening for click events this way, you should use the ng-click directive. Everything is doable with directives. I can give more information when you better understand your problem: I suspect you are not approaching it the right way.
UPDATE: if all you want is display the icons list of the clicked element, you could do it way easier. You actually don't need the toggle-me directive, but even if you keep it you can solve all your troubles the angular-way, which is by using ng-click, ng-repeat, etc. Please have a look at the following jsFiffle to see one way of doing that. There are many other ways, but really try using ng-click to avoid troubles:
http://jsfiddle.net/kau9jnoe/
Events in the DOM are always bubbling up. That is a click on a link would trigger an onclick handler on every element up the hierarchy, e.g. also the body element. After all the click happened within body.
The same is true for your directive. Any click within your element triggers its event handler. To circumvent this either attach the event handler somewhere else or ignore clicks from the links.
The event object has a target property that tells you what element initiated the event. So you could do something like this:
elem.on('click', function (e) {
if (e.target.nodeName.toLowerCase() == 'a') return; //ignore click on links
I am using jquery ui Dialog box. It works fine but I have a requirement that with one button I should be able to create a dialog box with each click.
So Eg: On first click a dialog box is opened. On second click, a new dialog must be created with the first one intact at it's place. I am implementing sticky notes using this.
How can this be achieved??
You can create Modal Dialog Dynamically
$("button").click(function () {
var dynamicDialog = $('<div id="MyDialog">cotent </div>');
dynamicDialog.dialog({
title: "Success Message",
modal: false,
buttons: [{
text: "Yes",
click: function () {}
}]
});
});
Demo
Note: since all come on same location just move and see the new dialog in the demo
I'm having trouble finding a way to accomplish this.
I'm using Node.js, Bootstrap 3, and express
I want to start on a form page. When the user fills out the form they click on submit. Here I want to fire a remote modal. (Have no trouble accomplishing this from a regular link or button.)
This kicks off a post. How can I then fire a remote modal and pass the form data from the post to it so a new remote page with answers can show up in the modal window over the original form page.
Here is code I have:
Form Jade (cover-form.jade):
html
head
meta(name="viewport" content="width=device-width, initial-scale=1.0")
title= title
link(href="/stylesheets/coverform_custom.css" rel="stylesheet")
body
.modal.fade(id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true")
.modal-dialog.wide-modal
.modal-content
form.form-horizontal(id="coverform" name="coverform" method="post" action="")
.LoginBox.LoginText
fieldset.animated.fadeInUp
// Form Name
legend.LoginText Cover Strategy
// Text input
.form-group
label.col-xs-4.control-label(for='symbol') Stock Ticker:
.col-xs-5
input#symbol.form-control.input-xs(type='text', name='symbol', placeholder='example: AAPL', autofocus, required)
span.help-block Enter Stock Symbol (all capitals)
// Text input
// Select Basic
.form-group
label.col-xs-4.control-label(for='optiondate') Option Date:
.col-xs-5
select#optiondate.form-control(name='optiondate' required)
- for opdate in OptionDates
option(value="#{opdate.OptionDate}") #{moment(opdate.OptionDate).format('dddd, MMMM Do, YYYY')}
span.help-block Date the option closes.
.form-group
label.col-xs-4.control-label(for='strikeprice') Strike Price:
.col-xs-5
input#strikeprice.form-control.input-xs(type='number', name='strikeprice', placeholder='example: 100.00', pattern="[0-9]+([\.|,][0-9]+)?", min="0", step="0.50", required)
span.help-block Strike price of the option.
// Text input
.form-group
label.col-xs-4.control-label(for='optionprice') Option Selling Price:
.col-xs-5
input#optionprice.form-control.input-xs(type='number', name='optionprice', placeholder='example: .45', pattern="[0-9]+([\.|,][0-9]+)?", min="0", step="0.05", required)
span.help-block Price the option is selling for.
// Button
.form-group
label.col-xs-4.control-label(for='submit')
.col-xs-4
button#submit.btn.btn-primary(name='submit' type='submit') Submit
script(src='/javascripts/jquery-2.0.3.min.js')
script(src='/javascripts/bootstrap.min.js')
Remote Modal Jade (Not referencing any form data yet) answer.jade:
html
body
.modal-header
button(type="button" class="close" data-dismiss="modal" aria-hidden="true")×
h4.modal-title(id="myModalLabel") This Is An Awesome Title
.modal-body
p This Body Is Great
.modal-footer
button.btn.btn-default(data-dismiss="modal") Close
app.js for Routing:
...
app.get('/', routes.index);
app.get('/cover', cover.coverForm);
app.post('/cover', cover.doCover);
...
cover.js:
exports.doCover = function(req, res) {
var mystockdata = [];
console.log("Here is the symbol I got: " + req.body.symbol);
StockPrices.find({
Symbol: req.body.symbol
})
.sort('Date')
.exec(function(err, stockdata) {
if (!err) {
stockdata.forEach(function(stockdata) {
mystockdata.push({
"MarketDate": stockdata.Date,
"Open": stockdata.Open,
"High": stockdata.High,
"Close": stockdata.Close,
"Volume": stockdata.Volume
});
});
console.log("Here is the stock Data: " + stockdata);
} else {
console.log(err);
}
res.render('answer', {});
});
};
So my question really is how Do i route this so that on click of submit on cover-form.jade I can execute a bootstrap modal and fire the post rendering the modal content using the doCover function?
Maybe I am approaching this completely wrong as well, not sure how to accomplish what I want.
Any help greatly appreciated.
Was able to make it work but not remotely
Bootstrap 3 buttons are submit type by default, so I used a standard one that fired a modal...
button#submit.btn.btn-primary(name='submit' data-toggle="modal" data-target="#myModal") Submit
Then I put the standard Bootstrap modal stuff at the top of my page:
.modal.fade(id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true")
.modal-dialog.wide-modal
.modal-content
.modal-header
button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
h4.myModalLabel.modal-title
| #{title}
.modal-body
#container(style="width:90%; height:400px;")
.modal-footer
button.btn.btn-primary(type='button', data-dismiss='modal') Close
Then the real trick was to check if the route fired from app.js was a post or a get. If it was a post meaning the form was submitted, then I used jQuery to show the modal. Otherwise it tries to show but immediately routes back to just the form. I did this by checking a variable that is only rendered on the post function (strikeprices):
script.
$(document).ready(function(){
if(#{strikeprices}){
$('#myModal').modal('show')
}
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
});