草庐IT

javascript - jQuery 添加到 JSP 页面

coder 2024-07-24 原文

我有一段在互联网上找到的 jQuery 代码,我想将它集成到我的 jsp 页面中,我使用 Spring 表单标签。

这是 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);

jQuery 的 CSS 文件 - 我将其命名为 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 的新手。

谢谢

最佳答案

jQuery 和任何 JavaScript 一样,被添加到 <script> 中。 <head> 中的标签JSP 页面的标记。您要么添加所有代码,要么只添加指向 .js 的链接。包含您的 jQuery 的文件,例如:

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

完成后,您现在想在 HTML 标记中利用 jQuery,就像对任何 HTML 页面一样。也就是说,在您的情况下,您不必取下 Spring 标签。让它通过您的 ${listOfInstitutionsNames} 生成选择/选项, 只需添加 class="testclass"到你的 spring 表单标签,像这样:

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

当在浏览器上呈现表单时,Spring 将在生成的 HTML 中包含值为 testclass 的类属性。

希望对您有所帮助,祝您好运。

关于javascript - jQuery 添加到 JSP 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17378829/

有关javascript - jQuery 添加到 JSP 页面的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗? - 2

    当我使用Bundler时,是否需要在我的Gemfile中将其列为依赖项?毕竟,我的代码中有些地方需要它。例如,当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试,但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/4758609/

  2. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序,我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件,包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式,但它

  3. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作),这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  4. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过?我有一个调用Controller方法的JqueryPOSTajax调用,但我没有在其中放置任何真实性代码,但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  5. ruby - 可以通过多少种方法将方法添加到 ruby​​ 对象? - 2

    当谈到运行时自省(introspection)和动态代码生成时,我认为ruby​​没有任何竞争对手,可能除了一些lisp方言。前几天,我正在做一些代码练习来探索ruby​​的动态功能,我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角,因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资

  6. ruby - 如何在 Ruby 中向现有方法定义添加语句 - 2

    我注意到类定义,如果我打开classMyClass,并在不覆盖的情况下添加一些东西我仍然得到了之前定义的原始方法。添加的新语句扩充了现有语句。但是对于方法定义,我仍然想要与类定义相同的行为,但是当我打开defmy_method时似乎,def中的现有语句和end被覆盖了,我需要重写一遍。那么有什么方法可以使方法定义的行为与定义相同,类似于super,但不一定是子类? 最佳答案 我想您正在寻找alias_method:classAalias_method:old_func,:funcdeffuncold_func#similartoca

  7. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在,我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式?我不这么认为……或者有什么rake任务可以重新生成样式吗? 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你,你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  8. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  9. ruby-on-rails - 在 Ruby on Rails 中添加 boolean 列值 - 2

    我正在开发一个创建网络博客的RubyonRails项目。我希望将一个名为featured的boolean数据库字段添加到Post模型中。该字段应该可以通过我添加的事件管理界面进行编辑。我使用了以下代码,但我什至没有在网站上显示另一列。$railsgeneratemigrationaddFeaturedfeatured:boolean$rakedb:migrate我是RubyonRails的新手,非常感谢任何帮助。我的index.html.erb文件中的相关代码(views):FeaturedPost架构.rb:ActiveRecord::Schema.define(:version=>

  10. ruby - 如何将便捷类方法添加到 ruby​​ 中的 Singleton 类 - 2

    假设我有一个这样的单例类:classSettingsincludeSingletondeftimeout#lazy-loadtimeoutfromconfigfile,orwhateverendend现在,如果我想知道使用什么超时,我需要编写如下内容:Settings.instance.timeout但我宁愿将其缩短为Settings.timeout使这项工作有效的一个明显方法是将设置的实现修改为:classSettingsincludeSingletondefself.timeoutinstance.timeoutenddeftimeout#lazy-loadtimeoutfromc

随机推荐