2016-07-15 31 views
0

我试图使用jQuery的日期选择器函数来填充日志字段是哈希映射中设置的对象的一部分。jQuery的Datepicker没有填充散列表日期字段

我们使用STRUTS 1来映射我们的表单数据 - 对于我们大部分的数据来说,这就足够了。

我已经检查并写过这些字段,以便可以通过手动输入日期填充它们,现在我想添加jQuery datepicker以允许用户从弹出日历中选择日期。我正在使用Chrome。下面的代码片段。

<script> 
    $(function() { 
     $(".datePick").datepicker({ 
      dateFormat: 'mm/dd/yy', 
      showOn: "button", 
      buttonImage: "images/calendar.png", 
      buttonImageOnly: true, 
      buttonText: "Select date", 
      onSelect: function(dateText,inst) 
      { 
       id=$(this).attr('id'); 
    pos = id.indexOf("(") + 1; 
    counter = id.slice(pos, -1); 
    id=id.replace("("+counter+")",""); 
       pieces = dateText.split("/"); 
      $("#"+ id+"MM("+counter+")").val(pieces[0]); 
      $("#"+ id+"DD("+counter+")").val(pieces[1]); 
      $("#"+id +"YYYY("+counter+")").val(pieces[2]); 
      } 
     }); 

     }); 

     </script> 

     <!-- "counter" is an integer which keeps track of what iteration of the 
     hashmap is being accessed, propertyValue is a string that allows me to 
     dynamically change the property of each form--> 
     <tr> 
      <td align="right" colspan="1"> 
       <label for="setOfObjectsStartMMDtH("+counter+")"> 
       <%=label.makeLabel(XXXXForm.FORM_KEY_VALUE)%></label> 
      </td> 
      <td align="left" colspan="4"> 
       <% propertyValue="setOfObjectsStartDtHMM("+counter+")";%> 
       <html:text property="<%=propertyValue%>" styleId="<%=propertyValue%>" 
       size="2" maxlength="2"/>&nbsp;/&nbsp; 

       <% propertyValue="setOfObjectsStartDtHDD("+counter+")";%>           
       <html:text property="<%=propertyValue%>" styleId="<%=propertyValue%>" 
       size="2" maxlength="2"/>&nbsp;/&nbsp; 

       <% propertyValue="setOfObjectsStartDtHYYYY("+counter+")";%>          
       <html:text property="<%=propertyValue%>" styleId="<%=propertyValue%>" 
       size="4" maxlength="4"/> 

       <% propertyValue="setOfObjectsStartDtH("+counter+")";%> 
       <html:hidden styleId="<%=propertyValue%>" property="<%=propertyValue%>" 
       styleClass="datePick"+counter></html:hidden> 

这是我的getters和setters的样子。

private final HashMap setOfObjects = new HashMap(); 

    /** 
    * @param startDtH the setOfObjectsStartDtH to set 
    */ 
    public void setSetOfObjectsStartDtH(String key, String startDtH) { 
     setOfObjects obj = getSetOfObjects(key); 
     obj.setStartDtH(startDtH); 
    } 

    /** 
    * @return the startDtH 
    */ 
    public String getSetOfObjectsStartDtH(String key) { 
     if(setOfObjectss.containsKey(key)){ 
      SetOfObjects obj = getSetOfObjects(key); 
      return obj.getStartDtH(); 
     } 
     return ""; 
    }  

    /** 
    * @param startDtHDD the startDtHDD to set 
    */ 
    public void setSetOfObjectsStartDtHDD(String key, String startDtHDD) { 
     SetOfObjects obj = getSetOfObjects(key); 
     obj.setStartDtHDD(startDtHDD); 
    } 

    /** 
    * @return the startDtHDD 
    */ 
    public String getSetOfObjectsStartDtHDD(String key) { 
     if(setOfObjectss.containsKey(key)){ 
      SetOfObjects obj = getSetOfObjects(key); 
      return obj.getStartDtHDD(); 
     } 
     return ""; 
    } 

    /** 
    * @param startDtHMM the startDtHMM to set 
    */ 
    public void setSetOfObjectsStartDtHMM(String key, String startDtHMM) { 
     SetOfObjects obj = getSetOfObjects(key); 
     obj.setStartDtHMM(startDtHMM); 
    } 

    /** 
    * @return the startDtHMM 
    */ 
    public String getSetOfObjectsStartDtHMM(String key) { 
     if(setOfObjectss.containsKey(key)){ 
      SetOfObjects obj = getSetOfObjects(key); 
      return obj.getStartDtHMM(); 
     } 
     return ""; 
    } 

    /** 
    * @param startDtHYYYY the startDtHYYYY to set 
    */ 
    public void setSetOfObjectsStartDtHYYYY(String key, String startDtHYYYY) { 
     SetOfObjects obj = getSetOfObjects(key); 
     obj.setStartDtHYYYY(startDtHYYYY); 
    } 

    /** 
    * @return the startDtHYYYY 
    */ 
    public String getSetOfObjectsStartDtHYYYY(String key) { 
     if(setOfObjectss.containsKey(key)){ 
      SetOfObjects obj = getSetOfObjects(key); 
      return obj.getStartDtHYYYY(); 
     } 
     return ""; 
    } 


    private SetOfObjects getSetOfObjects(String key){ 
     if(setOfObjects.containsKey(key))  
      return (SetOfObjects)setOfObjects.get(key); 

     SetOfObjects set = new SetOfObjects(); 
     set.setId(Integer.parseInt(key)); 
     setOfObjects.put(key, set); 
     return set; 
    } 

