2013-06-29 5 views
6

में जोड़ रहा है मेरे पास jQuery कोड का एक टुकड़ा है जो मैंने इंटरनेट पर पाया है और मैं इसे अपने जेएसपी पेज में एकीकृत करना चाहता हूं, मैं स्प्रिंग फॉर्म टैग का उपयोग करता हूं।jQuery जेएसपी पेज

यहाँ jQuery कोड है: 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); 

सीएसएस फ़ाइल - मैं इसे 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 स्क्रिप्ट को एकीकृत करना चाहता हूं।

मुझे खेद है कि मैं jQuery में नया हूं।

धन्यवाद

+0

हाय, द्वारा तुम्हारा मतलब क्या एकीकृत:

  • JSP पक्ष में, कुछ इस तरह करते हैं? – Akheloes

  • +0

    हैलो सर।मैं अपने जेएसपी में jQuery + सीएसएस को एकीकृत करना चाहता हूं (आखिरी मेरा प्रश्न टैब ठीक है ) लेकिन मैं उलझन में हूं क्योंकि मैंने पहले jQuery के साथ काम नहीं किया था। तो insted और चयन टैग के बीच जो कुछ मैं jQuery का उपयोग करना चाहता हूं। कोड और जैसा कि आप देख सकते हैं कि मेरे पास यह मेरी विशेषता $ {listOfInstitutionsNames} ला रहा है और मैं उन्हें jQuery विशेषताओं में उपयोग करना चाहता हूं जो jQuery विशेषताओं -var test- example में उपयोग किया गया है। –

    +0

    jQuery एक जावास्क्रिप्ट लाइब्रेरी है। आपको jQuery के साथ HTML कोड नहीं जोड़ना चाहिए। मुझे नहीं पता कि एकीकृत करने का आपका मतलब क्या है ... लेकिन आप इस तरह के पेज पर स्क्रिप्ट जोड़ सकते हैं: '' –

    उत्तर

    3

    jQuery, किसी भी जावास्क्रिप्ट की तरह, अपने JSP पेज के <head> टैग में एक <script> टैग में जोड़ा जाता है। आप या तो .js फाइल करने के लिए सभी कोड या सिर्फ एक लिंक जोड़ने के अपने jQuery युक्त, उदाहरण के लिए:

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

    किया है, अब आप चाहते हैं HTML टैग में अपने jQuery लाभ उठाने के लिए, आप करते हैं कि के लिए के रूप में कोई एचटीएमएल पेज। अर्थात्, आपके मामले में, आपको वसंत टैग को दूर करने की आवश्यकता नहीं है। बस अपने वसंत फार्म टैग से class="testclass" जोड़ने के लिए, इस तरह यह अपने ${listOfInstitutionsNames} के माध्यम से चयन/विकल्प उत्पन्न करते हैं,:

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

    जब एक ब्राउज़र पर प्रपत्र प्रतिपादन, स्प्रिंग सृजित HTML में मूल्य के साथ वर्ग विशेषता शामिल होंगे testclass के।

    आशा है कि भाग्य में मदद करता है।

    +0

    में स्प्रिंग टैग का उपयोग करने के लिए उत्तर देने के लिए धन्यवाद <% @ टैगलिब उपसर्ग = "फ़ॉर्म" uri = "http://www.springframework.org/tags/form"%> का उपयोग करें .... मुझे पसंद आया आपने कहा कि यह काम नहीं करता है। ओह। मेरे पास कक्षा नहीं है, इसके बजाय स्प्रिंग रूपों में सीएसएस क्लास है। मैं आपके प्रश्न ऊपर –

    +0

    संपादित करता हूं क्या कोई वसंत टैग जेएसफ़िल्ड पर आपके लिए काम कर रहा है? – Akheloes

    1

    गतिशील वेब परियोजना (MVC मॉडल का उपयोग कर तैयार किया गया है)

    शीर्ष अनुभाग में इस तरह जोड़े के लिए:

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

    मैं WebContent फ़ोल्डर (jsp पृष्ठों के साथ) में अपने jQuery.js रखा।

    1

    अगर तुम क्या मतलब है कि आप जे एस वर को बाँध जावा पक्ष जानकारी करना चाहते है, तो आप के रूप में मैंने किया था कर सकते हैं:

    1. जावा पक्ष में, गूगल के Gson Json करने के लिए जावा वस्तु सांकेतिक शब्दों में बदलना करने के लिए उपयोग स्ट्रिंग।

    2. जावा पक्ष पर, json स्ट्रिंग को जावास्क्रिप्ट के रूप में सहेजने के लिए org.apache.commons.lang.StringEscapeUtils.escapeJavaScript (स्ट्रिंग) का उपयोग करें।

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

    यह काम किया !!! जेएसपी में जीसन जोड़ने के बाद। ठंडा!!! –