Question

我正在编写一个网页，其中必须根据所选日期显示数据库的结果。我在这里使用jquery datepicker来选择日期，下面是我的代码。

的index.html

</head>
<body>
    <marquee>
        <h1>This is an example of ajax</h1>
    </marquee>

    <p>
        Date: <input type="text" id="startDatePicker">
    </p>
    <p>
        Date: <input type="text" id="endDatePicker">
    </p>

    <form name="vinform">
        Enter id:<input type="button" id="somebutton" value="Click Me">
    </form>
    <span id="somediv"> </span>
    <script type="text/javascript" src="tableGenerator.js"></script>

</body>
</html>

tableGenerator.js

$('#somebutton').click(
        function() {
            $("#startDatePicker").datepicker();
            $("#endDatePicker").datepicker();
            $.getJSON('Controller', {
                //the parameters go here
            }, function(searchList) {
                var $table = $('<table>').appendTo($('#somediv'));
                $.each(searchList, function(index, userBean) {
                    $('<tr>').appendTo($table).append(
                            $('<td>').text(userBean.caseNumber)).append(
                            $('<td>').text(userBean.caseOwner)).append(
                            $('<td>').text(userBean.status)).append(
                            $('<td>').text(userBean.issue)).append(
                            $('<td>').text(userBean.reason)).append(
                            $('<td>').text(userBean.age));
                });
            });
        });

这里我需要先选择日期，然后当我点击提交时，它应该显示表格。但在我的情况下，当我点击日期选择器文本框时，这不起作用，而是如果我单击按钮，然后如果我点击日期选择器文本框，它工作正常。

请让我知道我哪里出错了以及如何解决这个问题。

由于

Answer 1

你必须这样称呼：

 $("#startDatePicker").datepicker();
 $("#endDatePicker").datepicker();

超出Click功能，或仅在用户点击按钮时应用日期选择器。

所以你需要这样做

$(document).ready(function() {
        $("#startDatePicker").datepicker();
        $("#endDatePicker").datepicker(); 
});

因此，使用此功能，您将在页面加载时应用datepicker，而无需单击按钮

Answer 2

$("#startDatePicker").datepicker();
$("#endDatePicker").datepicker();

$('#somebutton').click( function() {


    $.getJSON('Controller', {
        //the parameters go here
    }, function(searchList) {
        var $table = $('<table>').appendTo($('#somediv'));
        $.each(searchList, function(index, userBean) {
            $('<tr>').appendTo($table).append(
                    $('<td>').text(userBean.caseNumber)).append(
                    $('<td>').text(userBean.caseOwner)).append(
                    $('<td>').text(userBean.status)).append(
                    $('<td>').text(userBean.issue)).append(
                    $('<td>').text(userBean.reason)).append(
                    $('<td>').text(userBean.age));
        });
    });

});

Answer 3

试试这个！

$(document).ready(function() {
    $("#startDatePicker").datepicker();
    $("#endDatePicker").datepicker();
});

$('#somebutton').click(
    function() {
        $.getJSON('Controller', {
            //the parameters go here
        }, function(searchList) {
        var $table = $('<table>').appendTo($('#somediv'));
        $.each(searchList, function(index, userBean) {
            $('<tr>').appendTo($table).append(
                    $('<td>').text(userBean.caseNumber)).append(
                    $('<td>').text(userBean.caseOwner)).append(
                    $('<td>').text(userBean.status)).append(
                    $('<td>').text(userBean.issue)).append(
                    $('<td>').text(userBean.reason)).append(
                    $('<td>').text(userBean.age));
        });
    });
});

Answer 4

您必须在Some Button Click外部和内部添加Datepicker选项。

$( document ).ready(function() {    

    // Date Picker         
    $("#startDatePicker").datepicker();
    $("#endDatePicker").datepicker();

    $('#somebutton').click( function() {


        $.getJSON('Controller', {
            //the parameters go here
        }, function(searchList) {
            var $table = $('<table>').appendTo($('#somediv'));
            $.each(searchList, function(index, userBean) {
                $('<tr>').appendTo($table).append(
                        $('<td>').text(userBean.caseNumber)).append(
                        $('<td>').text(userBean.caseOwner)).append(
                        $('<td>').text(userBean.status)).append(
                        $('<td>').text(userBean.issue)).append(
                        $('<td>').text(userBean.reason)).append(
                        $('<td>').text(userBean.age));
            });
        });

        // Date Picker         
        $("#startDatePicker").datepicker();
        $("#endDatePicker").datepicker();

    });

});

Answer 5

试试这个

$(document).ready(function() {
            $("#startDatePicker").datepicker();
            $("#endDatePicker").datepicker();
            $.getJSON('Controller', {
                //the parameters go here
            }, function(searchList) {
            var $table = $('<table>').appendTo($('#somediv'));
            $.each(searchList, function(index, userBean) {
                $('<tr>').appendTo($table).append(
                        $('<td>').text(userBean.caseNumber)).append(
                        $('<td>').text(userBean.caseOwner)).append(
                        $('<td>').text(userBean.status)).append(
                        $('<td>').text(userBean.issue)).append(
                        $('<td>').text(userBean.reason)).append(
                        $('<td>').text(userBean.age));
            });
        });

    });

工作JS FIDDLE

点击按钮后，Jquery插件工作

5 个答案: