Databases
StackOverflow2013
Postsdbo
POHow to get Bootstrap typeahead click result before the input change event
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to get Bootstrap typeahead click result before the input change event
    primarykey
    data
    text
    <p>I am trying to use bootstraps typeahead as a flexible select for users. So if the item is known they select it if not a dialogue opens up allowing them to enter a new item. </p> <p>I am doing this by watching for the change event on the input, if the inputs val is not in the source array (for the the typeahead) then the "add item" dialogue is shown to the user. The problem is if the user clicks one of the options a change event is sent before the typeahead has a chance to set the val. This is as the click will cause a blur on the text.</p> <p>I wanted to check the active element to get around this, so in the change event look at document.activeElement and see if it is one of the typeahead options, this did not work and returned the entire body element.</p> <p>Here is a trimmed down version of the code:</p> <p><strong>Html</strong> </p> <pre><code>&lt;div id="contactModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt; &lt;h3 id="myModalLabel"&gt;Unknown Contact&lt;/h3&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;p&gt;The contact you have entered is unknown. Press cancel to enter a different contact or fill out the details below to create a new contact&lt;/p&gt; &lt;label&gt;Name&lt;/label&gt; &lt;input id="modal_contact" type="text" placeholder="dealership contact" value=""/&gt; &lt;label&gt;Email&lt;/label&gt; &lt;input id="modal_contact_email" type="text" placeholder="dealership contact" value=""/&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt; &lt;button id="save" class="btn btn-primary"&gt;Save changes&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>Javascript</strong></p> <pre><code>var contacts = ['pete','geoff']; $('.typeahead').typeahead({source:contacts, updater : function(item){ console.log('updater fired'); //fires after first change event return item; }}); $('input').change(function(ev){ console.log($(ev.target).val()); if ($.inArray($(ev.target).val(), contacts) &lt; 0) $('#contactModal').modal(); }) </code></pre> <p>And a JSFiddle version <a href="http://jsfiddle.net/k39vM/" rel="nofollow">http://jsfiddle.net/k39vM/</a></p> <p>Does any one know how I can test if the user has clicked a typeahead to find out if that caused the change event?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDan Walmsley
    1. USDan Walmsley
    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. POHow to get Bootstrap typeahead click result before the input change event
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to get Bootstrap typeahead click result before the input change event
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

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