Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Use 'for' loop to respond to show/hide same part of a form for several form events

    Hi all,

    I'm just feeling my way here, but I've managed to get fairly far with a bit of help from colleagues. Now we're stuck, though.

    I have the following code which correctly hides parts of my form when certain radio button options are clicked. The form is generated on the fly and has several sections, so the function shown here is called as each section is added to the form. This version of it works.

    Code:
    function mlspOverrideHide(applyID, hideableClass, optionsMax) {
      $("."+hideableClass).show();
      if ($("#"+applyID+"-0").attr('checked')) {
        $("."+hideableClass).hide();
      }
      $("#"+applyID+"-0").change(function() {
        if ($("#"+applyID+"-0").attr('checked')) {
          $("."+hideableClass).hide();
        }
        else {
          $("."+hideableClass).show();
        }
      });
      if ($("#"+applyID+"-1").attr('checked')) {
        $("."+hideableClass).hide();
      }
      $("#"+applyID+"-1").change(function() {
        if ($("#"+applyID+"-1").attr('checked')) {
          $("."+hideableClass).hide();
        }
        else {
          $("."+hideableClass).show();
        }
      });
      if ($("#"+applyID+"-2").attr('checked')) {
        $("."+hideableClass).hide();
      }
      $("#"+applyID+"-2").change(function() {
        if ($("#"+applyID+"-2").attr('checked')) {
          $("."+hideableClass).hide();
        }
        else {
          $("."+hideableClass).show();
        }
      });
      $("#"+applyID+"--1").change(function() {
        if ($("#"+applyID+"--1").attr('checked')) {
          $("."+hideableClass).show();
        }
        else {
          $("."+hideableClass).hide();
        }
      });
    };
    Now, I think the code below ought to be functionally equivalent to the code above. Basically it seeks to replace the repetitive part in the middle with a 'for' loop. However, part of it doesn't work. The page loads with the correct bits hidden/shown, and it shows other bits when the radios are changed, but it doesn't hide anything in response to appropriate changes of options.

    Code:
    function mlspOverrideHide(applyID, hideableClass, optionsMax) {
      $("."+hideableClass).show();
      for (i=0; i<=optionsMax; i++) {
        if ($("#"+applyID+"-"+i.toString()).attr('checked')) {
          $("."+hideableClass).hide();  // THIS WORKS
        }
        $("#"+applyID+"-"+i.toString()).change(function() {
          if ($("#"+applyID+"-"+i.toString()).attr('checked')) {
            $("."+hideableClass).hide();  // THIS DOESN'T
          }
          else {
            $("."+hideableClass).show();  // THIS WORKS (I think)
          }
        });
      }
      $("#"+applyID+"--1").change(function() {
        if ($("#"+applyID+"--1").attr('checked')) {
          $("."+hideableClass).show();  // THIS WORKS
        }
        else {
          $("."+hideableClass).hide();  // THIS WORKS
        }
      });
    };
    Basically, what happens is, if when the page loads, the relevant radio is already set to 0, 1 or 2, the corresponding hideable class is hidden. If it is set to -1, the corresponding hideable class is shown. If we change it from 0, 1 or 2 to another non-negative value, the hideable class is shown (not desired effect). And if we change the radio to -1 the class is shown (as desired) but it is not hidden again if we change the radio back to 0, 1 or 2 (not desired effect).

    I don't understand why the 'for' loop wouldn't work.

    Any ideas?

    Thanks very much in advance!

    MarQ

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Have you ever heard about each()?

  • #3
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Have you ever heard about each()?
    Hi Stephan,

    well, no, I hadn't heard of each(), but now I have taken a look.

    I have tried to use it, as shown below, but it doesn't work at all (even less than the 'for' loop I quoted before). Am I doing something wrong?

    Code:
      $.each([0, 1, 2], function(key, i)) {
        if ($("#"+applyID+"-"+i).attr('checked')) {
          $("."+hideableClass).hide();
        }
        $("#"+applyID+"-"+i).change(function() {
          if ($("#"+applyID+"-"+i).attr('checked')) {
            $("."+hideableClass).hide();
          }
          else {
            $("."+hideableClass).show();
          }
        });
      }
    Grüße nach Halle,
    marq

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Well, I’d need to see more of your code, specifically what you’re trying to do and how you’re executing the function. From looking at the snippet I could imagine you need to swap your index and value arguments (i. e. from function(key, i) to function(i, key)) but I might be wrong with this.

  • #5
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Stephan,

    here is part of the HTML source:

    Code:
    <fieldset class=" collapsible collapsed"><legend>/modules</legend><table class="sticky-enabled">
     <thead><tr><th>Text</th><th>Do not require localisation</th><th>Localise - public interface</th><th>Localise - content editor interface</th><th>Context tip</th> </tr></thead>
    
     <tbody>
      <tr class="odd">
       <td>The changes to these blocks will not be saved until the <em>Save blocks</em> button is clicked.<br /><small><em><span class="mlsp-translation-source-url">modules/block/block.js</span></em></small></td>
       <td><div class="hideable-modules"><div class="form-item" id="edit-translations-modules-texts-398-localise-0-wrapper">
        <label class="option" for="edit-translations-modules-texts-398-localise-0"><input type="radio" id="edit-translations-modules-texts-398-localise-0" name="translations[modules][texts][398][localise]" value="0"   class="form-radio" /></label>
       </div></div></td>
       <td><div class="hideable-modules"><div class="form-item" id="edit-translations-modules-texts-398-localise-1-wrapper">
        <label class="option" for="edit-translations-modules-texts-398-localise-1"><input type="radio" id="edit-translations-modules-texts-398-localise-1" name="translations[modules][texts][398][localise]" value="1"   class="form-radio" /> </label>
       </div></div></td>
       <td><div class="hideable-modules"><div class="form-item" id="edit-translations-modules-texts-398-localise-2-wrapper">
        <label class="option" for="edit-translations-modules-texts-398-localise-2"><input type="radio" id="edit-translations-modules-texts-398-localise-2" name="translations[modules][texts][398][localise]" value="2"   class="form-radio" /> </label>
       </div></div></td>
       <td><a href="/en/admin/content/mlsp/translations/context/7" target="_new">Add</a></td>
      </tr>
     </tbody>
    </table>
    
    <div class = "hideable-modules"><div class="form-item">
     <label>Set all unspecified texts in this section to: </label>
     <div class="form-radios"><table>
      <tbody>
       <tr class="odd">
        <td><div class="form-item" id="edit-translations-modules-apply-blank-0-wrapper">
         <label class="option" for="edit-translations-modules-apply-blank-0"><input type="radio" id="edit-translations-modules-apply-blank-0" name="translations[modules][apply][blank]" value="0"  checked="checked"  class="form-radio" /> Do not require localisation</label>
         </div></td>
         <td><div class="form-item" id="edit-translations-modules-apply-blank-1-wrapper">
          <label class="option" for="edit-translations-modules-apply-blank-1"><input type="radio" id="edit-translations-modules-apply-blank-1" name="translations[modules][apply][blank]" value="1"   class="form-radio" /> Localise - public interface</label>
          </div>
         </td>
         <td><div class="form-item" id="edit-translations-modules-apply-blank-2-wrapper">
          <label class="option" for="edit-translations-modules-apply-blank-2"><input type="radio" id="edit-translations-modules-apply-blank-2" name="translations[modules][apply][blank]" value="2"   class="form-radio" /> Localise - content editor interface</label>
         </div>
        </td>
       </tr>
      </tbody>
     </table></div>
    </div></div>
    <div class="form-item">
     <label>OR override all settings in this section with:: </label>
     <div class="form-radios"><table>
      <tbody>
       <tr class="odd">
        <td><div class="form-item" id="edit-translations-modules-apply-all-0-wrapper">
         <label class="option" for="edit-translations-modules-apply-all-0"><input type="radio" id="edit-translations-modules-apply-all-0" name="translations[modules][apply][all]" value="0"   class="form-radio" /> ALL Do not require localisation</label>
        </div></td>
        <td><div class="form-item" id="edit-translations-modules-apply-all-1-wrapper">
         <label class="option" for="edit-translations-modules-apply-all-1"><input type="radio" id="edit-translations-modules-apply-all-1" name="translations[modules][apply][all]" value="1"   class="form-radio" /> Localise ALL - public interface</label>
        </div></td>
        <td><div class="form-item" id="edit-translations-modules-apply-all-2-wrapper">
         <label class="option" for="edit-translations-modules-apply-all-2"><input type="radio" id="edit-translations-modules-apply-all-2" name="translations[modules][apply][all]" value="2"   class="form-radio" /> Localise ALL - content editor interface</label>
        </div></td>
       </tr>
    
       <tr class="even"><td><div class="form-item" id="edit-translations-modules-apply-all--1-wrapper">
        <label class="option" for="edit-translations-modules-apply-all--1"><input type="radio" id="edit-translations-modules-apply-all--1" name="translations[modules][apply][all]" value="-1"  checked="checked"  class="form-radio" /> <i>(No override)</i></label>
       </div></td></tr>
      </tbody>
     </table></div>
    </div>
    </fieldset>
    There are several fieldsets like that, each identified by a name - in this case it is 'modules'.

    This is in the head:
    Code:
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
        if (Drupal.jsEnabled) {
          Drupal.behaviors.mlsp = function() {
            mlspOverrideHide('edit-translations-modules-apply-all', 'hideable-modules', 2);
          }
        }
    //--><!]]>
    </script>
    The function mlspOverrideHide is defined in a separate .js file:

    Code:
    function mlspOverrideHide(applyID, hideableClass, optionsMax) {
      $("."+hideableClass).show();
      $.each([0, 1, 2], function(key, i)) {
        if ($("#"+applyID+"-"+i).attr('checked')) {
          $("."+hideableClass).hide();
        }
        $("#"+applyID+"-"+i).change(function() {
          if ($("#"+applyID+"-"+i).attr('checked')) {
            $("."+hideableClass).hide();
          }
    //      else {
    //        $("."+hideableClass).show();
    //      }
    // Not sure if this bit is good or not.
        });
      }
      $("#"+applyID+"--1").change(function() {
        if ($("#"+applyID+"--1").attr('checked')) {
          $("."+hideableClass).show();
        }
    //    else {
    //      $("."+hideableClass).hide();
    //    }
      });
    };


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •