The system of jQuery Dialog UI is unable to recognize when the close icon is clicked

How can I detect if a user closes my dialog modal box using the 'X' button in the upper-right corner of the titlebar? I've been struggling to find a solution while using jQuery's Dialog UI plugin. Here is what I have tried so far:

$('.myModal').dialog({
    title: 'dialog 1',
    beforeClose: function(){
        //do something
    }
}).dialog("open");

The issue with this approach is that the function gets executed regardless of the user action, such as clicking "OK" instead of the 'X' button.

I have thoroughly reviewed the dialog documentation but couldn't find any suitable event, method, or option that meets my requirements. If you have any ideas or suggestions, please feel free to share them. Your help would be greatly appreciated!

jqueryjquery-uieventsjquery-ui-dialog

Answer №1

Take a look at this interesting link...

The answer you seek can be found in the fourth response below, where he mentions this helpful link.

http://jsbin.com/obafo

This link leads to an example that showcases the following code snippet...

$("#dialog").dialog({

close: function(event, ui) {

    if ( event.originalEvent && 
                $(event.originalEvent.target).closest(".ui-dialog-titlebar-close").length ) {

        $("body").append("perform some actions<br>");

    }

}

})
.find("button")
.click(function() {

    $("body").append("simply close the dialog<br>");

    $(this).closest(".ui-dialog-content").dialog("close");

});

Answer №2

Make sure to add the two additional parameters to the beforeClose callback function.

