Databases
StackOverflow2013
Postsdbo
POjquery + jeditable, input field won't blur when double clicking on another editable area
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery + jeditable, input field won't blur when double clicking on another editable area
    primarykey
    data
    text
    <p>I'm creating a small page where users can modify the name of categories and items with the help of jeditable/jquery.</p> <p>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.</p> <p>If I want the input field to change I must put focus on it again and then click somewhere else.</p> <p>It works fine in IE.</p> <p>Here are my jquery definitions:</p> <pre><code>$(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" }) }); </code></pre> <p>And my list:</p> <pre><code>&lt;ul class='categories'&gt; &lt;li id='1' class='category'&gt;&lt;span id='edit_1' class='category_edit'&gt;Category 1&lt;/span&gt; &lt;ul id='cat_1' class='sections'&gt; &lt;li class='empty'&gt;&lt;/li&gt; &lt;li id='20' class='section'&gt;&lt;span id='edit_20' class='section_edit'&gt;My Section 1&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li id='2' class='category'&gt;&lt;span id='edit_2' class='category_edit'&gt;Category 2&lt;/span&gt; &lt;ul id='cat_2' class='sections'&gt; &lt;li class='empty'&gt;&lt;/li&gt; &lt;li id='21' class='section'&gt;&lt;span id='edit_21' class='section_edit'&gt;My Section 2&lt;/span&gt;&lt;/li&gt; &lt;li id='22' class='section'&gt;&lt;span id='edit_22' class='section_edit'&gt;My Section 3&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li id='3' class='category'&gt;&lt;span id='edit_3' class='category_edit'&gt;Category 3&lt;/span&gt; &lt;ul id='cat_3' class='sections'&gt; &lt;li class='empty'&gt;&lt;/li&gt; &lt;li id='23' class='section'&gt;&lt;span id='edit_23' class='section_edit'&gt;My Section 4&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li id='4' class='category'&gt;&lt;span id='edit_4' class='category_edit'&gt;Category 4&lt;/span&gt; &lt;ul id='cat_4' class='sections'&gt; &lt;li class='empty'&gt;&lt;/li&gt; &lt;li id='809' class='section'&gt;&lt;span id='edit_809' class='section_edit'&gt;My Section 5&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>(Excuse the bad tabbing of the jquery stuff, I don't understand why it's showing up sporadically)</p> <p>Thanks for any help! :)</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USGazillion
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjquery + jeditable, input field won't blur when double clicking on another editable area
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWell I changed the event that fires the submitting action to a single click instead of a double click and it got rid of the odd behaviour. The script works and I think it's more intuitive with the single-click but I have a lingering feeling that the problem was due to an error on my part and not jQueries... hopefully it won't bite me in the butt in the future :)
      singulars
      1. POjquery + jeditable, input field won't blur when double clicking on another editable area
      1. USGazillion
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload