I have onClick event in my image which causes new tabs to be added to jQuery tabs. The event next to it will add content to this new tab.

$('#Image').click();
$('#controladdedbyclickabove').append( message);

The problem I am seeing is that the click event will not wait for the actions to plete it will continue to next statement. Due to this I cannot see the content being added to the new control that the click would have generated. How do I make the click event to wait for actions to plete before it moves to next statement?

T have to depend on triggering the click because the onClick action on #image has all parameters which I can extract as a string, but I'm not sure how to execute it.

When onClick event happens, this method is called:

function addTab(title, uri, userid) {
    var newTab = $("#tabs").tabs("add", uri, title);
}

I have onClick event in my image which causes new tabs to be added to jQuery tabs. The event next to it will add content to this new tab.

$('#Image').click();
$('#controladdedbyclickabove').append( message);

The problem I am seeing is that the click event will not wait for the actions to plete it will continue to next statement. Due to this I cannot see the content being added to the new control that the click would have generated. How do I make the click event to wait for actions to plete before it moves to next statement?

T have to depend on triggering the click because the onClick action on #image has all parameters which I can extract as a string, but I'm not sure how to execute it.

When onClick event happens, this method is called:

function addTab(title, uri, userid) {
    var newTab = $("#tabs").tabs("add", uri, title);
}

• c#
• javascript
• jquery
• jquery-ui
• model-view-controller

• 1 The interesting part of the code is not given. Something asynchronous must be going on inside the click handler. – Beetroot-Beetroot Commented Dec 25, 2012 at 4:39
• not that you mention asynchronous i think the uri part in jquery addtab is doing ajax call to pull some content for the tab.. so what is the solution if its async? – Justin Homes Commented Dec 25, 2012 at 5:36
• 1 Aha, so you're using jQuery UI Tabs presumably. You need to do the .append( message); part inside a create(?) callback, specified as a .tabs({...}) option. You also need to be slightly creative, because you want the callback action only when the new tab is initiated programatically, not when the user clicks the button. – Beetroot-Beetroot Commented Dec 25, 2012 at 5:39
• 1 No it can't be jQuery UI Tabs, which doesn't have an "add" method. Which tabs plugin are you using? – Beetroot-Beetroot Commented Dec 25, 2012 at 5:46
• addTab is a custom method i wrote it uses the Jquery tabs. .tabs("add" is a jquery method – Justin Homes Commented Dec 25, 2012 at 5:50

4 Answers 4

you can use callback function:

 if($('#Image')) {
  $('#Image').click(function() {
        $('#controladdedbyclickabove').append( message);
  });
}else {
  console.log('image object not there');
}

You can't wait for the event to be handled, because it won't be handled until you exit your function and return control to the browser.

To run the code after the event has been handled, you need to start it after you have exited the function:

$('#Image').click();
window.setTimeout(function(){
  $('#controladdedbyclickabove').append( message);
}, 0);

there are many ways to do that.you wanna execute something when the click finished.

1: why not make your code like this

function addTab(title, uri, userid) {
   var newTab = $("#tabs").tabs("add", uri, title);
   $('#controladdedbyclickabove').append( message);
}

2: you also can define a funciton like this

function addTabCallback () {
  $('#controladdedbyclickabove').append( message);
}

function addTab(title, uri, userid) {
   var newTab = $("#tabs").tabs("add", uri, title);
   addTabCallback();
}

3: you can use observer pattern

function addTab(title, uri, userid) {
   var newTab = $("#tabs").tabs("add", uri, title);
   var observer = addTab.observers.shift();
   while (observer) {
      observer();
      observer = addTab.observers.shift();
   }
}
addTab.observers = [];

should do a little change when you trigger the click

addTab.observers.push(function () {
   // codes here will be executed when the click finished
   $('#controladdedbyclickabove').append( message);
});

$('#Image').click();

this is a sample code with observer pattern, for real, it should do some observer type check,etc.^_^.

i ended up passing the append message back to server where the ajax calls. so when click event calls a message is added in the control when it es back. i could not get javascript callback to work as expected.