2016-07-15 34 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