confirm dialog in dojo - javascript

How to create a confirm dialog box in dojo? I would like to have an ok cancel dialog to appear on button click with dojo dialog (no javascript confirm dialog).
So far i can only display a dialog on click event.
Heres my code:
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
var secondDlg;
dojo.ready(function(){
// create the dialog:
secondDlg = new dijit.Dialog({
title: "Programmatic Dialog Creation",
style: "width: 300px",
draggable:false
});
});
showDialogTwo = function(){
// set the content of the dialog:
secondDlg.set("content", "Hey, I wasn't there before, I was added at " + new Date() + "!");
secondDlg.show();
}
</script>
</head>
<body class="claro" style="margin-right:10px;">
<button id="buttonTwo" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:showDialogTwo" type="button">Show me!</button>
</body>
How can i make this ok cancel dialog box?

<script type="dojo/method" event="onClick">
var dialog = new dijit.Dialog({
title: "Delete Switch Type",
style: "width: 400px",
content : "Do you really want to delete ?????<br>"
});
//Creating div element inside dialog
var div = dojo.create('div', {}, dialog.containerNode);
dojo.style(dojo.byId(div), "float", "left");
var noBtn = new dijit.form.Button({
label: "Cancel",
onClick: function(){
dialog.hide();
dojo.destroy(dialog);
}
});
var yesBtn = new dijit.form.Button({
label: "Yes",
style : "width : 60px",
onClick : <your function here>,
dialog.hide();
dojo.destroy(dialog);
}
});
//adding buttons to the div, created inside the dialog
dojo.create(yesBtn.domNode,{}, div);
dojo.create(noBtn.domNode,{}, div);
dialog.show();
</script>
I'm using this code as inline dojo/method - on the click event of the button. you can modify anyway

The Confirm Dialog is supported since Dojo 1.10.
See the release notes and the documentation.

The solution above does not take into account the little cross at the top right of the dialog.
I had done, long ago, a little suite of dialogs, you might find some happiness here, especially ConfirmDialog.js
I just uploaded them on github today so you can take a look at them : http://github.com/PEM-FR/Dojo-Components/tree/master/dojox/dialog
They should be usable "as-is" or with minor changes

Related

How to add multiple items to context menu in Kendo Scheduler?

"kendoContextMenu" is one of control from Telerik suit. I am trying to attach it with Kendo Scheduler control.
Below is the code to render scheduler and menu
Part of it taken from Kendo sample site
<div id="example">
<div id="scheduler"></div>
<ul id="contextMenu"></ul>
</div>
Here is Context Menu Initialization
$("#contextMenu").kendoContextMenu({
filter: ".k-event, .k-scheduler-table td",
target: "#scheduler",
select: function(e) {
var target = $(e.target);
if (target.hasClass("k-event")) {
var occurrenceByUid = scheduler.occurrenceByUid(target.data("uid"));
} else {
var slot = scheduler.slotByElement(target);
}
},
open: function(e) {
var menu = e.sender;
var text = $(e.target).hasClass("k-event") ? "Edit Title" : "Block";
menu.remove(".myClass");
menu.append([{text: text, cssClass: "myClass" }]);
}
});
});
The above code adds only ONE item in context menu and click event directly fires up. I would like to have multiple items in a context menu and each should have its own event so that I can use them as it clicked.
Below image shows right click behavior, where it shows only Block in a menu
I am trying to get menu as below- which has multiple items and have its own click events
I am trying like below by appending text but it's seems to be wrong way to do and it can not have separate click event.
open: function(e) {
var menu = e.sender;
var text = $(e.target).hasClass("k-event") ? "Edit event" : "Add Event";
text = text + "|" + "Cancel"
menu.remove(".myClass");
menu.append([{text: text, cssClass: "myClass" }]);
}
Kindly help
I'm afraid you're appending it wrong. By concatenating "| Cancel" you're not adding a new item, but adding text to the existing one.
Try creating a new object and append it with append():
menu.append([{text: "Cancel", cssClass: "cancel-opt" }]);
Then you check by the class inside the select event:
if (target.hasClass("cancel-opt"))

How to simulate a Real Mouse click for DOJO

I have a web application which is on HTML5... In that i have a dojo dialogue box for some user operations... Now i want to click the title bar of that dialogue box... The title bar of the dialogue box is accessible by ele = document.getElementById("searchFrame_title");...
and i am performing the click on the dialogue box's title bar by this...
ele = document.getElementById("searchFrame_title");
ele.style.cursor = 'move';
var evt = new MouseEvent("click", {
view : window,
bubbles : true,
cancelable : true,
}), ele = document.getElementById("searchFrame_title");
ele.dispatchEvent(evt);
alert("clicked");
While everything's fine but on clicking the title bar of the dojo dialogue box it doesn't comes in visible area...
Scenario...
I dragged the dialogue box at the bottom of the web page(really bottom any further will push it upwards). then i performed a click on the box which appends some data on the dialogue box due to which the data appended goes inside the screen.
Problem...
When i click on the title bar manually the dialogue box automatically moves it upwards to the viewable area calculated from the bottom. But when i simulate the click from the code(shown above), it doesn't do so...
How to do it...
The positioning is not done at the click time but at the end drag time. Simulating a click does not trigger the drag mechanism.
However, you can workaround it. That's a dirty trick but you can call _endDrag() method of the dialog (instead of simulating a click)
See:
require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
var dialog = new Dialog({
content: document.getElementById('dialogContent')
});
dialog.show();
document.getElementById('repositionMe').onclick = function() {
dialog._endDrag();
}
document.getElementById('addTo').onclick = function() {
document.getElementById('content').innerHTML += '<br>' + document.getElementById('content').innerHTML;
}
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<body class = "tundra">
<div id="dialogContent">
<button id="addTo">add content</button>
<button id="repositionMe">reposition me</button>
<div id="content">this is the content of the dialog</div>
</div>
</body>

ModalWindow with out address bar and title string

I have tried to create a new modal window.But it shows an address bar and title is shown as about:blank.The code is shown # http://jsfiddle.net/visibleinvisibly/vhudmz5u/
<button id="mydiv" onclick="myFunction( )"> The content</button>
<script>
function myFunction() {
var childWin = window.open ("about:blank", "MyWindow", "height=150,width=200");
childWin.document.body.innerHTML = "<span style='color:red'>Hello World!</span>";
}
</script>
I guess in IE11 we cant hide the addressbar.Please let me know if you have any idea as to how to set the title for the modal popup..
Thanks in advance
Alex
If you want total control over the modal window, it may be a better idea to create your own. The idea is to create a div (the 'modal window' box) and a greyed out background layer between your page and the created div. This jsFiddle provides some code for that. It uses jQuery. The central function is:
function createModalBox(html,useCloser){
var box = $('#modalbox').length
? $('#modalbox')
: $('<div id="modalbox"></div>').appendTo('body');
var back = $('#modalback').length
? $('#modalback')
: $('<div id="modalback"/>').appendTo('body');
box.html(html);
if (useCloser){
$('<div id="modalclose" class="closer"/>').appendTo(box).show();
}
back.show();
setTimeout(function(){box.fadeIn(); center(box[0]);},100);
if (!back.attr('data-handled')){
var f = function(){
$('#modalback, #modalbox').fadeOut();
$('#modalbox').remove();
};
$('body').on('click','#modalclose',f);
back.attr('data-handled', true);
}
}

jQuery UI Dialog is not opening second time, but background is inaccessible

Dialogs are generated with JSTL foreach tag.
The first time I try to open dialog (any of them), it opens normally, but the second time I try to open it, the background turns grey and is inaccessible due to dialog being modal, but dialog window is not shown.
There are a lot of questions with this problem and I read through a lot of them, but as far as I understand, none of them describes this situation.
This is my HTML:
<button id="buttonAddTask${category.id}" class="buttonAddTask">Add Task</button>
...
<div id="dialog${category.id}" title="Create new task" class="task-dialog">
<form:form id="taskForm${category.id}"
action="${contextPath}/someAction"
method="POST" modelAttribute="someAttribute">
<fieldset>
<form:input type="text" path="taskName" id="taskName"
class="text ui-widget-content ui-corner-all" />
<form:textarea rows="4" path="taskDescription"
id="taskDescription" name="taskDescription"
class="text ui-widget-content ui-corner-all">
</form:textarea>
</fieldset>
</form:form>
</div>
This is my js code:
$(function() {
var form;
var taskDialog = $(".task-dialog");
var buttonAddTask = $(".buttonAddTask");
taskDialog.dialog({
autoOpen : false,
height : 500,
width : 415,
modal : true,
buttons : {
"Create task" : addTask,
Cancel : function() {
taskDialog.dialog("close");
}
},
close : function() {
var form = $(this).find("form")[0].reset();
allFields.removeClass("ui-state-error");
}
});
function addTask() {
var thisId = $(this).attr("id").substring(6, 106);
$("#taskForm" + thisId).submit();
return true;
}
buttonAddTask.on("click", function() {
var thisId = $(this).attr("id");
var idNumber = thisId.substring(13, 14);
$("#dialog" + idNumber).dialog("open");
});
});
I open dialog with .dialog("open"), and close it after. Dialog is accessed via id selector, so it should be accassible after it is moved to the end of body tag. What am I doing wrong or what do I have to do to show dialog second time?
I'm using jQuery 2.1.1 and jQuery-ui 1.11.2.
I got it after a while.
This was copy/paste from some example, and it was modified to suit my needs. The trick was to remove undeclared variable "allFields" in close function.
Line to remove:
allFields.removeClass("ui-state-error");
If you have similar problem, check your close function for undeclared varibles, and remove them.

Dojo modeless alert display

I am trying to display an alert box using Dojo. The alert box behavior will be modeless. All work is done through a Javascript which has functions to addScript/CSS and these functions work fine. Though i am not bale to display alert using Dojo. Here is my code:
//DojoThemes and Libraries
addStylesheet('http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css');
addStylesheet('http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css');
addScript('http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.js');
//dojo.require("dojo.ready");
//dojo.require("dijit.Dialog");
var dojoDialogBox = document.createElement('script');
dojoDialogBox.innerHTML = 'require(["dojo/ready", "dijit/Dialog"], function(ready, Dialog){ ready(function(){ myDialog = new Dialog({ title: "My Dialog", content: "Test content.", style: "width: 300px" }); }); });';
document.getElementsByTagName('head')[0].appendChild(dojoDialogBox);
function myFuncc() {
myDialog.show();
}
<script>
addStylesheet('http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css');
addStylesheet('http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css');
addScript('http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.js');
</script>
<!--
closing script tag here will allow dojo.js script
tag to get written - otherwise
'require' is an undefined
-->
<script>
require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
myDialog = new Dialog({
title: "My Dialog",
// since we are inside a require(function() {}) closure, lets set an ID
// so that externally (from outside this require function) we can get the dialog
id:'myDialog',
content: "Test content.",
style: "width: 300px"
});
});
function myFuncc() {
dijit.byId('myDialog').show();
}
</script>

Categories

Resources