$('.myModal').dialog({title: 'dialog 1'
                  beforeClose: function(event,ui){ //do something }}).dialog("open");

It's important to verify the values of the event and ui variables to determine if the user clicked on the 'X' button or not.

Answer №3

To handle the closing event of the dialog box, you can add a click event listener to the close button:

$('.myModal')
    .dialog("widget")
    .find(".ui-dialog-titlebar-close").click(function() {

        // Put your custom logic here

    });

Answer №4

In case you haven't made any changes to the default close text, which is usually displayed as an X but with the inner text 'close'.

$('#acceptsignaturediv').dialog({
             title: 'Custom Title',
             height: 400,
             width: 400,
             buttons: { "Accept": function () { alert('Accept'); },
                 "Decline": function () { alert('Decline'); }
             },
             beforeClose: function (event, ui) { if (event.originalEvent != undefined && event.originalEvent.srcElement.innerText == "close") { alert('You must accept or decline'); return false; } }
         });

Answer №5

After carefully examining the original event, I discovered that it was triggered by a click. Despite the complexity of the condition, it effectively achieves the desired outcome.

$('.myModal').dialog({
    title: 'Dialog Box',
    beforeClose: function(){
        if (e.originalEvent && e.originalEvent.originalEvent && e.originalEvent.originalEvent.type == "click") {
            // Perform specific action
        }
    }
}).dialog("open");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery form validation issue, unresponsive behavior

<!DOCTYPE html> <html> <head> <title> jquery validation </title> </head> <body> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js" type="text/javascript"> ...

javascriptjqueryjquery-validate

Utilize angular to call a function when navigating

Having an issue with ChartJS while creating a chart using angular. The problem arises when navigating to a new page and then back to the original one, as the JavaScript is not triggered again. Is there a way to automatically invoke a JavaScript function o ...

javascriptjqueryangularjs

Is there a way to grab code from a different HTML page using JavaScript and jQuery when the user clicks on something?

After testing various codes for the intended purpose mentioned in the title, I have observed a peculiar behavior. The code from settings.html appears briefly and then disappears rapidly. Javascript: function load() { $("#paste").load("settings.html") ...

javascriptjqueryhtml

Encountering a 'oembed is null' error in the firebug console while using JQUERY OEMBED

There seems to be an issue with oembed causing an error message in firebug's console window. Specifically, the error is displayed as: oembed is null oembedContainer.html(oembed.code); This error occurs when clicking on a link that leads to the jquer ...

javascriptjqueryconsolefirebugoembed

Returning draggable elements to their original placement

I'm looking to create a custom function that resets my draggable elements to their original positions when invoked. This is not related to the built-in revert functionality. $('.drag').draggable({ stack: ".drag", snap: ".dro ...

javascriptjqueryhtml

How can I use CSS to conceal the controls for an HTML5 video?

Seeking advice on how to hide and show controls on an HTML5 video section. I currently have a setup where clicking on the video div opens a modal that plays the video in a larger size. The code for opening the modal and playing the video is working fine. ...

jquerycsshtmlhtml5-video

Using jQuery to navigate to the next sibling element with a particular class

Hey there! I'm looking for a button that can smoothly scroll the window to a specific element with a certain class. I've found a code snippet that sort of works, but it's not skipping over the next sibling correctly when needed. Is there a ...

jqueryscrolltop

Creating an array of objects by parsing JSON using the jQuery .each() method

I am attempting to generate an array of objects by parsing a JSON file. Here is the pertinent code: //president object constructor function president(a_presName, a_presDates, a_presNick, a_presImage) { this.presName=a_presName; this.presDates=a_pr ...

javascriptjqueryarraysjson

Eliminate jQuery's delayed blinking effect with the use of an event

Utilizing the mouseenter and mouseleave events, I have implemented a functionality to add a button (not actually a button) to an <li>. However, there seems to be a problem with my code. The button appears and disappears on mouseleave and mouseenter, ...

javascriptjqueryhtmlcss

HTML5 Advanced API Integration with Vimeo

After setting up my Vimeo account and app for video upload, I received approval. However, when I attempted to upload a video to the Vimeo server, I encountered difficulties. I am struggling to understand how OAuth functions. Please see below for the co ...

jqueryajaxhtmlapivimeo

Can one ascertain the cleared Kendo grid column filter using jQuery?

I am working with a kendo grid that has approximately 10 to 12 columns, each with its own filtering option. My current task requires me to identify when a column filter is cleared and determine which specific column triggered the event. Is there an event w ...

jqueryfilterkendo-grid

Is there a way to achieve the same task with Ajax?

Hey there, I am new to the world of JavaScript and AJAX. I have been reading about how to convert a client-side JavaScript variable into a server-side PHP variable by using AJAX. Can someone please provide me with a code snippet using AJAX for this purpose ...

javascriptphpjqueryajax

Why won't XML load with jquery GET, but does load with a direct link and PHP?

When it comes to pulling in an xml feed, I've been experimenting with using php and simpleXML to load it. Interestingly, I can access the direct link without any issues. However, when attempting to utilize jquery and GET method, the request times out ...

jqueryxmlajax

What is the best way to hide the input field when there are multiple parent classes present?

I am currently implementing dynamic fields with jQuery and everything is functioning correctly. The problem arises when I attempt to remove these fields. After searching on Google and browsing past questions on StackOverflow, I noticed that everyone seems ...

javascriptjqueryhtml

The MVC Partial View triggers the Document.Ready() function using jquery.get() instead of Ajax.BeginForm

After discovering that MVC's Ajax.BeginForm was behaving strangely when returning a view, I realized that the document ready bindings were lost. It seemed that document ready was not being executed as expected. While experimenting with a jQuery get m ...

jqueryajaxasp.net-mvc

Switching the sorting criteria from 'AND' to 'OR' in the JPList library

I am currently exploring the use of JPList to sort on multiple items. As it stands, JPList searches like 'AND' when sorting (e.g. sorting based on an item with tags html, php and jQuery all together), but I am interested in filtering through all ...

jqueryhtmlcsssortingjplist

What is causing the addListener function in the events class to malfunction?

I am a beginner in the world of node.js and attempting to execute this piece of code: var eventlib= require('events'); var emitter= new eventlib(); eventlib.addListener('MessageEvent', function() { console.log('Registered the ...

javascriptjquerynode.jssingle-page-applicationserverside-javascript

Clicking on the button has no effect whatsoever

I'm currently dealing with a button on my webpage that seems to be causing me some trouble: <script> function changeMap() { container.setMap(oMap); } </script> <button onClick="changeMap"> Click here </button> Upon inspe ...

javascriptjqueryhtmlbuttonloading

Identify the moment a dialogue box appears using jQuery

I'm facing a situation where multiple dialogs are opened in a similar manner: $("#dialog").load(URL); $("#dialog").dialog( attributes, here, close: function(e,u) { cleanup } The chall ...

javascriptajaxjquerydialog

Error: Unforeseen symbol detected in JSON data

After receiving a JSON object from my server, I attempted to parse it using the jQuery function. However, upon running var response = jQuery.parseJSON(data), an error was thrown: {"Success":0,"ex":"The system cannot find the file specified"} The error me ...

jqueryjson