Databases
StackOverflow2013
Postsdbo
POJavascript with jQuery: Click and double click on same element, different effect, one disables the other
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript with jQuery: Click and double click on same element, different effect, one disables the other
    primarykey
    data
    text
    <p>I have an interesting situation - I have a table row which, currently, shows it's hidden counterpart when I click the "Expand" button. The original (unhidden) row which contains the expand button also has some content in a certain cell which, when clicked, becomes editable. I would like to be rid of the expand button, and enable expanding of the row via doubleclick anywhere in the row itself, including the field that turns editable when you click it. You can smell the trouble here already.</p> <p>When I double click a row, two click events are fired first, before the dblclick occurs. This means if I double click the field, it will turn into an editable one, and the row will expand. I would like to prevent this. I want the doubleclick to prevent the firing of the single click, and the single click to perform as usual.</p> <p>Using event.stopPropagation() clearly won't work since they're two different events.</p> <p>Any ideas?</p> <p>Edit (some semi-pseudo code):</p> <p>Original version:</p> <pre><code>&lt;table&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;&lt;a href="javascript:$('#row_to_expand').toggle();" title="Expand the hidden row"&gt;Expand Row&lt;/a&gt;&lt;/td&gt; &lt;td&gt;Some kind of random data&lt;/td&gt; &lt;td&gt;&lt;?= $editable_cell_which_turns_into_an_input_field_on_single_click[0]-&gt;value("First editable value") ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?= $editable_cell_which_turns_into_an_input_field_on_single_click[1]-&gt;value("Second editable value") ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?= $editable_cell_which_turns_into_an_input_field_on_single_click[2]-&gt;value("Third editable value") ?&gt;&lt;/td&gt; &lt;!-- ... --&gt; &lt;td&gt;&lt;?= $editable_cell_which_turns_into_an_input_field_on_single_click[n]-&gt;value("Nth editable value") ?&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr style="display: none" id="row_to_expand"&gt; &lt;td colspan="n"&gt;Some hidden data&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>Desired version:</p> <pre><code>&lt;table&gt; &lt;tbody&gt; &lt;tr ondblclick="$('#row_to_expand').toggle()"&gt; &lt;td&gt;Some kind of random data&lt;/td&gt; &lt;td&gt;&lt;?= $editable_cell_which_turns_into_an_input_field_on_single_click[0]-&gt;value("First editable value") ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?= $editable_cell_which_turns_into_an_input_field_on_single_click[1]-&gt;value("Second editable value") ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?= $editable_cell_which_turns_into_an_input_field_on_single_click[2]-&gt;value("Third editable value") ?&gt;&lt;/td&gt; &lt;!-- ... --&gt; &lt;td&gt;&lt;?= $editable_cell_which_turns_into_an_input_field_on_single_click[n]-&gt;value("Nth editable value") ?&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr style="display: none" id="row_to_expand"&gt; &lt;td colspan="n"&gt;Some hidden data&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>Cheers</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSwader
    1. USSwader
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJavascript with jQuery: Click and double click on same element, different effect, one disables the other
      1. USChris
      1. VTFavorite
    2. VO
      singulars
      1. POJavascript with jQuery: Click and double click on same element, different effect, one disables the other
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POJavascript with jQuery: Click and double click on same element, different effect, one disables the other
      1. This table or related slice is empty.
      1. VTUpMod
    1. COpaste some code please
      singulars
      1. POJavascript with jQuery: Click and double click on same element, different effect, one disables the other
      1. USdiEcho
    2. COYou could try delaying the click-handler using setTimeout and then raise a "doubleclick-has-happened" flag on double clicks and check for that flag in your single click handler
      singulars
      1. POJavascript with jQuery: Click and double click on same element, different effect, one disables the other
      1. USThor Jacobsen
    3. CO@diEcho Done! @freaktm Thanks, I considered this, but it seems unpractical and hackish, especially since I would have to modify the click handler for my editable cell helper site-wide. I will probably use this as a last resort, yes, but would still like to know if someone has a better solution.
      singulars
      1. POJavascript with jQuery: Click and double click on same element, different effect, one disables the other
      1. USSwader
 

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