Search code examples
javascriptdialogjointjsrappid

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?


Solution

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