How can I make an ajax call when user clicks on a Tab?

Question

enter image description here

How can I make an ajax call when user clicks on a tab?
How can I handle the html response and show it inside tab?
How can I bind the JavaScript events on the html which I got in response?

I know how to use jQueryUI tabs and how to do an ajax call?

I don't know how to fire an Ajax call when user click tab inside a CKEditor?

This what I have written to dispaly a 'Test' tab on Image dialog inside CKEditor.

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 : '<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">'
                },
            ]
        });

    }
});

Add a click event to the tab that causes an ajax request, append the response from the ajax request into the tab, then attach events. — Kevin B, Feb 10 '14 at 19:47
I guess that tab plugin emits an event on change (`change`, for example). Listen for that event and start the ajax call. — Ionică Bizău, Feb 10 '14 at 19:48
possible duplicate of [Trigger a function when a jQuery UI tab is clicked/made active?](http://stackoverflow.com/questions/11457498/trigger-a-function-when-a-jquery-ui-tab-is-clicked-made-active) — Paul Richter, Feb 10 '14 at 20:02

score 1 · Answer 1 · answered Feb 10 '14 at 19:50

http://jqueryui.com/tabs/#ajax

$( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
            ui.panel.html(
                "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                "If this wouldn't be a demo." );
        });
    }
});

score 1 · Answer 2 · answered Feb 10 '14 at 19:58

For achieving this, follow below steps

Create a html file with two sections A and B. A contains the tab and B contains the content. By default make tab 1 active.
On click of a tab capture the click event and inside that call the Ajax to get the data. In the success response, replace b content with the data. Also change the styles of tab to make the new tab active.

You can make a ajax call by jQuery.Ajax method in which u can pass your url from where u have to get the data. In the success response you will get all the data returned by the Url.

You don't have to bind the JavaScript events for new content here on this page. You can bind it in the html which your Url returns when you do the Ajax call.

Hope it helps.

score 1 · Answer 3 · answered Feb 10 '14 at 20:01

For this element, define event ether with jQuery or inline.

jQuery; for example elemtn has id="tab"

$("#tab").click(function(){
    //ajax call
});

Inline

<div onclick="ajaxCallFunction()">Tab</div>
<script>//you have to define this function somewhere
function ajaxCallFunction(){
//define ajax call
}
</script>

If your response is already structured as it should be then you can just set it as innerHtml of container (parent element) For example

//if you can get element by ID
var container=document.getElementById('container id').innerHtml=response;

For binding events it is maybe safer to create structure of HTML in code, but then is better to have response as JSON. In this (when using html) solution I would suggest in same function where you set this innerHtml, but after setting innerHtml call function which will set events.

For example

//if this structured HTML have element <div id="x"></div>
$("#x").click(function(){
//OR any other event, check jquery documentation for other events
});
//IMPORTANT IS THAT YOU CALL THIS SETTING OF EVENT AFTER YOU ADDED NEW HTML

How can I make an ajax call when user clicks on a Tab?

3 Answers3