而这里的SetOfObjects的样子:

public class SetOfObjects{ 

    private String startDtH = ""; 
    private String startDtHMM = ""; 
    private String startDtHDD = ""; 
    private String startDtHYYYY = ""; 

    /** 
    * @param startDtH the startDtH to set 
    */ 
    public void setStartDtH(String startDtH) { 
     startDtH = startDtH; 
    } 

    /** 
    * @return the startDtH 
    */ 
    public String getStartDtH() { 
     return startDtH; 
    } 

    /** 
    * @param startDtHMM the startDtHMM to set 
    */ 
    public void setStartDtHMM(String startDtHMM) { 
     this.startDtHMM = startDtHMM; 
    } 

    /** 
    * @return the startDtHMM 
    */ 
    public String getStartDtHMM() { 
     return startDtHMM; 
    } 

    /** 
    * @param startDtHDD the startDtHDD to set 
    */ 
    public void setStartDtHDD(String startDtHDD) { 
     this.startDtHDD = startDtHDD; 
    } 

    /** 
    * @return the startDtHDD 
    */ 
    public String getStartDtHDD() { 
     return startDtHDD; 
    } 

    /** 
    * @param startDtHYYYY the startDtHYYYY to set 
    */ 
    public void setStartDtHYYYY(String startDtHYYYY) { 
     this.startDtHYYYY = startDtHYYYY; 
    } 

    /** 
    * @return the startDtHYYYY 
    */ 
    public String getStartDtHYYYY() { 
     return startDtHYYYY; 
    } 

} 

最后,这里的生成的html。

<script> 
    $(function() { 
     $(".datePick").datepicker({ 
      dateFormat: 'mm/dd/yy', 
      showOn: "button", 
      buttonImage: "images/calendar.png", 
      buttonImageOnly: true, 
      buttonText: "Select date", 
      onSelect: function(dateText,inst) 
      { 
       id=$(this).attr('id'); 
    pos = id.indexOf("(") + 1; 
    counter = id.slice(pos, -1); 
    id=id.replace("("+counter+")",""); 
       pieces = dateText.split("/"); 
      $("#"+ id+"MM("+counter+")").val(pieces[0]); 
      $("#"+ id+"DD("+counter+")").val(pieces[1]); 
      $("#"+id +"YYYY("+counter+")").val(pieces[2]); 
      } 
     }); 

     }); 

     </script> 

     <tr> 
      <td align="right" colspan="1"> 
             <label for="setOfObjectsStartMMDtH("+counter+")"><label class="normal">Set of Objects</label></label> 
         </td> 
         <td align="left" colspan="4"> 

       <input type="text" name="setOfObjectsStartDtHMM(0)" maxlength="2" size="2" value="" id="setOfObjectsStartDtHMM(0)">&nbsp;/&nbsp; 


       <input type="text" name="setOfObjectsStartDtHDD(0)" maxlength="2" size="2" value="" id="setOfObjectsStartDtHDD(0)">&nbsp;/&nbsp; 


       <input type="text" name="setOfObjectsStartDtHYYYY(0)" maxlength="4" size="4" value="" id="setOfObjectsStartDtHYYYY(0)"> 


       <input type="hidden" name="setOfObjectsStartDtH(0)" value="" class="datePick" id="setOfObjectsStartDtH(0)"> 

((注:我知道了“‘+专柜+’”不创造一个适当的标签 - 但解决这个没有固定的日历功能))

日历本身带有弹出没问题,但是当我选择一个日期时,页面跳转到顶部,并且日期字段没有填充 - 页面上的任何地方都没有错误消息,并且日历也不会消失,如通常在选择日期之后。

什么会导致日历显示为jQuery datepicker,但不允许我分配日历值?

+0

这与Java有什么关系? – Compass

+0

@Compass请注意Java片段 - 尽管我想这不是特别重要。我将删除该标签。 – Zibbobz

+0

在开发人员模式/工具的控制台中,您是否收到任何错误? – dama

回答

1

我认为问题是id选择器的串接。你需要避开括号。

