Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

All other Modules /

Discuss all other Modules here.

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

Strange Jquery behaviour with UserForms Module


Reply


2 Posts   732 Views

Avatar
Samba Sam

Community Member, 85 Posts

8 March 2010 at 2:56pm

Edited: 08/03/2010 3:03pm

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.

Avatar
Samba Sam

Community Member, 85 Posts

8 March 2010 at 10:01pm

Edited: 08/03/2010 10:02pm

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>