title: How can I make an ajax call when user clicks on a Tab?
body: <p><img src="https://i.stack.imgur.com/xImMA.png" alt="enter image description here"></p>
  
  <ol>
  <li>How can I make an ajax call when user clicks on a tab?  </li>
  <li>How can I handle the html response and show it inside tab? </li>
  <li>How can I bind the JavaScript events on the html which I got in response?</li>
  </ol>
  
  <p>I know how to use jQueryUI tabs and how to do an ajax call?</p>
  
  <p>I don't know how to fire an Ajax call when user click tab inside a CKEditor? </p>
  
  <p>This what I have written to dispaly a 'Test' tab on Image dialog inside CKEditor.</p>
  
  <pre><code>CKEDITOR.on( 'dialogDefinition', function( ev )
  {
      // Take the dialog name and its definition from the event
      // data.
      var dialogName = ev.data.name;
      var dialogDefinition = ev.data.definition;
  
      // Check if the definition is from the dialog we're
      // interested on (the "Link" dialog).
      if ( dialogName == 'image' )
      {
  
          // Add a new tab to the "Link" dialog.
          dialogDefinition.addContents({
              id : 'customTab',
              label : 'Test',
              accessKey : 'M',
              elements : [
                  {
                      id : 'myField1',
                      type : 'text',
                      label : 'My Text Field'
                  },
                  {
                      id : 'myField2',
                      type : 'text',
                      label : 'Another Text Field'
                  },
                  {
                      type : 'html',
                      html : '&lt;input type="text" name="query" id="query" class="left new-search-box file_dialog_query" style="width:300px !important;" defaulttext="Search Files" value="Search Files"&gt;'
                  },
              ]
          });
  
      }
  });
  </code></pre>