Jump to:

10928 Posts in 2612 Topics by 1809 members

All other Modules

SilverStripe Forums » All other Modules » Strange Jquery behaviour with UserForms Module

Discuss all other Modules here.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 711 Views
  • Samba Sam
    Avatar
    Community Member
    85 Posts

    Strange Jquery behaviour with UserForms Module Link to this post

    Hi,
    I'm trying to wrap the first three divs below, which are autogenerated by the User Forms module with a parent div (id="LeftForm") using jquery: $("div[id^='EditableTextField']:lt(3)").wrapAll('<div id="LeftForm"></div>');    
    This sort-of-works, except the order of "EditableTextField3" and "EditableTextField4" get switched around? Using a newer version of jquery 1.4 with the module didn't fix the problem. In fact, my custom attribute selector stopped working all together. In other words, it added nothing.

    Is this a jquery issue, SS or User Form module issue? Any Ideas? I'm using SS [v2.3.6] and User Form module [v0.2.1].

    Thanks,
    Sam

    <fieldset>
    <legend></legend>      
    <div id="EditableTextField1" ... ><label ... >Name:</label><div class="middleColumn"><input ... /></div></div>
    <div id="EditableTextField2" ... ><label ... >Name:</label><div class="middleColumn"><input ... /></div></div>
    <div id="EditableTextField3" ... ><label ... >Name:</label><div class="middleColumn"><input ... /></div></div>
    <div id="EditableTextField4" ..."><label ... >Name:</label><div class="middleColumn"><input ... /></div></div>
    ...
    </fieldset>

    I want it to look like this:

    <fieldset>
    <legend></legend>      
    <div id="LeftForm">
    <div id="EditableTextField1" ... ><label ... >Name:</label><div class="middleColumn"><input ... /></div></div>
    <div id="EditableTextField2" ... ><label ... >Name:</label><div class="middleColumn"><input ... /></div></div>
    <div id="EditableTextField3" ... ><label ... >Name:</label><div class="middleColumn"><input ... /></div></div>
    </div>
    <div id="EditableTextField4" ..."><label ... >Name:</label><div class="middleColumn"><input ... /></div></div>
    ...
    </fieldset>

    But I get this...

    <fieldset>
    <legend></legend>      
    <div id="LeftForm">
    <div id="EditableTextField1" ... ><label ... >Name:</label><div class="middleColumn"><input ... /></div></div>
    <div id="EditableTextField2" ... ><label ... >Name:</label><div class="middleColumn"><input ... /></div></div>
    <div id="EditableTextField4" ... ><label ... >Name:</label><div class="middleColumn"><input ... /></div></div>
    </div>
    <div id="EditableTextField3" ..."><label ... >Name:</label><div class="middleColumn"><input ... /></div></div>
    ...
    </fieldset>

    As mentioned, "...Field3" and "...Firld4" change order.

  • Samba Sam
    Avatar
    Community Member
    85 Posts

    Re: Strange Jquery behaviour with UserForms Module Link to this post

    I don't think this is related but the following code appears twice near the body end tag instead of just once:

    <script type="text/javascript">//<![CDATA[
             (function($) {
                $(document).ready(function() {
                   $("#Form_Form").validate({
                      errorClass: "required",   
                      messages:
                         {
    EditableTextField1:"'Name:' is required."
    , EditableTextField2:"'Phone:' is required."
    , EditableEmailField3:"'Email:' is required."
    , EditableSpamProtectionField10:"'Spam protection:' is required."
    } ,
    rules:
                          {
    EditableTextField1:{
    required:1
    , minlength:"2"
    , maxlength:"20"
    }
    , EditableTextField2:{
    required:1
    , minlength:"7"
    , maxlength:"20"
    }
    , EditableEmailField3:{
    required:1
    , email:1
    }
    , EditableTextField8:{
    maxlength:"7"
    }
    , EditableSpamProtectionField10:{
    required:1
    }
    }
                   });
                   
                });
             })(jQuery);
    //]]></script>

    711 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.