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
Related
I am working on fullcalendar-angular component where in I have a custom button called filter, on click of it the modal/dialog/menu-items should open just like dropdown. So how do we implement this under customButton click function? is there a way to add HTML and how? as shown in image.
calendarOptions:CalendarOptions = {
initialView:'dayGridMonth',
themeSystem:'bootstrap',
nowIndicator:true,
//showNonCurrentDates:false,
fixedWeekCount:false,
customButtons:{
myCustomBtton: {
bootstrapFontAwesome:'fas fa-sliders-h',
click: function(click,element){
//how do i add the code here`enter code here`
},
},
},
headerToolbar:{
left:'prev,next today',
center:'title',
right:'dayGridMonth,dayGridWeek,dayGridDay,listMonth myCustomBtton'
},
fullcalendar-angualr custombutton image
I'm a novice at Angular, but I was able to create a dropdown by just injecting some HTML for a dropdown via a function called after the eventDidMount hook.
https://fullcalendar.io/docs/event-render-hooks
I'm happy to give you some sample CSS/JS to show hide the dropdown, too if it's useful to you.
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();
});
I've got this code:
angular.module("myApp", []).controller("myController", function($scope) {
$scope.currentOption;
$scope.showWindow = false;
$scope.myOptions = [{
id: 1,
name: 'This opens the window'
}, {
id: 2,
name: 'Option 2'
}, {
id: 3,
name: 'Option 3'
}];
$scope.showOption = function() {
if ($scope.currentOption.id == 1) {
$scope.showWindow = true;
}
console.log($scope.currentOption);
}
$scope.closeWindow = function() {
$scope.showWindow = false;
}
});
.filterWindow {
width: 100px;
height: 100px;
background-color: rgba(50, 50, 50, 0.5);
z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<select ng-options="option as option.name for option in myOptions" ng-change="showOption()" ng-model="currentOption"></select>
<div ng-if="showWindow" class="filterWindow">
<button ng-click="closeWindow()">Close</button>
</div>
</div>
I've got a dropdown with three options. When I click on an option, it calls me a function with ng-change. The function is just called, when I click on another option in the dropdown list because of the ng-change. I would like to call the function every time I click on an option, also on the same twice in a row. So for example: When I click on 'Option 1', it should call the function (this works). When I click again on the same option (in this case 'Option 1'), so it should call the function again (this doesn't work, because the ng-change didn't detect a change in the dropdown). I tried it with ng-click, but then it calls the functions also when I open the dropdown, this is bad for me. The reason I need this is, in my web application one of my options opens a window, where I can filter a list. So when I filter it and than would like to change the filter critireas, it should open again this window by clicking on the same option which is selected in this moment. That's why the ng-click isn't a good solution, because this window would open also when I open the dropdown. I hope this is clear. Any ideas?
EDIT: So I builded now in the snippet example a window. When you click on the option which opens the window, it works when you do this the first time. Then you close the window, but don't change the option before... After you closed the window, the option which opens the window is still selected. When you click again on it, it don't open the window, becaus there was no change, so ng-change call for the function don't work... How to force this?
Thanks
You should change this function
$scope.showOption = function() { //Check whether drop down has any selected value
if($scope.currentOption) {
console.log($scope.currentOption);
}
}
Use ng-click instead ng-change
And remain the click event. It will not console when you open the drop down but event will trigger. Check this plunker
Hi I've added a button to the toolbar of my KendoUI Grid, but I have a couple of issues, I'm hoping someone can assist with.
I've tried to add one of the kendo web icons next to the button but it doesn't render.
When I click the button in the toolbar I see the following error in the console:
Uncaught ReferenceError: sendEmail is not defined.
I don't understand why it isn't seeing my function. Just for testing purposes I'm displaying an alert until it sees it.
toolbar: [
{ name: "create", text: "Add" },
{ template: "<input type='button' class='k-button' value='Email Users' onclick='sendEmail()' />",
imageclass: "k-icon k-i-pencil" }
]
function sendEmail() {
debugger;
alert('Send Emails');
}
Can someone please help?
You can Use as below:
toolbar: [
{
name: "Add",
text: "Send Email",
click: function(e){alert('Send Emails'); return false;}
}
],
According to the documentation you would need to return the function that you want to occur on click. Like this:
template: '<a class="k-button" href="\\#" onclick="return toolbar_click()">Command</a>'
The documentation
I hope that helps.
this works for me:
you must define your grid in variable
initializing grid and add your button in toolbar option
toolbar: [{ name: "myButton", text: "this is your button text" }]
after initializing write this code to find button and add function:
grid.find(".k-grid-toolbar").on("click", ".k-grid-myButton", function (e) {
alert("it's work") ;});
Is your function sendEmail() initialized in document.ready or $(()=>{}); if not you will have to initialize it or else you could use this way
add a id for the button and write this in your document.ready (remove the onlcick from the button tag).
$("#examplebuttonid").click(()=>{
//write your code in here
});
I want to use modal popups for editing and inserting at view html but i couldn't be sure how to do this?
Is there any way to do this?
I don't want to create new html for insert form because there is only name field. Modal pop-up will suit perfectly i think.
Create your html
<div id="demoDialog" title="Dialog Title">
<!-- Content, form, etc. -->
<form></form>
</div>
Initialize the dialog window
Reference: http://api.jqueryui.com/1.8/dialog/
// Dialog creation
$("#demoDialog").dialog({
resizable: false,
draggable: false,
autoOpen: false,
modal: true,
open: function(){
$(".ui-widget-overlay").hide().fadeTo(800, 0.8);
}
});
// Open the dialog
$("#showDialog").click(function(){
$("#demoDialog").dialog( "open" );
return false;
});
You can use a partial view to load your html content. Have inside your dialog ID somehow to store the value returned from the modal window if you need to feed it to another form or processing.