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

Strange Jquery behaviour with UserForms Module


Go to End
Reply


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