jQuery ajouter à la page JSP
J'ai un morceau de code jQuery que j'ai trouvé sur internet et je veux l'intégrer à ma page jsp, j'utilise Printemps balises de formulaire.
Voici le code 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);Fichier CSS de jQuery - j'ai le nom de test.css et de l'appliquer à ma page jsp:
#test {
width: 300px;
}Ma page 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>Je voudrais intégrer mes scripts jQuery avec ma jsp et le Printemps balises de formulaire.
Je suis désolé, je suis nouveau dans jQuery.
Merci
- Salut, par intégrer tu veux dire quoi ?
- Bonjour monsieur. Je souhaite intégrer jQuery+CSS de ma page JSP(mon dernier onglet question est exactement <forme:select id="test" path="institution.nameOfInstitution">), Mais j'ai confondu parce que je ne voulais pas travailler avec jQuery avant. Donc insted <forme:select id="test" path="institution.nameOfInstitution"></forme:select>, et tout ce qui entre balise select, je veux utiliser jQuery. code Et comme vous pouvez le voir, j'ai <form:options items="${listOfInstitutionsNames}"/> ceci est mon attributs ${listOfInstitutionsNames} récupérer et je veux les mettre en jQuery code insted utilisé dans jQuery attributs -var test - exemple.
- jQuery est une bibliothèque JavaScript. Vous ne devez pas ajouter de code HTML avec jQuery. Je ne sais pas ce que tu veux dire par intégrer... mais vous pouvez ajouter le script de la page comme ceci:
<script src="path_to_jquery"></script> - Oui, monsieur... je veux dire à la place de mon <forme:select> utiliser ce code jQuery. Et de faire mes attributs apparaît dans le code jQuery. Mes attributs sont ce ${listOfInstitutionsNames}. Où les ajouter dans le code jQuery. et j'ai besoin d'effectuer une itération sur ce ${listOfInstitutionsNames} attributs.
- savez-vous comment ajouter jQuery à une page HTML ? Si oui, il n'y a pas beaucoup de différence entre ce que, en JSP et HTML. En fait, jQuery est juste comme n'importe quel JS (javascript), vous pouvez l'utiliser dans n'importe quelle balise HTML (que ce soit le Printemps ou non).
- Donc, vous voulez littéralement à emporter le printemps balise de formulaire ?
- oui, monsieur, je veux enlever le printemps balise form
- Ok. Mais pourquoi le prendre, de ce que je vois, la différence entre ce que vous avez appelé "html jQuery exemple" et le Printemps balise form est un simple attribut de classe, je me suis trompé dans tout cela ?
- Mais vous voyez, le problème est qu'il n'est pas du travail parce que le Printemps formulaire a une structure différente. Comme exemple, il a cssClass pas seulement la classe comme dans l'exemple de code html. lorsque j'essaie d'ajouter qu'il ne me montre rien mais quand j'essaie de l'exécuter ici jsfiddle.net/oceog/x4XQp cela fonctionne.
- vous avez essayé de printemps balises dans jsfiddle ?
- oui. J'utilise de mettre <%@ taglib prefix="formulaire" uri="springframework.org/tags/form" %> pour utiliser le Printemps des balises dans ma jsp
Vous devez vous connecter pour publier un commentaire.
jQuery, comme n'importe quel JavaScript, est ajouté dans une
<script>balise dans le<head>tag de votre page JSP. Vous ajoutez tout le code ou tout simplement un lien vers le.jsfichier contenant votre jQuery, comme par exemple :Après avoir fait cela, vous voulez maintenant de tirer parti de votre jQuery dans les balises HTML, vous n'avez que comme pour n'importe quelle page HTML. À savoir, dans votre cas, vous n'avez pas à tenir à l'écart le printemps des balises. Laissez générer le sélectionner/options via votre
${listOfInstitutionsNames}, il suffit d'ajouterclass="testclass"à votre source balise de formulaire, comme ceci :Lors du rendu de la forme sur un navigateur, le Printemps sera inclure dans le code HTML généré la classe de l'attribut avec la valeur de testclass.
Espère que ça aide, bonne chance.
jquery.min.jsfichier? Est-ce un standard de fichier, nous devons mettre dans notre projet web et de l'utilisation des fonctions jQuery sous<script type="text/javascript"> </script>?De Projet Web Dynamique(conçus en utilisant le Modèle MVC)
Ajouter comme cela dans la section de la tête:
J'ai gardé mon jQuery.js dans le dossier WebContent(avec des pages jsp).
jQuery.jsfichier? Est-ce un standard de fichier, nous devons mettre dans notre projet web et de l'utilisation des fonctions jQuery sous<script type="text/javascript"> </script>?si ce que tu veux dire, c'est que vous voulez lier Java côté de l'information à la JS var, vous pouvez le faire comme je l'ai fait:
À Java côté, l'utilisation de Google Gson pour encoder objet Java à chaîne Json.
À Java, d'utiliser des org.apache.commons.lang.StringEscapeUtils.escapeJavaScript(String) pour vous rendre chaîne Json échappé que JavaScript.
À JSP côté, faire quelque chose comme ceci: