Databases
StackOverflow2013
Postsdbo
POPrgrammatic call to jquery .change() not firing event attached with bind change on hidden field
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPrgrammatic call to jquery .change() not firing event attached with bind change on hidden field
    primarykey
    data
    text
    <p>I've been searching for possible clues for hours and have come up blank so I turn to you in your great wisdom to lend a hand...</p> <p>So I've got a form, and within that form there is a field I call a selection tool, made of two parts, a field to display a friendly label, and a hidden field to store the selected ID. It looks something like this:</p> <pre><code>&lt;input type="hidden" name="selector" id="selector" value="" /&gt; &lt;input type="text" readonly="readonly" id="selector_label" value="" /&gt; &lt;a.... link to selection tool .... /&gt; </code></pre> <p>The selection tool actually opens in a iframe which is important, but don't worry, there are no XSS errors. Once the user clicks a record in the tool, that remote page calls the following:</p> <pre><code>$('#selector_label',window.parent.document).val(label); $('#selector',window.parent.document).val(selected).change(); ...script to close iframe... </code></pre> <p>As you can see it's updating the form directly, and the second statement which updates the value of the hidden portion, finshes by calling <code>.change()</code> in order to trigger any listeners. Finally it closes the itself.</p> <p>To make this more complex, there is a listener assigned to the field like so:</p> <pre><code>$('#selector').on('blur change', function() { ... script to update a related field ... }); </code></pre> <p>Pay no attention to the <code>blur</code> this is actually a dynamic script and assigned to a number of fields using <code>.each()</code> for different reasons. I'm including it just in case you're going to tell me it interferes somehow.</p> <p>So the selector tool works great, updates both the label and hidden fields, however the listener which I assigned dynamically isn't firing, so the related field isn't getting the value of the newly changed <code>#selector</code> field.</p> <p>Any ideas why my listener wouldn't be detecting the programmatically fired <code>.change()</code> event? Thanks for any help you can offer!</p> <p>----- EDIT -----</p> <p>Updated as per suggestion in comments to use <code>.on()</code> instead of <code>.bind()</code>, unfortunately no change.</p> <p>Just FYI, I know this works with other fields, because there are <strong>others in the same form using this "relative" event to update and they work fine</strong>. The important difference and possible cause is that <strong>they use visible and editable text fields rather than a hidden field</strong>.</p> <p>----- EDIT 2 -----</p> <p>For testing purposes, I changed the hidden field to a visible one, still with readonly, and initially it had no effect, selector still worked, but the assigned event did not. However one interesting quirk is that if I click in that (previously hidden) field and then again somewhere else triggering the <code>blur</code> event state, the assigned event listener fires and updates the relative. So why is the event fired only when I interact with the field and not when I programmatically tell it to fire the <code>.change()</code> event?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USoucil
    1. USoucil
    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. This table or related slice is empty.
    1. COMaybe if you attach the event using .on(), instead of .bind()?
      singulars
      1. POPrgrammatic call to jquery .change() not firing event attached with bind change on hidden field
      1. USmelancia
 

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