Question

I have created tabs by using jQuery API and have bound one event handler on the click of second tab by using the below code:

    $('#tabs').bind('tabsselect', function(event, ui) {
        refreshRemoveUI(event,ui);
    });

function refreshRemoveUI(event,ui) {
    if(ui.index==1){
        $.get('FrontServlet?operation=getAllQues',function(data) {
            var html = "";
            var questionsNum = data.split(",");
            if(questionsNum!="") {
                html += '<br/><input type=checkbox name=removeAllQuestionId id=removeAllQuestionId onclick="toggleAll(this.checked)"/> Select/Deselect All<br/>';
                for(var i=0;i<questionsNum.length;i++){
                    html += '<br/><input type=checkbox name=removeQuestionId id=removeQuestionId /> ' + questionsNum[i];
                }
                $('#remove').show();
            } else {
                $('#remove').hide();
                html = 'No question available in quiz';
            }
            $('#removequestions').html(html);
            });         
    }
}

I want to invoke the same bind event on the completion of ajax request too and following is what I have tried but no luck:

    $.get('FrontServlet?operation=remove&position='+val, function(data) {
        $("#tabs li.ui-state-default:nth(1)").trigger("select");

    });

Any ideas guys?

Answer 1

No suggestions seem to work
I had to refactor my code as below:

    $('#tabs').bind('tabsselect', function(event, ui) {
        if(ui.index==1){
            refreshRemoveUI(event,ui);
        }

    });

            $.get('FrontServlet?operation=remove&position='+val, function(data) {
                refreshRemoveUI();

            });

function refreshRemoveUI(event,ui) {
        $.get('FrontServlet?operation=getAllQues',function(data) {
            var html = "";
            var questionsNum = data.split(",");
            if(questionsNum!="") {
                html += '<br/><input type=checkbox name=removeAllQuestionId id=removeAllQuestionId onclick="toggleAll(this.checked)"/> Select/Deselect All<br/>';
                for(var i=0;i<questionsNum.length;i++){
                    html += '<br/><input type=checkbox name=removeQuestionId id=removeQuestionId /> ' + questionsNum[i];
                }
                $('#remove').show();
            } else {
                $('#remove').hide();
                html = 'No question available in quiz';
            }
            $('#removequestions').html(html);
            });         
}

Now I am getting the results I wanted.