jquery + jeditable, input field won't blur when double clicking on another editable area

Question

Hi,

I'm creating a small page where users can modify the name of categories and items with the help of jeditable/jquery.

The script works but acts a little strangely in Firefox. If I double click on my editable span it will be replaced with the input field. It will then disappear if I focus on some other element EXCEPT another editable span. I should also note that the cursor disappears when it first enters the input box.

If I want the input field to change I must put focus on it again and then click somewhere else.

It works fine in IE.

Here are my jquery definitions:

$(document).ready(function(){
    //this will be executed once the dom is loaded

    $(".categories").sortable({
                connectWith: ".categories",
                dropOnEmpty: true,
                tolerance: "pointer",
                cancel: ".sections"
                }).disableSelection();

    $(".sections").sortable({
                connectWith: ".sections",
                items: "li:not(.empty)",
                dropOnEmpty: true
                }).disableSelection();        

    $(".section_edit").editable("serve_edit_section_request.php", { 
      tooltip: "Click to edit...",
      select: true,
      style: "inherit",
      cssclass: "edit_input_box",
      event: "dblclick",
      id: this.id,
      name: "section_name",
      onblur: "cancel"  
  })

  $(".category_edit").editable("serve_edit_category_request.php", { 
      tooltip: "Click to edit...",
      select: true,
      style: "inherit",
      cssclass: "edit_input_box",
      event: "dblclick",
      id: this.id,
      name: "category_name",
      onblur: "cancel"  
  })

});

And my list:

<ul class='categories'>
  <li id='1' class='category'><span id='edit_1' class='category_edit'>Category 1</span>
    <ul id='cat_1' class='sections'>    
      <li class='empty'></li>   
      <li id='20' class='section'><span id='edit_20' class='section_edit'>My Section 1</span></li>
    </ul>
  </li>
  <li id='2' class='category'><span id='edit_2' class='category_edit'>Category 2</span>
    <ul id='cat_2' class='sections'>    
      <li class='empty'></li>   
      <li id='21' class='section'><span id='edit_21' class='section_edit'>My Section 2</span></li>  
      <li id='22' class='section'><span id='edit_22' class='section_edit'>My Section 3</span></li>
    </ul>
  </li>
  <li id='3' class='category'><span id='edit_3' class='category_edit'>Category 3</span>
    <ul id='cat_3' class='sections'>    
      <li class='empty'></li>   
      <li id='23' class='section'><span id='edit_23' class='section_edit'>My Section 4</span></li>
    </ul>
  </li>
  <li id='4' class='category'><span id='edit_4' class='category_edit'>Category 4</span>
    <ul id='cat_4' class='sections'>    
      <li class='empty'></li>   
      <li id='809' class='section'><span id='edit_809' class='section_edit'>My Section 5</span></li>
    </ul>
  </li>
</ul>

(Excuse the bad tabbing of the jquery stuff, I don't understand why it's showing up sporadically)

Thanks for any help! :)

Answer 1

I had this exact same problem:

The problem is caused by disableSelection(). The common use of sortable() would not use textareas, and thus most people would not discover the following subtlety:

disableSelection() uses a CSS trait in FireFox, and thus all the effects are felt in all the descendants of whatever you applied the disableSelection() to. Since you only want to effect the direct children (just as sortable() acts only on the direct children) you should do this instead:

$(".categories").sortable({
    connectWith: ".categories",
    dropOnEmpty: true,
    tolerance: "pointer",
    cancel: ".sections"
});
$(".categories > *").disableSelection();

OR

$(".categories").sortable({
    connectWith: ".categories",
    dropOnEmpty: true,
    tolerance: "pointer",
    cancel: ".sections"
}).children().disableSelection();

(From the JQuery Docs: "Also note: while parents() will look at all ancestors, children() will only consider immediate child elements.")

Answer 2

Hi, I'm also facing similar issue. In my case this works fine but in mozilla, if I click from one tab to another then edit input is not getting disappear. Please suggest. thanks!

$('.edit').editable(function(value, settings) { return (value); }, { type: 'text', event: 'dblclick' });

$("#tabs").tabs().find(".ui-tabs-nav").sortable({ axis: 'x' });

---

<div id="tabs"> <ul id="sortable"> <li> <a class="ui-tabs-nav" href="#tabs-1"><span class="edit">Nunc tincidunt</span></a><span class="ui-icon ui-icon-close" style="float: left;"></span> </li> <li><a class="ui-tabs-nav" href="#tabs-2"><span class="edit">Proin dolor</span></a><span class="ui-icon ui-icon-close" style="float: left;"></span></li> <li><a class="ui-tabs-nav" href="#tabs-3"><span class="edit">Aenean lacinia</span></a><span class="ui-icon ui-icon-close" style="float: left;"></span></li> <a id="add_tab">Add Tab</a> </ul> </div>