2013-06-29 20 views
6

Ho un pezzo di codice jQuery che ho trovato su Internet e voglio integrarlo nella mia pagina jsp, utilizzo i tag di tipo Spring.jQuery aggiunta alla pagina JSP

Ecco il codice 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); 

file CSS per jQuery - I name it test.css e applicarlo alla mia pagina jsp:

#test { 
    width: 300px; 
} 

La mia pagina 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> 

Vorrei integrare i miei script jQuery con i miei tag modulo jsp e Spring.

Mi dispiace, sono nuovo in jQuery.

Grazie

+0

Ciao, da integrare vuoi dire che cosa? – Akheloes

+0

Ciao signore.Voglio integrare jQuery + CSS al mio JSP (l'ultima tab della mia domanda è esattamente ) Ma ho confuso perché non avevo lavorato con jQuery prima. Così insted e tutto quello che c'è tra select tag Voglio usare jQuery. codice E come puoi vedere ho questo è il mio attributo $ {listOfInstitutionsNames} che preleva e voglio metterli nel codice jQuery insted usato negli attributi jQuery -var test-example. –

+0

jQuery è una libreria JavaScript. Non dovresti aggiungere codice HTML con jQuery. Non so cosa intendi per integrazione ... ma puoi aggiungere lo script alla pagina in questo modo: '' –

risposta

3

jQuery, come qualsiasi JavaScript, viene aggiunto in un tag <script> nel <head> tag della pagina JSP. O si aggiunge tutto il codice o solo un collegamento al file .js contenente il jQuery, come ad esempio:

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

Fatto questo, si vuole ora per sfruttare il vostro jQuery nei tag HTML, lo fai come per qualsiasi pagina HTML. Vale a dire, nel tuo caso, non devi portare via i tag primavera. Let it generare Select/opzioni tramite il vostro ${listOfInstitutionsNames}, basta aggiungere class="testclass" al tag sotto forma di primavera, in questo modo:

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

Quando il rendering del modulo su un browser, Primavera includerà nel codice HTML generato l'attributo class con valore di test class.

Spero che questo aiuti, buona fortuna.

+0

Grazie per la risposta .... Mi è piaciuto hai detto che non funziona. Oh. Non ho classe ho cssClass invece in forme di primavera. Modifica la mia domanda di cui sopra per te –

+0

C'è qualche tag di primavera che funziona per te su jsFiddle? – Akheloes

1

Per il progetto Web dinamico (progettato utilizzando MVC Model)

Aggiungi come questo in sezione head:

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

ho mantenuto la mia jquery.js nella cartella WebContent (con pagine JSP).

1

se quello che vuoi dire è che si vuole legano Java informazioni lato per JS var, si può fare come ho fatto io:

  1. Al lato Java, utilizzare GSON di Google per codificare oggetto Java a JSON stringa.

  2. Sul lato Java, utilizzare org.apache.commons.lang.StringEscapeUtils.escapeJavaScript (String) per rendere la stringa Json sfuggita come JavaScript.

  3. Al fianco JSP, fare qualcosa di simile:

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

Ha funzionato !!! Dopo aver aggiunto Gson in jsp. Freddo!!! –

Problemi correlati