Open In App

jQuery UI Dialog focus Event

Improve
Improve
Like Article
Like
Save
Share
Report

The Dialog box is the way to inform the user about something. It is a nice way to popup on the user window to show the information that will happen in the next or any kind of information the developer wants to clarify to the user should know. jQueryUI dialog method is used to create a basic dialog window inside the page. It has a title bar and a content area and can be moved, resized, and closed with the ‘X’ icon by default. The focus event is triggered when the dialog box gains focus.

Syntax:

$(".selector").dialog (
   focused: function( event, ui ) {
       console.log('focused')
   }, 

CDN Link: First, add jQuery Mobile scripts needed for your project.

<link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”    rel =”stylesheet”>
<script src = “https://code.jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

Example 1:

  • ‘Open Dialog’ button will trigger the click function (#gfg) that will further open the ‘textarea’ in a dialog (#gfg2).
  • focus( event, ui ) : Triggers box gains focus. There is callback function attached to this focus.
    event : Type -> Event

    ui : Type -> Object

    callback function : function( event, ui ) { console.log(‘focused’)}

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link href=
      rel="stylesheet"/>
    <script src=
    </script>
    <script src=
    </script>
    <script type="text/javascript">
      $(function () {
        $("#gfg2").dialog({
          autoOpen: false,
          focus: function (event, ui) {
            console.log("focused");
          },
        });
        $("#gfg").click(function () {
          $("#gfg2").dialog("open");
        });
      });
    </script>
  </head>
  <body>
    <div id="gfg2" title="GeeksforGeeks">
      <textarea>jQuery UI | focus(event, ui) Event</textarea>
    </div>
    <button id="gfg">Open Dialog</button>
  </body>
</html>


Output:

Reference:https://api.jqueryui.com/1.9/dialog/#event-focus



Last Updated : 02 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads