Jquery simple manipulation tabs not working in jsp

I was trying out jquery tabs where the user can add tabs and remove tabs.I found one suiting to my needs here:

http://jqueryui.com/demos/tabs/#manipulation

I tried this out in a jsp page in the starting.When I run the app it throws an exception telling:

The server encountered an internal error () that prevented it from fulfilling this request.

exception

org.apache.jasper.JasperException: /Items.jsp(34,32) #{...} is not allowed in template  text
 org.apache.jasper.compiler.DefaultErrorHandler.jspError(DefaultErrorHandler.java:40)
org.apache.jasper.compiler.ErrorDispatcher.dispatch(ErrorDispatcher.java:407)
org.apache.jasper.compiler.ErrorDispatcher.jspError(ErrorDispatcher.java:102)
org.apache.jasper.compiler.Validator$ValidateVisitor.visit(Validator.java:706)
org.apache.jasper.compiler.Node$ELExpression.accept(Node.java:958)
org.apache.jasper.compiler.Node$Nodes.visit(Node.java:2361)
org.apache.jasper.compiler.Node$Visitor.visitBody(Node.java:2411)
org.apache.jasper.compiler.Node$Visitor.visit(Node.java:2417)
org.apache.jasper.compiler.Node$Root.accept(Node.java:495)
org.apache.jasper.compiler.Node$Nodes.visit(Node.java:2361)
org.apache.jasper.compiler.Validator.validateExDirectives(Validator.java:1763)
org.apache.jasper.compiler.Compiler.generateJava(Compiler.java:198)
org.apache.jasper.compiler.Compiler.compile(Compiler.java:347)
org.apache.jasper.compiler.Compiler.compile(Compiler.java:327)
org.apache.jasper.compiler.Compiler.compile(Compiler.java:314)
org.a开发者_StackOverflow中文版pache.jasper.JspCompilationContext.compile(JspCompilationContext.java:589)
org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:317)
org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:313)
org.apache.jasper.servlet.JspServlet.service(JspServlet.java:260)
javax.servlet.http.HttpServlet.service(HttpServlet.java:717)

The line (34,32) has

<a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span>

But when I pasted the code in an html page it runs just fine.. Why is this behaviour?? Can anyone explain Thanks:)

The problem is JSPs use expression-language (EL) tags ${} for variables and classes. While #{} isn't the JSP EL tag, it is the tag for it's successor, Facelets and it throws the error saying it isn't allowed in JSPs. You will have to use some other method to define your variable section that will be replaced in the regex replace.

Instead of using

<a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span>

try something like

<a href='~href~'>~label~</a> <span class='ui-icon ui-icon-close'>Remove Tab</span>

and change the regex replace line from

li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),

to

li = $( tabTemplate.replace( /~href~/g, "#" + id ).replace( /~label~/g, label ) ),

Try with

<a href="#href">Give Label Here</a>

var $tabs = $('#tabs').tabs({
                    tabTemplate: '<li><a href="<%= "#" %>{href}"><%= "#" %>{label}</a> <a href="#" class="remove">x</a></li>',
                    add: function(event, ui) {
                        var tab_content = $tab_content_input.val() || 'Tab '+tab_counter+' content.';
                        $(ui.panel).append('<p>'+tab_content+'</p>');
                    }
                    });