Open In App

jQuery UI Dialog create Event

Last Updated : 02 Dec, 2021
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

jQuery UI Create event is triggered when the dialog box is created.

Learn more about jQuery selectors and events here.

Syntax:

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

Approach:

  • 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>
  • Open Dialog' button will trigger the click function (#gfg) that will further open the <textarea> in a dialog (#gfg2).
  • create( event, ui ) : Triggers when dialog box is created. There is callback function attached to this create which gets triggered after the dialog box is created.
    • event :  Type -> Event
    • ui : Type -> Object
    • callback function : function( event, ui ) { console.log('created')}

Example 1:

HTML
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <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>
      

      <script type = "text/javascript">
         $(function() {
            $( "#gfg2" ).dialog({
          autoOpen: false, 
               create: function( event, ui ) {
                  console.log('created')
               },
            });
            $( "#gfg" ).click(function() {
               $( "#gfg2" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "gfg2" title="GeeksforGeeks">
         <textarea>jQuery UI | create(event, ui) Event</textarea>
      </div>
      <button id = "gfg">Open Dialog</button>
   </body>
</html>

Output:


Article Tags :

Similar Reads