Here is and a screenshot I uploaded for you I have edited my post, according to your advice in comments, posting my updated version of my code.I enclose in /**/ my original post for helping you.
/*In jointJS I try using a `ui.dialog` to delete all my graph with the following code:
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
dialog.on('action:ok', this.graph.clear, this.graph);
dialog.on('action:cancel', dialog.close, dialog);
dialog.open();
},
After pressing OK button I successfully delete my graph but my dialog still remains without being able to delete it.
Any help please? */
Here is my updated code which unfortunately still doesn't work as expected. I remind you that in this dialog form which displays an OK and Cancel button I want the following ones:
1)When pressing OK I want to :
a)Delete my current graph And
b)Close my dialog
2)When pressing Cancel I want to:
Close my dialog (Which in my initial version worked successfylly with dialog.close)
openNew: function() {
// By pressing Create New Process button, a popup form asks for
//our confirmation before deleting current graph
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
//Since in 'action:ok' of dialog.on the 3rd parameter is used in the
//callback of multi_hand we must pass dialog and graph both together.To do so
//we enclose them in an object named together and we pass it instead
together= {dialog : dialog, graph : this.graph};
//Since jointJS supports assigning multiple events for same handler
//BUT NOT multiple handlers for the same event we create function multi_hand
multi_hand: function (together)
{
together.graph.clear();
together.dialog.close();
}
dialog.on('action:ok', multi_hand, together);
dialog.on('action:cancel', dialog.close, dialog);
dialog.open();
},
By using this new code my joinjtJS project crashes unexpectedly.
How will I make OK button work please?
The third argument in dialog.on is the context passed into the callback function (2nd argument). It says, what is bind to this in the callback function.
In your example is not clear where the graph is defined, if it is really this.graph. However, you can simply do it like in the following example, without passing the context:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 650,
height: 400,
model: graph,
linkPinning: false
});
var r = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: 100, height: 40 },
}).addTo(graph);
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Confirm',
content: '<b>Are you sure?</b>',
buttons: [
{ action: 'yes', content: 'Yes' },
{ action: 'no', content: 'No' }
]
});
dialog.on('action:yes', function() {
graph.clear();
dialog.close()
});
dialog.on('action:no', dialog.close, dialog);
dialog.open();
if the graph is defined on this:
dialog.on('action:yes', function() {
this.graph.clear();
dialog.close();
}, this);
I solved my problem this way and I just want to share it with all of you as a reference.
openNew: function() {
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
dialog.on('action:ok', this.graph.clear, this.graph);
dialog.on('action:ok action:cancel', dialog.close, dialog);
dialog.open();
},
Related
I need help with OpenUI5. I created button in View and by clicking on button it creates Dialog window and throws an error so I cant proceed to functionality of the Dialog.
Button in view:
<m:Button text="{i18n>RESULTS_CHANCES_SEND_EMAIL}"
class="sapUiMediumMarginBegin results-button"
tap="sendToEmail"
press="sendToEmail"
icon="sap-icon://email">
Function in Controller:
sendToEmail: function() {
var email = new Dialog({
title: 'שליחת תוצאות לדוא"ל',
type: 'Message',
content: [
new Input('submitEmailInput', {
liveChange: function (oEvent) {
var sText = oEvent.getParameter('value');
var parent = oEvent.getSource().getParent();
parent.getBeginButton().setEnabled(sText.length > 0);
},
width: '100%',
placeholder: 'דואר אלקטרוני'
})
],
beginButton: new Button({
text: 'שליחה',
enabled: false,
icon: 'sap-icon://email',
press: function () {
//var sText = sap.ui.getCore().byId('submitEmailInput').getValue();
//MessageToast.show('Email is: ' + sText);
// here comes the API request
email.close();
}
}),
endButton: new Button({
text: 'סגירה',
icon: 'sap-icon://decline',
press: function () {
email.close();
}
}),
afterClose: function () {
email.destroy();
}
});
email.open();}
The error: duplicate id
Many thanks!
you have attached the same event handler to "tap" and "press" events so sendToEmail is being called twice (and the second time the control with the same ID already exists)... remove "tap" as this is depreciated, so you should end up with:
<m:Button text="{i18n>RESULTS_CHANCES_SEND_EMAIL}"
class="sapUiMediumMarginBegin results-button"
press="sendToEmail"
icon="sap-icon://email">
I'm struggling to get a Dijit dialog to work for a reproducible example. I took the working code from this JSfiddle and simply tried to turn this into a named function to use throughout the example.
The author uses:
new Button({label: 'Show dialog', onClick: function() {
//Create dialog programmatically here
}
});
but I've changed this to be slightly different:
function launchSelectDialog(selectOptions) {
//Create dialog programmatically here
}
registry.byId("default-launch", "onClick", launchSelectDialog(allOpts));
Here is my version. Unfortunately, this just launches the dialog immediately upon loading the page, and never again when clicking on the button.
I have checked the NoWrap option in JSFiddle. I have no other clues about what's going on.
Please help if you have any ideas.
There are couple of issue.
1) Like others a have pointed out, you are invoking the function not setting up the event with function. hence the dialog is visible onload.
2) You need to wait till the html has been parse. or you need to use parser.parse()
Here is the updated fiddler: http://jsfiddle.net/49y3rxzg/9/
() is an invocation operator. You are calling the function yourself and the returned value of the function is set as the event handler. If you want to reuse the function, use a closure:
function launchSelectDialog(selectOptions) {
// the returned function will be used as the event handler
return function() {
// the passed `selectOptions` is remembered in this context
}
}
Another option is:
registry.byId("default-launch", "onClick", function() {
launchSelectDialog(allOpts);
});
You need to initiate your Button widget before retrieving with registry.byId().
In your code actually registry.byId("default-launch") was returning undefined;
Also registry.byId() function accept only an id so additional parameters will be ignored.
To fix it you should initiate a Button instance properly and declare launchSelectDialog(allOpts) withinonClick, as:
var myButton = new Button({
label: "Default Options",
onClick: function() {
launchSelectDialog(allOpts);
}
}, "default-launch");
Below fixed version for your script.
http://jsfiddle.net/usm829jq/
require([
"dojo/dom",
"dijit/Dialog",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/registry",
"dojo/domReady!"
], function(dom, DijitDialog, Button, BorderContainer, ContentPane, registry) {
var allOpts = [{
label: "Foo",
value: "foo"
}, {
label: "Bar",
value: "bar"
}]
var myButton = new Button({
label: "Default Options",
onClick: function() {
launchSelectDialog(allOpts);
}
}, "default-launch");
function launchSelectDialog(SelectOptions) {
var layout = new BorderContainer({
design: "headline",
style: "width: 400px; height: 400px; background-color: yellow;"
});
var centerPane = new ContentPane({
region: "center",
style: "background-color: green;",
content: "center"
});
var actionPane = new ContentPane({
region: "bottom",
style: "background-color: blue;"
});
(new Button({
label: "OK"
})).placeAt(actionPane.containerNode);
(new Button({
label: "Cancel"
})).placeAt(actionPane.containerNode);
layout.addChild(centerPane);
layout.addChild(actionPane);
layout.startup();
var dialog = new DijitDialog({
title: 'dialog title',
style: {
//width: '400px',
//height: '400px',
},
content: layout
});
dialog.containerNode.style.backgroundColor = "red";
dialog.startup();
dialog.show();
}
})
I have a button add that opens a window (win) that contains some textarea and a submit button.
My problem is that i want to use the id of the add button the function submit(btn). How can i get it?
var btn_add = Ext.create('Ext.Button', {
width:65,
height:30,
text:'Add',
id:"btn_add",
iconCls: 'add',
handler: onButtonClick
});
function onButtonClick(btn) {
switch (btn.id){
case "btn_add": {
win.show();
break;
}
}
win = new Ext.Window({
title: 'Form',
autoScroll: true,
y: 120,
width: 300,
height: 160,
modal: true,
closeAction: 'hide',
items: [name,btn_submitform]
});
var btn_submitform = Ext.create('Ext.Button', {
width:75,
height:30,
text:'Submit',
id:"btn_submitform",
handler: submit
});
function submit(btn) {
if(btn.id="btn_add"){
}
}
Try to create a class in order to define your button. After that, try to catch it by its alias\xtype wherever you want it.
Ext.define('MyApp.CoolBtn', {
extend: 'Ext.Button',
alias: ['widget.coolbtn'],
title: 'Yeah!'
});
// Using Ext.create
Ext.create('widget.coolbtn');
Ext.ComponentQuery.query('coolbtn'); // Get you cmp by alias
I am using qtip2 for displaying the alert messages for my web application ( as shown at http://craigsworks.com/projects/qtip2/demos/#dialogues )
my code is
1) for dialogue
function dialogue(content, title) {
/*
* Since the dialogue isn't really a tooltip as such, we'll use a dummy
* out-of-DOM element as our target instead of an actual element like document.body
*/
$('<div />').qtip(
{
content: {
text: content
, title: {
text: 'PMGSY ',
button: 'Close'
}
},
position: {
my: 'center', at: 'center', // Center it...
target: $(window) // ... in the window
},
show: {
ready: true, // Show it straight away
modal: {
on: true, // Make it modal (darken the rest of the page)...
blur: false, // ... but don't close the tooltip when clicked
escape: false
}
},
hide: false, // We'll hide it maunally so disable hide events
style: {
classes: 'qtip-shadow qtip-rounded qtip-dialogue', // Optional shadow...
widget: true //themeroller
},
events: {
// Hide the tooltip when any buttons in the dialogue are clicked
render: function (event, api) {
$('button', api.elements.content).click(api.hide);
},
// Destroy the tooltip once it's hidden as we no longer need it!
hide: function (event, api) { api.destroy(); }
}
});
}
2) to call it as alert
function Alert(message) {
// Content will consist of the message and an ok button
var message = $('<p />', { text: message }),
ok = $('<button />', { text: 'Ok', 'class': 'full' });
dialogue(message.add(ok), 'Alert!');
}
the problem is when i use it ,its does not block the further processing until user click on ok button (like default alert function).
e.g this alert does not even show up.
Alert("Customised alerts"); //this doesent show
window.location.replace("/Home/startPage");
how to make my custom alert mimic the default alert function ?
Please help
Replace
ok = $('<button />', { text: 'Ok', 'class': 'full' });
with
ok = $('<button />', { text: 'Ok', 'class': 'full' }).click(function(){
window.location.replace("/Home/startPage");
});
I have an ASP.NET MVC application. In the application, I have a page with a button on it. When I click on the button a partial view is rendered in a window (see below). Inside the view I have a combo box and I need to load the combo box after the view is rendered. I tried to call the js right after win.show() but that doesn't work because the textbox used to render combo is inside the partial view. When should I call the js? Any help regarding this will be highly appreciated. Thanks!
var win;
if (!win) {
win = new Ext.Window({
layout: 'fit',
width: 750,
height: 630,
closeAction: 'hide',
plain: true,
autoLoad: {
url: '../SearchJob/SearchPanel'
},
buttons: [{
text: 'Submit',
handler: function () { }
}, {
text: 'Close Me',
handler: function () {
win.hide();
}
}]
});
}
win.show(this);
}
You might add the < script > tag to the end of the partial view. That way the script will not be parsed/executed until the partial view is completely rendered.
Can you use the afterrender event on Ext.Window?
Since you are using autoLoad to load the partial view contents, you have to wait until the window has received the response with the partial view contents and has been updated with the components/markup... so you can listen for the update event of the window's updater...
win.on('render', function(component) {
win.getUpdater().on('update', function(el, response) {
// Load Combo
}, win, {single:true});
});
[EDIT]
Make sure you set the event handler to run only once though... edits are above
var win;
if (!win) {
win = new Ext.Window({
layout: 'fit',
width: 750,
height: 630,
closeAction: 'hide',
plain: true,
autoLoad: {
url: '../SearchJob/SearchPanel'
},
buttons: [{
text: 'Submit',
handler: function () { }
}, {
text: 'Close Me',
handler: function () {
win.hide();
}
}]
});
win.on('render', function(component) {
win.getUpdater().on('update', function(el, response) {
// Load Combo
}, win, {single:true});
});
}
win.show(this);