试试这个:

 $("#"+ id+"MM\\("+counter+"\\)").val(pieces[0]); 
     $("#"+ id+"DD\\("+counter+"\\)").val(pieces[1]); 
     $("#"+id +"YYYY\\("+counter+"\\)").val(pieces[2]); 
+0

我会诚实 - 我不认为这会奏效,但它的工作!谢谢! – Zibbobz

1

首先,你有两个概念后端代码(JAVA)和客户端代码(JavaScript)的混合物。一般来说,在一个Web应用程序中,当用户发出一个请求到达你的服务器时,它会运行后端代码来生成响应并将其发回 - 该响应的形式是HTML/JS/CSS,用于显示事物在浏览器中。一旦进入浏览器,JavaScript代码就可以执行以提供更多功能。

这是针对大多数Web应用程序的基本思想 - Java可以用PHP或C#或JavaScript(以NodeJS的形式)或许多其他作为后端来代替,但您总是会在不同的时间和环境中执行,甚至机器以及地理位置。

就这样说,两者都可以沟通。不以直接的方式,例如,你不能调用从客户端MyServerObject.setMyValue(),但是如果你想从前端转移到后端,基本上有两种方法可以做到这一点:

  • 表单提交 - 现在是做这件事的“老派”方式。不是说它是不好,但不像使用的那样。基本上,您将在页面上有一个<form>,其中一组<input>可以被操纵,当表单被提交时,它将所有的值传输到后端。这将根据您想要获取数据的情况而有所不同,但归结为表格中的the action attribute。这导致页面作为提交的一部分被重新加载,并且用户被重定向到别处(尽管可能到同一页面)。它被视为侵入性的,而不是用户友好的,因此它是“老派”的。另一方面,它本来就是HTML支持的,任何浏览器都知道如何处理表单,所以它有它的用处。
  • AJAX请求 - 虽然不是以任何方式“新”,但这通常是客户端代码与后端进行通信的首选方式。它涉及在不离开页面的情况下将一些数据发送到服务器,并且用户也不一定知道它。因此,它提供了更好的用户体验,并且从后端处理也更容易,因为您可以设计数据更好的表现形式(表单仅为您提供键值对)。

虽然有很多的方式来实现AJAX,jQuery的.ajax()及其两个速记.get().post()都非常方便和容易。你可能会做的是在你的onSelect处理程序调用如下所示: $.post("some/path/on/my/server", myData)其中myData对象将作为您希望以JSON形式发送的数据,并且some/path/on/my/server是可以接受该数据的服务器的某个部分。一般来说,这条路径最终只会调用一些服务器端代码传递数据 - 在过去的几天中,您可能只会碰到用Perl编写的CGI脚本,但现在它只是通过URI公开的后端。这条路将如何实现可能会有所不同,不幸的是,我不熟悉Struts是如何在那里完成的,但我认为它一定不难。无论如何,一旦你的后端接收到数据,通常要做的事情就是以某种方式处理它(检查有效性,清理,决定要做什么),然后将它交给其他部分的进一步处理应用程序。在你的情况下,你可能会收到一些数据,然后用日期创建和填充一些对象,然后...做任何其他需要的东西。但是,如果您需要知道哪个用户发出了请求,并且此用户正在对其日历进行操作,则可能需要包含更多信息。很多服务器端语言都有会话的概念,这只是特定用户的上下文。如果有人修改了某个日历,则可以根据该会话找出它是谁,并找到相应的日历。会话很可能会为你设置,你可能无需使用它们。尽管如此,使用会话的另一种方法是为用户传递令牌 - 这种形式的信息可以是某种信息 - 用户名,密钥和会话ID,可以作为AJAX请求的一部分进行传输,并将识别是谁发布的。无论如何,如果您需要将信息传递回客户端,例如“Action succeeded”或“failed”,那么后端可以通过两种方式对AJAX请求做出响应。一种方法是从最简单的boolean发回一些数据以指示成功/失败以传回字符串或整个对象(可能序列化并转换成JSON)以指示响应。第二种方法是发送一个response code来表示发生了什么。事实上,你可能会使用两者的混合物。在客户端侧,这将被与由

$.post("some/path/on/my/server", myData) 
.done(function() { alert("sending data succeeded") }) 
.fail(function() { alert("sending data failed") }) 
.always(function() { alert("finished sending data") }) 

这是使用jQuery promises替代被指定的成功/失败处理程序作为$.ajax呼叫的一部分使用jQuery处理程序处理。值得注意的是,alert纯粹用于说明目的 - 您可能会以不同的方式通知用户。或者根本没有,因为只要它有效,它可能不相关,所以如果它失败,你可能只会通知它们。

+0

我可以给予这个答案更多的功劳,以及它带来的效用 - 但达玛的回答确实能够立即解决问题,而不必在前端和后端之间传递任何信息。 – Zibbobz

+0

虽然我会给你赏金,因为你提供了很多帮助。 :) – Zibbobz