个人中心
gpt4 book ai didi

javascript - 另一个 JSP(也使用 jQuery)内的 JSP(使用 jQuery)出现问题

转载 作者：行者123 更新时间：2023-11-28 06:23:09 25 4
gpt4 key购买 nike

首先了解一些背景信息，我需要使用 datepicker 选择月份和一个仪表(通过他的序列号)，向 MySql 数据库发送查询并获取一些数据以“绘制 flot ”图表。我已经工作了一个月、仪表选择器和查询。

我现在需要的是将 Flot 图表和日期选择器放在同一页面中。

我尝试过的:

  • 显然与 jQuery/javascript 库存在冲突，所以我已经将日期选择器更改为相同的 jQuery 版本浮点(jquery-1.11.3)。
  • 还尝试使用另一个jsp来分离flot的日期选择器仅用于流程图的页面。

但仍然无法使这两个项目正常工作，因为日期选择器的显示不起作用或 Flot 图表不显示。

我被困住了，真的需要这个工作。

perfilCarga.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html>

<html>
    <head>               
        <link rel="stylesheet" href="resources/css/jquery-ui-1.10.3.custom.css" type="text/css" />         
        <script type="text/javascript" src="resources/js/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="resources/js/jquery.flot.min.js"></script>          
        <script type="text/javascript" src="resources/js/jquery-ui-1.10.3.custom.js"></script>
        <script type="text/javascript" src="resources/js/datepicker_reg.js"></script> <!-- changes the datepicker lenguage to espanish-->
        <script type="text/javascript" src="resources/js/datepicker_mes.js"></script><!-- fix the datepicker to ommit the day-->
        <script type="text/javascript" src="resources/js/perfil_carga.js"></script><!-- send the meter serial and date to the servlet using ajax-->

        <script type="text/javascript">
            $.datepicker.setDefaults($.datepicker.regional['es']);
        </script>    

        <style>
            .ui-datepicker-calendar {
            display: none;
            }
        </style>       

    <title></title>
    </head>
    <body>
            <table><tr>
                    <td>
            <s:form theme="simple" action="GetProfile" method="POST">

                    Seleccione un medidor:<br>
                    <s:select id="meterList" name="meter" list="meters" />
                    <br>
                    Seleccione una Fecha:<br>
                    <input name="startDate" id="startDate" class="date-picker" />
                    <br><br>
                    <button type="button" id="LoadRecordsButton" onclick="changeContent()">Generar Perfil</button>          
            </s:form>
                    </td>
                    <td>
                        <jsp:include page="flot_graph.jsp" /> 
                    </td>
            </tr></table>
    </body>
</html>

flot_graph.jsp

<html>
    <head>
        <link href="resources/css/flot_plot.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="resources/js/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="resources/js/jquery.flot.min.js"></script>  
        <title></title>
<script type="text/javascript">
var d1 = [[1, 500], [2, 300], [3, 500], [4, 300], [5, 500], [6, 300]];

$(document).ready(function () {
    $.plot($("#placeholder"), [d1]);
});
</script>
    </head>
    <body>
        <center>  
            <div id="placeholder"></div>
        </center>
    </body>
</html>

更新

根据@user3509208的评论，在chrome控制台中出现以下错误。 

Uncaught TypeError: $(...).datepicker is not a function

在文件 datepicker_mes.j 中(第 2 行)。 

$(function() {
    $('.date-picker').datepicker(
        {
            dateFormat: "mm/yy",
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            onClose: function(dateText, inst) {

                function isDonePressed(){
                    return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
                }

                if (isDonePressed()){
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');

                    $('.date-picker').focusout();//Added to remove focus from datepicker input box on selecting date
                }
            },
            beforeShow : function(input, inst) {

                inst.dpDiv.addClass('month_year_datepicker');

                if ((datestr = $(this).val()).length > 0) {
                    year = datestr.substring(datestr.length-4, datestr.length);
                    month = datestr.substring(0, 2);
                    $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
                    $(this).datepicker('setDate', new Date(year, month-1, 1));
                    $(".ui-datepicker-calendar").hide();
                }
            }
        });
});

最佳答案

这显然是一个“订单格式”(我真的不知道怎么调用它)问题。在控制台中检查错误后，开始谷歌搜索并找到这个 Answer作者:@Oladipo Olasemo。因此，按照建议组织代码后，问题就消失了。 

<html>
    <head>
        <!--  Style sheet references and CSS definitions -->
    </head>
    <body>
        <!-- HTML markup and other page content -->

        <!-- JavaScript references. You could include jQuery here as well and do all your scripting here. -->
    </body>
</html>

再次感谢@user3509208，他的评论让我找到了答案。

现在绘制这些图表!

关于javascript - 另一个 JSP(也使用 jQuery)内的 JSP(使用 jQuery)出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35346754/

25 4 0
文章推荐： javascript - 如何通过单击其中的按钮来删除父 iframe？
文章推荐： javascript - 将彩色 Logo 转换为纯白色 Logo
文章推荐： javascript - element.html() 调用导致图像痉挛
文章推荐： c++ - 使用帕斯卡三角形打印二项式系数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com