need help with Enhance Forms using jQuery UI

I am trying to enhance my forms look and feel for which I am trying this tutorial .

I tried to copy the code into my html but its now working and there are some errors , is there a working copy which I can download and use and can I see a demo of this? The links for demo and download dont work.

here is my html

<!DOCTYPE htm
l PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script>
<script>
$.widget("ui.form",{
_init:function(){
var object = this;
var form = this.element;
var inputs = form.find("input , select ,textarea");
form.find("fieldset").addClass("ui-widget-content");
form.find("legend").addClass("ui-widget-header ui-corner-all");
form.addClass("ui-widget");
$.each(inputs,function(){
$(this).addClass('ui-state-default ui-corner-all');
$(this).wrap(<label />");
if($(this).is(":reset ,:submit"))
object.buttons(this);
else if($(this).is(":checkbox"))
object.checkboxes(this);
else if($(this).is("input[type='text']")||$(this).is("textarea")||$(this).is("input[type='password']"))
object.textelements(this);
else if($(this).is(":radio"))
object.radio(this);
else if($(this).is("select"))
object.selector(this);
if($(this).hasClass("date"))
$(this).datepicker();
});
var div = jQuery("&lt;div />",{
css:{
width:20,height:20,
margin:10,textAlign:"center"
}
}).addClass("ui-state-default drag");
var no = Math.ceil(Math.random() * 4);
var holder = jQuery("&lt;div />",{
id:'droppable',
text:"Drop the box with "+no+" here",
css:{
width:100,height:100,float:'right',fontWeight:'bold'}
}).addClass('ui-state-default');
$(form).find("fieldset").append(holder);
for(var i=1;i&lt;5;i++)
{
$(form).find("fieldset").append(div.clone().html(i).attr("id",i));
}
$(".drag").draggable({containment: 'parent'});
$("#droppable").droppable({
accept:'#'+no,
drop: function(event, ui) {
$(this).addClass('ui-state-highlight').html("Right One");
form.find(":submit").removeClass('ui-state-disabled').unbind('click');
}
});
$(".hover").hover(function(){
$(this).addClass("ui-state-hover");
},function(){
$(this).removeClass("ui-state-hover");
});
},
textelements:function(element){
$(element).bind({
focusin: function() {
$(this).toggleClass('ui-state-focus');
},
focusout: function() {
$(this).toggleClass('ui-state-focus');
}
});
},
buttons:function(element)
{
if($(element).is(":submit"))
{
$(element).addClass("ui-priority-primary ui-corner-all ui-state-disabled hover");
$(element).bind("click",function(event)
{
event.preventDefault();
});
}
else if($(element).is(":reset"))
$(element).addClass("ui-priority-secondary ui-corner-all hover");
$(element).bind('mousedown mouseup', function() {
$(this).toggleClass('ui-state-active');
}
);
},
checkboxes:function(element){
$(element).parent("label").after("&lt;span />");
var parent = $(element).parent("label").next();
$(element).addClass("ui-helper-hidden");
parent.css({width:16,height:16,display:"block"});
parent.wrap("&lt;span class='ui-state-default ui-corner-all' style='display:inline-block;width:16px;height:16px;margin-right:5px;'/>");
parent.parent().addClass('hover');
parent.parent("span").click(function(event){
$(this).toggleClass("ui-state-active");
parent.toggleClass("ui-icon ui-icon-check");
$(element).click();
});
},
radio:function(element){
$(element).parent("label").after("<span />");
var parent = $(element).parent("label").next();
$(element).addClass("ui-helper-hidden");
parent.addClass("ui-icon ui-icon-radio-off");
parent.wrap("&lt;span class='ui-state-default ui-corner-all' style='display:inline-block;width:16px;height:16px;margin-right:5px;'/>");
parent.parent().addClass('hover');
parent.parent("span").click(function(event){
$(this).toggleClass("ui-state-active");
parent.toggleClass("ui-icon-radio-off ui-icon-bullet");
$(element).click();
});
},
selector:function(element){
var parent = $(element).parent();
parent.css({"display":"block",width:140,height:21}).addClass("ui-state-default ui-corner-all");
$(element).addClass("ui-helper-hidden");
parent.append("&lt;span id='labeltext' style='float:left;'>&lt;/span>&lt;span style='float:right;display:inline-block' class='ui-icon ui-icon-triangle-1-s' >&lt;/span>");
parent.after("&lt;ul class=' ui-helper-reset ui-widget-content ui-helper-hidden' style='position:absolute;z-index:50;width:140px;' >&lt;/ul>");
$.each($(element).find("option"),function(){
$(parent).next("ul").append("&lt;li class='hover'>"+$(this).html()+"&lt;/li>");
});
$(parent).next("ul").find("li").click(function(){ $("#labeltext").html($(this).html());
$(element).val($(this).html());
});
$(parent).click(function(event){ $(this).next().slideToggle('fast');
event.preventDefault();
});
}
});
</script>
<script>
$(document).ready(function(){
$("form").form();
});
</script>
</head>
<body>
<form>
<fieldset>
<legend >Recommendation Code Details <span>(-)</span> </legend>
<div class="content">
<div>Field1: <input type="text" class="datepicker hasDatepicker"></div>
<div>Field2: <input type="text"></div>
<div>Field3: <input type="text"></div>
<div>Field4: <input type="text"></div>
Select <input type="checkbox" idname="isArraFinding"/>
Radio <input type="radio"/>
</div>
<div id="buttons">
<input type="button" value="Process" id="process">
<input type="button" value="Cancel" id="cancel">
<input type="submit" value="Submit" id="cancel">
</div>
</fieldset>
</form>
</body>
</html>

chrome cosnole

$(this).wrap(<label />");

Uncaught SyntaxError: Unexpected identifier

Topic Participants
fachhoch
jay.blanchard

need help with Enhance Forms using jQuery UI

need help with Enhance Forms using jQuery UI

Topic Participants

fachhoch

jay.blanchard