Databases
StackOverflow2013
Postsdbo
POJavascript Bind on Blur, Both 'if indexOf' and 'else' Performed
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript Bind on Blur, Both 'if indexOf' and 'else' Performed
    primarykey
    data
    text
    <p><strong>HTML</strong></p> <pre><code>&lt;!-- Contents of div #1 --&gt; &lt;form id="6hgj3y537y2biacb"&gt; &lt;label for="product_calendar" class="entry_label"&gt;Calendar&lt;/label&gt; &lt;input type="text" name="product_calendar" class="entry" value="" /&gt; &lt;/form&gt; &lt;form id="pyc2w1fs47mbojez"&gt; &lt;label for="product_calendar" class="entry_label"&gt;Calendar&lt;/label&gt; &lt;input type="text" name="product_calendar" class="entry" value="" /&gt; &lt;/form&gt; &lt;form id="kcmyeng53wvv29pa"&gt; &lt;label for="product_calendar" class="entry_label"&gt;Calendar&lt;/label&gt; &lt;input type="text" name="product_calendar" class="entry" value="" /&gt; &lt;/form&gt; &lt;!-- Contents of div #2 --&gt; &lt;div id="calendar_addRemove"&gt; &lt;!-- CSS &gt;&gt; display: none; --&gt; &lt;div id="calendar_add"&gt; &lt;label for="calendar_add" class="calendar_addLabel"&gt;Add Occurrence&lt;/label&gt; &lt;input type="text" name="calendar_add" class="calendar_addInput" value=""/&gt; &lt;/div&gt; &lt;div id="calendar_remove"&gt; &lt;label for="calendar_remove" class="calendar_removeLabel"&gt;Remove Occurrence&lt;/label&gt; &lt;input type="text" name="calendar_remove" class="calendar_removeInput" value=""/&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>Javascript</strong></p> <pre><code>// Complete behavioral script $(function() { $('input[name=product_calendar]').css({ 'color': '#5fd27d', 'cursor': 'pointer' }).attr({ 'readonly': 'readonly' }); // Additional formatting for specified fields $('input[name=product_calendar]').focus(function() { // Focus on any 'input[name=product_calendar]' executes function var product_calendar = $(this); // Explicit declaration var attr_val = $(product_calendar).attr('value'); $('#calendar_addRemove input').attr({ 'value': '' }); // Clear input fields $('#calendar_addRemove').fadeIn(500, function() { // Display input fields $('input[name=calendar_add]').blur(function() { // After value entered, action occurs on blur alert('Blur'); // Added for testing var add_val = $('input[name=calendar_add]').attr('value'); if (add_val != '') { alert('Not Blank'); // Added for testing var newAdd_val = attr_val + ' ' + add_val; $(product_calendar).attr({ 'value': newAdd_val }); $('#calendar_addRemove').fadeOut(500); } else { alert('Blank'); // Added for testing $('#calendar_addRemove').fadeOut(500); } }); $('input[name=calendar_remove]').blur(function() { // After value entered, action occurs on blur alert('Blur'); // Added for testing var remove_val = $(this).attr('value'); if (remove_val != '') { alert('Not Blank'); // Added for testing if (attr_val.indexOf(remove_val) != -1) { alert('Eval True'); // Added for testing var newRemove_val = attr_val.replace(remove_val, ''); $(product_calendar).attr({ 'value': newRemove_val }); $('#calendar_addRemove').fadeOut(500); } else { alert('Eval False'); // Added for testing $('#calendar_remove').append('&lt;p class="error"&gt;Occurrence Not Found&lt;/p&gt;'); $('.error').fadeOut(1500, function() { $(this).remove(); }); } } else { alert('Blank'); // Added for testing $('#calendar_addRemove').fadeOut(500); } }); }); }); }); </code></pre> <p>I've added a few alerts to see the order this script is performing in. When I enter <code>1234</code> into <code>input[name=calendar_add]</code> and blur, the alerts come up as expected. Then, when I proceed and enter <code>1234</code> into <code>input[name=calendar_remove]</code> and blur, this script throws up alerts in the following order: Blur, Not Blank, Eval False, Blur, Not Blank, Eval True - If I repeat this process, the occurrence of my alerts double every time (both add and remove), however keeping the same order (as if in sets).</p> <p>I think the issue is multiple value re-declaration of the variable <code>attr_val</code> in the DOM, but I'm not quite sure how to revise my script to alleviate this issue.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAnders
    1. US65Fbef05
    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
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJavascript Bind on Blur, Both 'if indexOf' and 'else' Performed
      1. USmplungjan
      1. VTFavorite
    2. VO
      singulars
      1. POJavascript Bind on Blur, Both 'if indexOf' and 'else' Performed
      1. This table or related slice is empty.
      1. VTModeratorReview
    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