I can't close dialog in jointJS

Question

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?

Answer 1

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

Answer 2

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