Triggering a jQuery event when the close button on a modal dialog is

In my Oracle APEX page, I have a modal dialog region with an inline dialog template. I am trying to trigger an action when the user clicks the close button on the dialog. Here is the code I have written:

$(".ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close").click(function (e) {
      alert('Hi');
      // actions
});

The HTML code for the dialog close button is shown below:

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" 
role="button" aria-disabled="false" title="Close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">Close</span></button>

However, this code is not working as expected. Can anyone help me identify what might be wrong?

jqueryhtmlcssbuttonmodal-dialog

Answer №1

Revise your code as shown below:

$(".ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close").click(function (e) {
  alert('Hello');
  // Perform actions
});

Your <button> element has multiple selectors, so make sure to use a period for all selectors without any spaces, as they all represent the same element.

In addition, using only one selector will provide more clarity. You do not need to include all selectors like this:

$(".ui-button").click(function (e) { 
alert('Hello'); 
// Perform actions 
});

Answer №2

Seems like you may have mistakenly selected the wrong class

jQuery(document).ready(function(){
$(".ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close").click(function (e) {
  alert('Hi');
  // additional actions
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" 
role="button" aria-disabled="false" title="Close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">Close</span></button>

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

The browser is not displaying the HTML correctly for the Polymer Paper-Menu component

I attempted to implement a paper-menu, but I am facing issues with the rendered HTML and its interaction. When I click on a menu item, the entire list disappears due to the paper-item elements not being properly placed inside a key div within the paper-men ...

htmltypescriptangularpolymerpaper-elements

How can I globally assign a JavaScript variable based on an AJAX response?

Here is the ajax code I have: <script> $('a[data-id]').click(function () { var id = $(this).attr('data-id'); var domain = $(this).attr('data-domain'); $.ajax({ url: 'getdata& ...

javascriptjqueryajax

Is it possible to update the content page without having to refresh the master page?

Our website features a Master page with main menu options and corresponding sub menus. When a user clicks on a main menu item, the relevant sub menus should be displayed. After clicking on a sub menu, the content page should update without having to refr ...

javascriptjqueryasp.netajax

Is it possible to utilize Dictionaries (key, value) collections with JQuery?

Is jQuery capable of supporting a collection of Dictionaries which consists of keys and values? I am interested in organizing the following data into a structured format: [1, false] [2, true] [3, false] This structure should allow for adding, looking up ...

javascriptjquerycollectionsdictionary

Crafting an iframe that dynamically adjusts with Tailwind CSS

I'm having trouble ensuring that an iframe fits properly within a div while using tailwind CSS. I'm struggling to make the iframe responsive, no matter what class I try. Can anyone suggest a class that would help me achieve responsiveness for an ...

htmlcssiframe

Having trouble displaying a jQuery mobile dialog on the screen

Currently, I am utilizing version 1.1 of the library and my goal is to display a simple dialog without loading a separate page. I simply want to reveal the content of a div tag already present on the page. Are there any additional jQuery references that I ...

jqueryjquery-mobile

Arrange the columns and rows in a neat layout for the ant design table

I have encountered an alignment issue with the ant design table while listing out my data. The columns are aligned to the right, but the titles for all columns should be aligned to the left by default. You can view the image illustrating this problem using ...

cssreactjsantd

What is the best way to pass a variable from one PHP file to another?

This question may seem like a duplicate, but I found no helpful answers elsewhere. I'm in the process of creating a website where users can respond to various types of questions. To achieve this, I've written code that displays the corresponding ...

phphtmlmysql

Creating a Pinterest-inspired CSS layout from scratch without using any additional plugins

If you want to check out my code on jsfiddle and learn how to create a style similar to Pinterest without using plugins, click on the link below. Within the code, there is a square Node.js diagram that I would like to position down the left side. http://j ...

jquerycsslayout

What is causing this issue with my jQuery UI animation?

Below is the HTML code snippet: <div id="menu_status_item"> <span class="menu_status_bar"></span> </div> Here is the CSS code: #menu_status_item { margin-top: 40px; width: 100%; } .menu_status_bar { margin-le ...

javascriptjqueryhtmlcss

What is the best way to showcase my Bootstrap navigation menu items below my title in a horizontal layout on mobile devices?

When viewing the website on a desktop, I like how the navigation bar looks. However, when resized to a mobile size, it aligns itself vertically under the heading instead of horizontally, which is what I want. I attempted using "display: inline" but it did ...

htmlcsstwitter-bootstrapbootstrap-4responsive-design

Trouble with Loading Google Place Autocomplete API in HTML

I utilized the Google MAP Place Autocomplete API for a web project. Click here to view the code and output. <form> <input id="origin-input" type="text" class="form-control" placeholder="From"/> <br/> <input id="de ...

javascripthtmlgoogle-mapsgoogle-maps-api-3autocomplete

Ways to retrieve the clicked item's index in a jQuery collection without using the index() method

Is there a way to obtain the index of clicked elements easily? var $inputs = $("input"); $inputs.click(function() { console.log($(this).index()) }); This method correctly works for the structure below: div>(input+input+input) However, I am encoun ...

javascriptjqueryhtml

Stopping HTML 5 video playback while transitioning to a different webpage

My website has a layout with a left menu containing video links and a content area where the videos are played. However, I have encountered an issue when switching between videos. Currently, if I click on Video 1 and then decide to watch Video 2 while Vid ...

jqueryhtmlvideo

How should we measure the string as if it were in HTML?

I have the exact string : 123.. I am curious to know what its length would be as a SPAN element on an HTML page. font-name:arial font-size:16px; I decided to conduct an experiment: http://jsbin.com/axezib/edit#preview This resulted in: <span style ...

c#htmlgraphicsdrawing

HTML5 - Ajax - puzzling behavior that I am unable to comprehend

Need Help Clarifying My Issue: I currently have a Div with Page 1 content. Page 1 contains a button that transitions the div content to Page 2. Page 2 has a button that switches the div content back to Page 1. The Problem: If Page 1 is loaded first, t ...

phpjavascripthtmljquery

An occasion to monitor alterations in attributes

Is there a way to attach an event to an HTML element to listen for attribute changes? My goal is to trigger an action when the visibility of a div changes. I can't alter the JavaScript code that controls the visibility, so I need to find a way to dete ...

javascripthtmljqueryjquery-events

Simple method to retrieve the ID of an input field within a form using jQuery selectors

I have a form with each input field having a unique id, and I have attached a jQuery 'input' event to the form. I want to retrieve the id of the field on which the user changes some value using a jQuery function. There seems to be something missi ...

javascriptjquery

Creating an infinite products loader using ajax can be a great way to enhance the

I have encountered a challenging issue that I am struggling to overcome, partly due to my unfamiliarity with the correct terminology. As a newcomer to this field, please forgive the clumsiness of my question. Below is an outline of my objective: Currentl ...

phpjqueryajaxmagentoinfinite-scroll

Trouble with Angular 7: mat-tab active style not showing up

<div class="navigation"> > <mat-tab-group disableRipple="true" selectedIndex="0"> > <mat-tab label="Label1"> </mat-tab> > <mat-tab label="label 2"> </mat-tab> > & ...

cssangularangular-material