jQuery UI - Rename Sortable Tabs on Double Click

Question

I am using jQuery UI Tabs with Sortable, how can I rename on Double Click? Please help me out!

---

FIDDLE

---

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab Content 1</p>
  </div>
  <div id="tabs-2">
    <p>Tab Content 2</p>
  </div>
  <div id="tabs-3">
    <p>Tab Content 3</p>
  </div>
</div>

jQuery

$(function() {
    var tabs = $( "#tabs" ).tabs();
    tabs.find( ".ui-tabs-nav" ).sortable({
        axis: "x",
        stop: function() {
            tabs.tabs( "refresh" );
        }
    });
});

Supple

with rename you mean: doubleclick on Tab X shows an input field to rename the Tabs text? – Nonlinearity

Yes .. Exactly like that @Nonlinearity – Supple

I guess there is no option or whatsoever in the jquery-tabs plugin for that. You have to write that code on your own. Add a doubleclick handler on the tab, hide the text, show a input field, update the DOM and maybe do some DB updates if needed... – Nonlinearity

Hi ggzone... Thanks for reply.. I got the solutions for this :) jsfiddle.net/gabs6hdq – Supple

Answer 1

I got the solution for this.. Thanks to Guruprasad...

Here you go what I am talking about...

---

Working FIDDLE

---

HTML

<div id="my-tabs">
    <ul>
        <li class="tab"><input class="txt" type="text"/><a href="#Home-1">Home 1</a></li>
        <li class="tab"><input class="txt" type="text"/><a href="#Home-2">Home 2</a></li>
        <li class="tab"><input class="txt" type="text"/><a href="#Home-3">Home 3</a></li>
    </ul>
    <div id="Home-1">
        <p>Home Content 1</p>
    </div>
    <div id="Home-2">
        <p>Home Content 2</p>
    </div>
    <div id="Home-3">
        <p>Home Content 3</p>
    </div>
</div>

jQuery

$(function() {
        var tabs = $( "#my-tabs" ).tabs();
        tabs.find( ".ui-tabs-nav" ).sortable({
               axis: "x",
               stop: function() {
                  tabs.tabs( "refresh" );
              },
              select: function(event, ui) {
                  alert("PRESSED TAB!");
              }
         });
         $('.tab').on('dblclick',function(){
             $(this).find('input').toggle().val($(this).find('a').html()).focus();
             $(this).find('a').toggle();
         });

        $('.tab').on('keydown blur dblclick','input',function(e){
            if(e.type=="keydown")
            {
               if(e.which==13)
               {
                   $(this).toggle();
                   $(this).siblings('a').toggle().html($(this).val());
               }
               if(e.which==38 || e.which==40 || e.which==37 || e.which==39 || e.keyCode == 32)
               {
                   e.stopPropagation();
               }

            }
            else if(e.type=="focusout")
            {
                if($(this).css('display')=="inline-block")
                {
                    $(this).toggle();
                    $(this).siblings('a').toggle().html($(this).val());
                }
            }
            else
            {
                e.stopPropagation();
            }
        });
    });
    $(document).ready(function() {

    });

Supple

Are you satisfied with this approach or are you still looking for help? – Prober