2016-07-15 2 views
0

jQuery datepicker 함수를 사용하여 해시 맵에 설정된 객체의 일부인 날짜 필드를 채우려고합니다.jQuery - hashmap 날짜 필드에 Datepicker가 채워지지 않습니다.

우리는 양식 데이터를 매핑하는 데 STRUTS 1을 사용하고 있으며 대부분의 데이터에 대해서는 충분합니다.

필자는 수동으로 날짜를 입력하여 채울 수 있도록 이미이 필드를 체크 아웃하고 작성했습니다. 이제 jQuery datepicker를 추가하여 사용자가 팝업 달력에서 날짜를 선택할 수있게하려고합니다. 크롬을 사용하고 있습니다. 아래 코드 스 니펫.

<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> 

다음은 제 게터와 세터의 모습입니다. 여기에 생성 된 HTML의

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

} 

그리고 마지막으로 :

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 보이는거야.

<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 자바 스 니펫에 유의하십시오. 특별히 중요하지는 않겠지 만. 나는 그 태그를 제거 할 것이다. – 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

첫째 :

이보십시오. 일반적으로 웹 응용 프로그램에서 사용자가 응답을 생성하기 위해 백엔드 코드를 실행하고 다시 보낸 서버를 조회하는 요청을하면 해당 응답은 HTML/JS/CSS 형식으로 표시됩니다 브라우저에서 브라우저에서 JavaScript 코드를 실행하면 추가 기능을 제공 할 수 있습니다.

이것은 대부분의 웹 응용 프로그램에 대한 기본 개념입니다. Java는 PHP 또는 C# 또는 JavaScript (NodeJS 형태) 또는 다른 많은 백엔드로 대체 될 수 있지만 항상 다른 시간, 환경에서 실행됩니다 , 심지어는 기계 및 지리적 위치가 포함됩니다.

이렇게 말하면 둘 다 통신 할 수 있습니다. 아니 직접 방식으로, 예를 들어, 당신은, 당신은 백엔드 프론트 엔드에서 전송하려는 그러나 경우, 클라이언트 측에서 MyServerObject.setMyValue()를 호출 할 수 없습니다 그것을 할 수있는 두 가지 방법이 기본적으로 있습니다 :

  • 양식 제출은 - 요즘은 그것을하는 "구식"방식입니다. 아니 불량한 아니지만 사용되지 않습니다.본질적으로 페이지에 <form>을 가지고 조작 할 수있는 <input> 집합을 가지며 양식을 제출하면 모든 값이 백엔드로 전송됩니다. 이것은 데이터를 가져 오는 방법에 따라 달라 지지만 양식상의 the action attribute으로 귀결됩니다. 이로 인해 페이지는 제출의 일부로 다시로드되고 사용자는 다른 페이지로 리다이렉트됩니다 (하지만, 아마도 같은 페이지로). 그것은 관입 적이면서 사용자 친화적 인 것으로 보이지 않으므로 "구식"성이 있습니다. 반면 HTML은 기본적으로 지원되며 모든 브라우저는 양식을 다루는 방법을 알고 있으므로 용도가 있습니다.
  • AJAX 요청 - 어떤 식 으로든 "새로운"것은 아니지만 일반적으로 클라이언트 측 코드가 백엔드와 통신하는 데 선호되는 방법입니다. 페이지를 떠나지 않고 사용자가 반드시 알 필요가없는 데이터를 서버에 보내는 작업도 포함됩니다. 따라서 더 나은 사용자 경험을 제공하고 백엔드에서 처리하기가 더 쉽습니다. 데이터가 더 잘 어울리는 방식을 만들 수 있습니다 (양식은 키 - 값 쌍만 제공합니다). AJAX를 달성하는 방법은 여러가지가 있지만

는 jQuery를 .ajax()와 두 개의 shorthands .get().post() 매우 편리하고 쉽다. 당신이 할 일은 onSelect 핸들러에서 다음과 같이 호출합니다 : $.post("some/path/on/my/server", myData) 여기서 myData 오브젝트는 JSON으로 전송 될 데이터이고 some/path/on/my/server은 해당 데이터를 승인 할 수있는 서버의 일부입니다. 일반적으로이 경로는 데이터를 따라 전달되는 일부 서버 측 코드를 호출하게 될 것입니다. 예전에는 Perl 등으로 작성된 CGI 스크립트를 사용했을 가능성이 있지만 요즘은 URI를 통해 노출 된 백엔드입니다. 경로가 어떻게 구현 될 것인가는 다양 할 수 있습니다. 불행히도 Struts가 어떻게 수행 될지 익숙하지는 않지만 어렵지 않아야한다고 생각합니다.

어쨌든 백엔드가 데이터를 받으면 정상적인 일은 처리 (유효성 검사, 위생 처리, 수행 할 작업 결정) 한 후 다른 프로세스에서 처리하도록하는 것입니다. 응용 프로그램. 귀하의 경우에는 일부 데이터를 수신 한 다음 일부 개체에 날짜를 작성한 다음 채우십시오. 필요한 것이 무엇이든하십시오. 그러나 사용자가 요청한 을 알아야하고 어떤 사용자가 캘린더를 사용하고 있는지 알고 싶다면 더 많은 정보를 포함해야 할 수도 있습니다. 많은 서버 측 언어에는 특정 사용자를위한 컨텍스트 인 세션이라는 개념이 있습니다. 누군가가 일정을 수정하면 해당 일정을 기반으로 한 사람을 찾아 해당 달력을 찾습니다. 세션이 설정 될 가능성이 높으며 세션을 사용하려면 아무 것도하지 않아도됩니다. 세션을 사용하는 대안은 사용자를위한 토큰을 전달하는 것입니다.이 방법은 AJAX 요청의 일부로 전송할 수있는 사용자 이름, 키, 세션 ID와 같은 일종의 정보 형식을 취하고 누가 발급했는지 식별합니다.

"Action succeeded"또는 "failed"와 같이 정보를 클라이언트에 다시 전달해야하는 경우 백엔드는 AJAX 요청에 다소간의 두 가지 방식으로 응답 할 수 있습니다. 한 가지 방법은 가장 단순한 boolean에서 일부 데이터를 보내서 응답을 나타 내기 위해 성공 또는 실패를 나타내는 문자열 또는 전체 객체를 전달하는 것입니다 (직렬화 및 JSON으로 전송 될 가능성이 있음). 두 번째 방법은 response code을 보내 무슨 일이 일어 났는지를 나타내는 것입니다. 실제로, 당신은 둘 다의 혼합물을 사용할 것 같다. 클라이언트 측에서, 이것은이 대안은 $.ajax 호출의 일부로서 성공/실패 핸들러를 지정하는 jQuery promises를 사용

$.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와 처리기를 사용하여 처리 될 것이다. alert은 설명 목적으로 만 사용되었습니다. 다른 방법으로 사용자에게 알릴 가능성이 큽니다. 또는 작동하지 않는 한 관련이 없으므로 아마 실패 할 수 있습니다. 따라서 실패한 경우에만 알릴 수 있습니다.

+0

WIsh 나는 모든 노력을 기울여야하고이 유틸리티가 제공하는 유틸리티에 대해 더 많은 신뢰를 나타낼 수 있습니다.하지만 Dama의 대답은 프런트 엔드와 백엔드 사이에 정보를 전달하지 않고도 즉시 문제를 해결했습니다. – Zibbobz

+0

많은 도움을 제공했기 때문에 나는 현상금을 줄 것이다. :) – Zibbobz

관련 문제