jQuery添加到JSP页面

我有一块jQuery代码，我在互联网上找到，我想将它集成到我的jsp页面，我使用Spring表单标签。jQuery添加到JSP页面

这里是jQuery代码：

(function ($) { 
    //тут превращаем select в input  
    var id = "test", 
     $id = $('#' + id), 
     choices = $id.find('option').map(function (n, e) { 
      var $e = $(e); 
      return { 
       id: $e.val(), 
       text: $e.text() 
      }; 
     }), 
     width = $id.width(), 
     realClass = $id.get(0).className, 
     realId = $id.get(0).id, 


     $input = $('<input>',{width: width}); 
    $id.after($input); 
    $id.hide(); 
    $id.find('option').remove(); 
    //превратили 

    $input.select2({ 
     query: function (query) { 
      var data = {}, i; 
      data.results = []; 

      // подтставим то что искали 

      if (query.term !== "") { 
       data.results.push({ 
        id: query.term, 
        text: query.term 
       }); 
      } 

      // добавим остальное 

      for (i = 0; i < choices.length; i++) { 
       if (choices[i].text.match(query.term) || choices[i].id.match(query.term)) data.results.push(choices[i]); 
      } 

      query.callback(data); 
     } 
    }).on('change',function() 
      { 
       var value=$input.val(); 
       $id.empty(); 
       $id.append($('<option>').val(value)) 
       $id.val(value);    
      } 
     ); 
})(jQuery);

CSS文件jQuery的 - 我将其命名为test.css并将其应用到我的jsp页面：

#test { 
    width: 300px; 
}

我的jsp页面

<html> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" > 
<title>Страница выборки</title> 
<link rel="stylesheet" href="resources/cssFiles/jquery-ui.css"/> 
<link rel="stylesheet" href="resources/cssFiles/test.css"/> 
<script type="text/javascript" src="resources/jsFiles/jquery-1.10.1.min.js"></script> 
<script type="text/javascript" src="resources/jsFiles/jquery-ui.js"></script> 
<script type="text/javascript" src="resources/jsFiles/jquery-ui-i18n.js"></script> 
<script type="text/javascript" src="./resources/jsFiles/selecter.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() 
     { 

     $("#parctdate, #chldAdmitDate, #chldSchlDate, #name, #type, #daySchdl, #workSchdl, #rotation, #numbch, #chUnder3, #chUpper3, #chGoSchool, #chAdmitted").mouseenter(function() {   
      $(this).css("background-color", "gainsboro"); 
     }); 

     $("#parctdate, #chldAdmitDate, #chldSchlDate, #name, #type, #daySchdl, #workSchdl, #rotation, #numbch, #chUnder3, #chUpper3, #chGoSchool, #chAdmitted").mouseleave(function() {   
      $(this).css("background-color", "white"); 
     }); 

     var enabledDays = ["6-1-2013", "7-1-2013", "8-1-2013", "9-1-2013", "10-1-2013", "11-1-2013"]; 
     function nationalDays(date) { 
       var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();    
       for (i = 0; i < enabledDays.length; i++) { 
        if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1 || new Date() > date) {   
         return [true]; 
        } 
       } 
       return [false]; 
      } 

     $(function(){ 
       $.datepicker.setDefaults($.extend($.datepicker.regional["ru"])); 
       $("#datepicker1, #datepicker2, #datepicker3").datepicker({dateFormat: "yy-mm-dd", 
                     duration: "normal", 
                     numberOfMonths: [ 1, 2 ], 
                     constrainInput: true, 
                     beforeShowDay: nationalDays}); 
      });   


    }); 

</script> 

</head> 

<body> 

<spring:message code="label.input.button" var="labelbutton"/> 

<h3 align="center"><spring:message code="label.input.topLabel"/></h3> 


<form:form id="myform" cssClass="testClass" modelAttribute="fboAttribute" method="post" action="add" > 
<table align="center"> 


<tr id="name"> 
<td><form:label path="institution.nameOfInstitution"><spring:message code="label.input.nameOfInstitution"/></form:label> 
<form:select id="test" path="institution.nameOfInstitution"> 
<form:option value=""><spring:message code="label.select.msg" />-</form:option> 
<form:options items="${listOfInstitutionsNames}"/> 
</form:select> 

<tr> 
<td><input type="submit" value="${labelbutton}"/></td> 

</table> 
</form:form>

我想将我的jQuery脚本与我的jsp和Spring表单标签集成在一起。

对不起，我是jQuery新手。

谢谢

来源

2013-06-29 java_user

嗨，通过整合你是什么意思？ – Akheloes

你好，先生。我想将jQuery + CSS集成到我的JSP中（最后我的问题选项卡完全是）但是我很困惑，因为我之前没有使用过jQuery。所以insted 以及select标签之间的所有内容我想使用jQuery。代码正如你可以看到我有这是我的属性$ {listOfInstitutionsNames}提取，我想把它们放入jQuery代码insted中使用的jQuery属性-var test-示例。 –

jQuery是一个JavaScript库。您不应该使用jQuery添加HTML代码。我不知道你整合的意思，但你可以添加脚本到这样的页面：'' –

jQuery的，就像任何JavaScript，在<script>标签被添加在你的JSP页面的<head>标签。要么你所有的代码或只是一个链接添加到.js文件，其中包含您的jQuery，例如像：

<script src="./libs/jquery/1.10.1/jquery.min.js"></script>

已经这样做了，你现在想利用你的jQuery的HTML标签，你这样做是为任何HTML页面。也就是说，就你而言，你不需要拿走弹簧标签。让它通过您${listOfInstitutionsNames}产生选择/选项，只需添加class="testclass"到您的春天表单标签，就像这样：

<form:form cssClass="testclass" id="myform" modelAttribute="fboAttribute" method="post" action="add" >

当渲染的浏览器的形式，Spring会在生成的HTML包括与值类的属性的测试类。

希望有所帮助，祝你好运。

来源

2013-06-29 11:48:25 Akheloes

谢谢您的回答....我喜欢你说它不起作用。哦。我没有班级我有cssClass而不是Spring的形式。我在上面编辑我的问题 –

jsFiddle上有任何spring标签为你工作吗？ – Akheloes

对于动态Web项目（使用MVC模式设计）

添加像这样的头部分：

<script type="text/javascript" src="${pageContext.request.contextPath}/jQuery.js"/></script>

我一直在我的jquery.js在WebContent文件夹中（与JSP页面）。

来源

2014-10-22 01:00:48

如果你的意思是，你要绑定Java端信息JS变种，你可以做我所做的：

在Java方面，使用谷歌的GSON编码的Java对象到JSON串。
在Java方面，使用org.apache.commons.lang.StringEscapeUtils.escapeJavaScript（String）使您的Json字符串作为JavaScript转义。
在JSP侧，做这样的事情：

<script> 
    var jsonObject = JSON.parse("<%=yourJsonString%>"); 
    </script>

来源

2015-05-05 02:00:25 Hopesun

它工作！在jsp中添加Gson之后。凉！！！ –

jQuery添加到JSP页面

回答

相关问题