Create custom jQuery UI close button

Question

There are several responses here regarding this question or one similar - they are either obsolete or inaccurate.

I am trying to add my own custom close element to a jQuery UI dialog. I'm guessing I need to either use a delegated handler or be able respond to some event fired by the dialog function.

Obviously $(document).ready() won't work because the dialog happens after the document is loaded.

So - how do go about this? I'm sure I'm missing something pretty simple. (hopefully) Ref: https://api.jqueryui.com/dialog

So far, the feedback I'm getting presumes that there is an element on which I can attach an event handler... It does NOT exist at the time that the script run for the page in question

That works WHEN and only when I run it from a debug window with the dialog box open. When I put that simple command in the script attached to the page... nothing gets attached The command I used in this example is very very simple

jQuery( ".name-group-name" ).click(function() {
  console.log('hello');
});

Answer 1

It's still not clear what you want and you have provided no example. Here is the basic Dialog Example from https://jqueryui.com/dialog/

First we initialize the Dialog. Once done, we can use the widget method to work with the wrapper. We can select the specific element from the widget and than change it if we want.

$(function() {
  var dlg = $("#dialog").dialog();
  var dlgClose = dlg.dialog("widget").find(".ui-dialog-titlebar-close");
  console.log(dlgClose);
  var newButton = $("<button>", {
    class: "ui-dialog-titlebar-close"
  }).html("Close").button().click(function() {
    dlg.dialog("close");
  });
  dlgClose.replaceWith(newButton);
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

If you just want to change the Icon, you can find the <span> and remove the current ui-icon-closethick class and add your own. If you want to replace the element, you may need to bind a new click event to it.

You can see the element is now:

<button class="ui-dialog-titlebar-close ui-button ui-corner-all ui-widget">Close</button>

Hope that helps.

Answer 2

Found the solution. To recap, I'm executing a command that looks like this:

<a href="/admin/config/development/sync/diff/block.block.bartik.search" class="use-ajax" data-accepts="application/vnd.drupal-modal">Show me a modal</a>

The logic and mechanics of how this is working is explained (somewhat) here

The problem is that every example and suggestion has assumed that the jQuery Dialog element was created explicitly with my code. That is not the case. None of solutions offered will work without the following.

Somehow, we have to listen for the event. That is done like this:

// catch dialog event
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
    //Do some work here
});

That very close to the code example in the jQuery API reference:

$( ".selector" ).on( "dialogopen", function( event, ui ) {} );

The difference is that event is not bound to a non-existent selector (which was exactly the problem I tried to explain. Instead, it is bound to $(document).

Hope this will someone else avoid days of trial and error