Develop Reference

I can't close dialog in jointJS

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();
},

When using setHandler in ExtJS button, the handler function was executed right away

I added a button to a panel. When you click the button, a popup window will show up. I tried to update the content of the popup using setHandler. But whenever setHandler was called, the handler function was executed right away. Here is the example code:
me.panels[i].getDockedItems()[0].setHandler(Popup({html: tiphtml}), this);
...
Popup = function(cfg) {
cfg = Ext.apply({
height: 100,
width: 200,
layout: 'fit'
}, cfg);
Ext.create('Ext.window.Window', {
title: cfg.title,
height: cfg.height,
width: cfg.width,
layout: cfg.layout,
html: cfg.html
}).show();
}

you need to nest your function in an anonymous function. You are actually calling the function in your code, not passing it. This will work:
me.panels[i].getDockedItems()[0].setHandler(function(){Popup({html: tiphtml})}, this);
...
Popup = function(cfg) {
cfg = Ext.apply({
height: 100,
width: 200,
layout: 'fit'
}, cfg);
Ext.create('Ext.window.Window', {
title: cfg.title,
height: cfg.height,
width: cfg.width,
layout: cfg.layout,
html: cfg.html
}).show();
}

How to make popup window in Liferay?

How to make popup window in Liferay?
This my code. It's like in Liferay Wiki.
var popup = new Liferay.Popup( {
header: 'our title',
position:[150,150],
modal:true, width:500,
height:300,
xy: ['center', 100],
url: '/my_file.jsp',
urlData: { winowState : 'LiferayWindowState.EXCLUSIVE'}
} );
What is missing?
PS: I'm trying to put it working in Liferay 6.0

On top of sandeepnair85's answer, to AJAX in content form your URI, you'll have to add the following code:
<aui:script use="aui-dialog">
function showPopup(){
var dialog = new A.Dialog({
title: 'DISPLAY CONTENT',
centered: true,
modal: true,
width: 200,
height: 200
}).plug(A.Plugin.IO, {
uri: 'http://myurl.com'
}).render();
}
</aui:script>
More details on how the A.Plugin.IO plugin works can be found here:
http://alloy.liferay.com/deploy/api/A.Plugin.IO.html

Hi can you try this code. Its a simple example on how to create popup in liferay usin AUI
<aui:script use="aui-dialog">
function showPopup(){
var dialog = new A.Dialog({
title: 'DISPLAY CONTENT',
centered: true,
modal: true,
width: 200,
height: 200,
bodyContent: "My First popup"
}).render();
}
</aui:script>

Calling javascript when a partial view is loaded

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);

Problems with custom alert box via jqueryid dialog

I've been working on a custom alert box that has the same style as the rest of the website via jquery-ui. It was working well except that it wouldn't open more than once. As I was trying to fix that, I broke the whole thing some how, and now I get this error:
Node cannot be inserted at the specified point in the hierarchy" code: "3
Below is the code. doAlert() is a simple replacement for alert(). Later it will have more features. show_support() creates dialog box in a similar way to doAlert(), except that it works perfectly.
function doAlert(msg, title) {
var alert_box = $('body').append('<div id="alert_box" class="centered" style="padding:.5em;vertical-align:middle;display:none;"><p>' + msg + '</p></div>');
title = typeof(title) != 'undefined' ? title : 'Message';
alert_box.dialog({
modal: true,
title: title,
width: 400,
height: 150,
resizable: false,
overlay: {
opacity: 0.5,
background: 'black'
},
buttons: {
'Ok': function() {
$(this).dialog('close');
}
},
close: function() {
$(this).dialog('destroy').remove();
}
});
}
function show_support() {
var dialog = $('body').append('<div id="dialog_support" style="display:none;"></div>');
$('#dialog_support').load('/supporttracker', {action:'get_dialog'})
.dialog({
modal: true,
title: "Support",
width: 620,
height: 400,
buttons: {
"Send": function() {
if (!$('#issue_message').val()) {
doAlert('Your message cannot be blank. Please enter your message.');
return;
}
$.ajax({
type: 'POST',
url: '/supporttracker',
data: 'action=add_simple&'+$('#issue').serialize(),
success: function(msg){
doAlert('Thank you. We will get to your question/issue as soon as we can. Usualy within 24 hours.');
$('#dialog_support').dialog('close');
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
doAlert('An error accured: '+textStatus);
}
});
},
"Cancel": function() {$(this).dialog('close');}
},
close: function() {
$(this).remove();
}
});
}
Anyone have any ideas of how I messed up doAlert?

Look at the close method. doAlert seems to be doing a dialog('destroy'), then calling remove on it. show_support is simply removing the dialog from the DOM. I don't know what the dialog method returns so it may be that the DOM element isn't actually getting removed and thus reinserting it fails -- since you can't have to elements with the same id.
If it were me I'd create the dialog on page load (hidden), then simply update a message when it needs to be shown, and use open/close to reuse the element rather than recreating it.
<div id="alert_box" class="alert-dialog" style="display: none;">
<p id="alert_message">An error occurred.</p>
</div>
<script type="text/javascript">
$(function() {
$('#alert_box').dialog({
modal: true,
width: 400,
height: 150,
resizable: false,
overlay: {
opacity: 0.5,
background: 'black'
},
buttons: {
'Ok': function() {
$(this).dialog('close');
}
}
});
});
function doAlert( msg, title )
{
$('#alert_message').html(msg);
$('#alert_box').attr( 'title', title )
.dialog('open');
}
</script>