jQuery - Datepicker 不填充哈希图日期字段

Question

我正在尝试使用 jQuery datepicker 函数来填充作为哈希图中对象集的一部分的日期字段。

我们正在使用 STRUTS 1 来映射我们的表单数据 - 对于我们的大部分数据，这已经足够了。

我之前已经检查并写出了这些字段，以便可以通过手动输入日期来填充它们，现在我想添加 jQuery 日期选择器以允许用户从弹出日历中选择日期。我正在使用 Chrome。代码如下：sn-p。

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

这是我的 getter 和 setter 的样子。

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

((注意：我知道'"+counter+"' 没有创建适当的标签-但修复这个并没有修复日历功能))

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

什么会导致日历出现在 jQuery 日期选择器中，但不允许我分配日历值？

Answer 1

我认为问题在于 id 选择器的串联。您需要转义括号。

试试这个：

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

Answer 2

首先，你有两个概念的混合后端代码（Java）和一个客户端代码（JavaScript）。通常，在 Web 应用程序中，当用户发出访问您的服务器的请求时，服务器会运行后端代码以生成响应并将其发送回 - 该响应采用 HTML/JS/CSS 的形式，用于显示内容在浏览器中。一旦进入浏览器，JavaScript 代码就可以执行以提供更多功能。

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

话虽如此，两者都可以交流。不是直接的方式，例如，你不能从客户端调用MyServerObject.setMyValue()，但是如果你想从前端传输到后端，基本上有两种方法：

• 表单提交 - 现在是“老派”的做法。并不是说它是坏，而是不像使用的那样。本质上，您将在页面上有一个<form>，其中包含一组可以操作的<input>s，并且当提交表单时，它会将所有值传输到后端。这将根据您想要获取数据的方式而有所不同，但归结为表格上的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 请求的一部分传输，并将识别是谁发出的。

无论如何，如果您需要将信息传递回客户端，例如“操作成功”或“失败”，那么后端可以通过或多或少两种方式响应 AJAX 请求。一种方法是从最简单的boolean 发送回一些数据以指示成功/失败，然后将字符串或整个对象（可能已序列化并传输到 JSON）传回以指示响应。第二种方法是发送response code 来表示发生了什么。实际上，您可能会同时使用两者。在客户端，这将通过使用 jQuery 处理程序来处理

 $.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 调用的一部分。值得注意的是，alert 仅用于说明目的 - 您可能会以不同的方式通知用户。或者可能根本没有，因为它可能不相关，只要它有效，所以你可能只在它失败时通知他们。