Databases
StackOverflow2013
Postsdbo
POSubmit button becomes unresponsive after modifying DOM
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSubmit button becomes unresponsive after modifying DOM
    primarykey
    data
    text
    <p>I am implementing a form that allows the user to generate a list of items. These items correspond to a model and I have implemented autocomplete functionality for that model.</p> <p>I have created an autocomplete method in the appropriate controller that takes the text currently in the field and returns an array of possible items.</p> <p>If the user entered the string "ba", the following div might be added to the DOM:</p> <pre><code>&lt;div class='list'&gt; &lt;div class='autocomplete_item' data-title='Banana' data-object-id='3'&gt; &lt;span class='match'&gt;Ba&lt;/span&gt;nana &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Once an item is "added," a pair of hidden fields is added to the form:</p> <pre><code>&lt;input type='hidden' id='item_1_id' name='item[1][id]' value='5' /&gt; &lt;input type='hidden' id='item_1_title' name='item[1][title]' value='Banana' /&gt; </code></pre> <p><strong>The problem:</strong></p> <p>As soon as the autocomplete div is added to the DOM, the form's submit button becomes unresponsive. Clicking it triggers, no events, sends off no request, and causes no JavaScript errors in any consoles I know of. </p> <p><strong>Attempted solutions and misconceptions:</strong></p> <p>I figured there was some sort of problem with the authentication_token of the form, so I removed it using :authentication_token => false. This did not solve the problem.</p> <p>I thought maybe an id was required for rails forms. Adding an ID to all the new hidden fields accomplished nothing.</p> <p>I thought perhaps the div being appended was missing a <code>&lt;/div&gt;</code> or something, which would cause the DOM as a whole to become invalid. I've verified this is not the case.</p> <p>I thought there was something inherently wrong with adding hidden fields to a form after its initial load, especially considering the authentication token. However, the problem occurs prior to the addition of any forms. Simply adding the autocomplete list div to the DOM breaks the form.</p> <p><strong>A possible solution:</strong></p> <p>If I can find no solution sticking with a traditional form helper &amp; form, I suppose I can ditch the form element entirely and perform a jQuery post and redirect from the client side based on the response. But I am curious what is going wrong here and that solution seems hacky.</p> <p>I'd really appreciate it if anyone can offer any insight on this issue! Thanks :)</p> <p><strong>Update 1</strong></p> <p>As a new development, I've began bailing out of the process and found (one of?) the line(s) of code leading to the failure. See relevant coffeescript below:</p> <pre><code>init_autocomplete = () -&gt; $('.autocomplete') .keydown(handle_keydown) .keyup(handle_keyup) .click(handle_click) $(document).on('click', '.autocomplete_item', null, select_item) $(document).click(hide_list) handle_click = () -&gt; ### *** if I insert 'return' here, the form submit button still works. autocomplete_wrapper = $(this).parent() ### *** if I insert 'return' here, the form submit button fails. unless autocomplete_wrapper.data('object-id') autocomplete($(this)) </code></pre> <p>Apparently, something about accessing the input field's parent is causing the issue. This is unfortunate because I rely on the parent div for the positioning of the autocomplete menu.</p> <p><strong>Update 2</strong></p> <p>I ran the w3c validator and fixed the following errors, but the issue still persists (I should move this up in my bug-fixing checklist):</p> <ol> <li><p>Bad value x-handlebars-template for attribute type on element script: Subtype missing.</p> <ul> <li>replaced type with <code>"html/x-handlebars-template"</code></li> </ul></li> <li><p>The for attribute of the label element must refer to a form control.</p> <ul> <li>replaced <code>&lt;label for="nonexistent_field"&gt;</code> with <code>&lt;div class="label&gt;</code></li> </ul></li> </ol> <p><strong>Update 3</strong></p> <p>I've implemented a solution by replacing <code>= f.submit</code> in my HAML with <code>%input.submit_form{:type =&gt; 'button', :value =&gt; 'Create Lesson', :onclick =&gt; '$(this).parent().submit()'}</code>. I'm still not sure what's wrong with the normal button, but I need to move on from this issue. Thanks to everyone for their suggestions.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMike Szyndel
    1. USdave
    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. POSubmit button becomes unresponsive after modifying DOM
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POSubmit button becomes unresponsive after modifying DOM
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POSubmit button becomes unresponsive after modifying DOM
      1. This table or related slice is empty.
      1. VTUpMod
    1. COcan we see the form html, as well as any javascripts you have?
      singulars
      1. POSubmit button becomes unresponsive after modifying DOM
      1. USkennypu
    2. COWhile you've not provided enough info about how you are doing the autocomplete for us to be of much use, unresponsive often traces back to the element being replaced in the DOM without its event handlers assigned back to it. Or you've accidentally unbound its event handlers. Or removed it from the form HTML / inserted another form around it or within the form you are trying to submit.
      singulars
      1. POSubmit button becomes unresponsive after modifying DOM
      1. USdavidfurber
    3. COi also find issues with duplicate id attribute values (multiple elements with the same id) can lead to weird javascript unresponsiveness.
      singulars
      1. POSubmit button becomes unresponsive after modifying DOM
      1. USRyan Quinn
 

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