CODEWITHSUNDEEP
javascriptjqueryhtmltabsparameter-passing
kramer65
kramer65

Reputation: 54013

Javascript: How to get id of div from dynamically added tab and call a function with that?

I've got a webpage on which I can dynamically create new tabs in which a chat with a selected user is/should be initiated. I wrote and tested the chat-script on itself, which works perfectly well and I now need to integrate it with the tabs.

So I've got this function which adds a new tab. In this function I set the tab-pane id to the user_id:

function addTab(user_id, name) {
    $('#pageTab').append(
        $('<li><a href="#' + user_id + '">' + name +
            '<button class="close" type="button">×</button></a></li>'));
    $('#pageTabContent').append($('<div class="tab-pane" id="' + user_id 
        +'"><form id="send_message_form"><textarea id="messageText" rows="1" cols="25"></textarea></br>'
        + '<input type="button" id="sendButton" value="Send Message"></form>'
        + '<div class="conversation"></div></div>'));
    $('#page' + user_id).tab('show');
}

I then also have a function which updates the chat within this tab. In here I need the user_id (from the tab-pane):

// Poll for new messages
function updateConversation(){
    $.ajax({
        type:"POST",
        contentType: "application/json",
        accepts: "application/json; charset=utf-8",
        url: "/api/support/{{ supporter_id }}",
        data: JSON.stringify({
            'action': 'GET_MESSAGES',
            'user_id': user_id,
            'last_message_id':last_message_id
        }),
        dataType: "json",
        success: function(data) {
            if (data.messages.length > 0){
                for (var i=0; i<data.messages.length; i++){
                    $(".conversation").prepend("<P>"+ data.messages[i].text + "</p>");
                    last_message_id = data.messages[i].id;
                }
            }
        }
    });
    setTimeout(updateConversation, 1000);
}

So my question is: how would I be able to get the id from the tab-pane that is selected, and then pass it to the updateConversation() function?

I'm kinda lost here, so all tips are welcome!

Upvotes: 0

Views: 335

Answers (1)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26153

This should do what you need...

// Poll for new messages
function updateConversation(){
    $.ajax({
        type:"POST",
        contentType: "application/json",
        accepts: "application/json; charset=utf-8",
        url: "/api/support/{{ supporter_id }}",
        data: JSON.stringify({
            'action': 'GET_MESSAGES',
            'user_id': $(".tab-pane:visible")[0].id,
            'last_message_id':last_message_id
        }),
        dataType: "json",
        success: function(data) {
            if (data.messages.length > 0){
                for (var i=0; i<data.messages.length; i++){
                    $(".conversation")
                        .prepend("<p>"+ data.messages[i].text + "</p>")
                        .data("last-message-id", data.messages[i].id);
                }
            }
        }
    });
    setTimeout(updateConversation, 1000);
}

I've changed the variable user_id to this...

$("div.tab-pane:visible")[0].id

That gets the id of the visible div with class tab-pane and uses it as the user_id variable in the data object you send via your ajax call.

I've also modified it to save the message ID as a data attribute on the conversation list, so to get the ID of the last message for the visible tab, you could use...

var lastMessageID = $(".tab-pane:visible .conversation").data("last-message-id");

Upvotes: 1

Related Questions