All geek questions in one place

Adding jQuery to a JSP page

I have a piece of jQuery code that I found on the Internet and I want to integrate it into my jsp page, I use Spring form tags.

Here is the jQuery code:

(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 file for jQuery - I call it test.css and apply it to my jsp page:

 #test { width: 300px; }

My jsp page

  <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>

I would like to integrate my jQuery scripts with jsp and Spring form tags.

Sorry I'm new to jQuery.

thanks

+6
source share
3 answers

jQuery, like any JavaScript, is added to the <script> tag in the <head> your JSP page. You either add all the code, or just a link to the .js file containing your jQuery, for example, for example:

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

Having done this, you now want to use jQuery in HTML tags, you do this as for any HTML page. Namely, in your case you do not need to select spring tags. Let it generate select / options through your ${listOfInstitutionsNames} , just add class="testclass" to the spring form form tag, for example:

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

When rendering the form in the browser, spring will include the class attribute with the value testclass in the generated HTML.

Hope this helps, good luck.

+3
source

For a dynamic web project (developed using the MVC model)

Add this to the section of the chapter:

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

I saved jQuery.js in the WebContent folder (with jsp pages).

+1
source

if you want to say that you want to bind information from Java to JS var , you can do it like me:

  • On the Java side, use Google Gson to encode a Java object into a Json string.

  • On the Java side, use org.apache.commons.lang.StringEscapeUtils.escapeJavaScript (String) to make the Json string escaped as JavaScript.

  • On the JSP side, do something like this:

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

Source: https://habr.com/ru/post/948370/

More articles:


All Articles