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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

All other Modules /

Discuss all other Modules here.

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

Strange Jquery behaviour with UserForms Module


Go to End


2 Posts   1083 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>