JSP（使用jQuery）问题在另一个JSP内（也使用jQuery）

一些上下文首先，我需要选择一个月使用datepicker和米（通过他的序列号），发送一个查询到MySql数据库并获取一些数据“绘制在flot”图中。我已经在这个月工作了，电表选择和查询。JSP（使用jQuery）问题在另一个JSP内（也使用jQuery）

我现在需要的是将Flot图形和datepicker放在同一页面中。

我曾尝试：

显然有与jQuery的/ javascript库冲突，所以我已经改变了日期选择器的海军报（jQuery的1.11的相同的jQuery版本。 3）。
也试图分开flot的日期选择器，使用另一个jsp 页面仅用于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的意见得到了在铬控制台下面的错误。

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(); 
       } 
      } 
     }); 
});

来源

2016-02-11 Elber CM

您是否在Google Chrome中使用了开发者工具，并查看哪些错误正在写入控制台。 – user3509208

感谢您的评论@ user3509208问题已被更新。 –

可能是与jQuery的冲突问题。尽量将jquery的所有参考保存在一个页面中。从flot_graph jsp中删除jquery引用，因为你已经在第一个jps中包含它，而jps已经引用了jquery。 – user3509208

所以aparently是一个“订单格式”（我真的不知道怎么称呼它）的问题。在检查控制台中的错误后，开始使用谷歌搜索，并通过@Oladipo Olasemo找到这个Answer。因此，按照建议组织代码后，问题消失。

<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，他的评论引导我回答。

现在来绘制这些图！

来源

2016-02-11 20:21:18

JSP（使用jQuery）问题在另一个JSP内（也使用jQuery）

回答

相关问题