CODEWITHSUNDEEP
jquery-uijquery
Jan
Jan

Reputation: 3401

jQuery UI Tabs, Editing the tab title

In jquery ui tabs. they have a functionality where you can add and remove tabs.

Is it possible to edit an existing tab like say double clicking it then you can type the new title or whatever method is there possible as long as the new title appears and then the value is passed to an external database.

Upvotes: 0

Views: 2533

Answers (2)

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can use simple jQuery to manipulate the tab label text, by accessing directly its text (try inspecting the resulting DOM).

In the example I use a button to change the second tab title, but the code can be called after you fetch data from DB.

Code:

$(document).ready(function () {
    $("#tabs").tabs();

    $("#changeTit").button().click(function(){
        $('#tabs ul:first li:eq(1) a').text("Other text");
    });
});

Demo: http://jsfiddle.net/IrvinDominin/zpxta/

Upvotes: 0

Nostradamus
Nostradamus

Reputation: 59

Have you tried and gathered some ideas?

Sorry, I'm not sure if anyone would do the whole coding (unless they have already done it and are willing to share).

You may need to add hidden text boxes for each of the tabs. You then need to add a double-click event handler for the tab parts of the UI, which would then show the corresponding textbox and hide the actual tab title. You could then add onblur event on textbox (i.e. when moving away from text box) and capture the data inside it, process it to change the actual title and also pass it back to database at the same time for saving.

Hope this is a starting point for you.

Upvotes: 1

Related Questions