Jquery 简单操作选项卡在 jsp 中不起作用

Question

我正在尝试 jquery 选项卡，用户可以在其中添加选项卡和删除选项卡。我在这里找到了一个适合我需求的选项卡：

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

我在开始的jsp页面中尝试了这个。当我运行应用程序时，它抛出一个异常，告诉：

服务器遇到内部错误（）这阻止了它从满足这个请求。

异常

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.apache.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)

行 (34,32) 有

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

但是当我将代码粘贴到 html 页面中时它运行得很好.. 为什么会有这种行为？谁能解释一下 谢谢：）

Answer 1

问题是 JSP 使用表达式语言 (EL) 标记 ${} 来表示变量和类。虽然 #{} 不是 JSP EL 标记，但它是其后继 Facelets 的标记，并且会抛出错误，指出 JSP 中不允许这样做。您将必须使用其他方法来定义将在正则表达式替换中替换的变量部分。

而不是使用

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

尝试类似的方法

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

并将正则表达式替换行从

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

更改为

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

Answer 2

尝试用

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

Answer 3

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>');
                    }
                    });