Question

我想要一个带输入的对话窗口。我可以使用默认的jQuery-ui，但我使用的是包含bootstrap的。但是，输入仅在第一次打开时出现，随后对话框打开时，输入丢失。如何解决这个问题？这是HTML：

    <!DOCTYPE html>
<html>
<head lang="en">
    <link rel="stylesheet" href="../bower_components/jquery-ui/themes/base/jquery.ui.all.css">
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bower_components/bootstrap3-dialog/css/bootstrap-dialog.min.css">
    <link rel="stylesheet" href="../bower_components/bootstrap-datepicker/css/datepicker3.css">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h3>Hello!</h3>
    <div>
        <span>Enter a Zip Code: </span>
        <input type="text" id="zip">
        <button id="getEvents" class="btn btn-primary">Get events!</button>
    </div>
    <div class="datepicker"></div>
    <div id="events"></div>
    <button id="addItemButton">Add an item</button>
    <div id="addItemDialog"><input type="text" id="newItem"></div>
    <script src="../bower_components/jquery/jquery.min.js"></script>
    <script src="../bower_components/jquery-ui/ui/jquery-ui.js"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../bower_components/bootstrap3-dialog/js/bootstrap-dialog.js"></script>
    <script src="../bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="js/calendar.js"></script>
</body>
</html>

这是JS：

$(function () {
    "use strict";
    var url,
        year,
        month,
        zip,
        date,
        events = [],
        newItem;

    $("#addItemDialog").hide();

    $(".datepicker").datepicker({dateFormat: "yy-mm-dd"}).click(function(){
        $("#events").empty();
        date = $(".datepicker").datepicker("getDate");
        //console.dir(date.toISOString().substr(0, 10));
        $(events).each(function(i, event){
            //console.log(event);
            if(event.date.substr(0, 10) === date.toISOString().substr(0, 10)){
                console.log(event.title);
                $("#events").append("<h4 class='event'>" + event.title + "</h4>");
            }
        });
    });

    $("#getEvents").on("click", function () {
        zip = $("#zip").val();
        if(isValidUSZip(zip)){
            zip = zip.substr(0, 5);
            getCalendar();
        }else{
            BootstrapDialog.show({
                message: "You must enter a valid zip code!",
                buttons: [{label:"OK", action: function(dialog){dialog.close();}}],
                draggable: true
            });
        }
    });

    function isValidUSZip(sZip) {
        return /^[0-9]{5}(?:-[0-9]{4})?$/.test(sZip);
    }




    function getCalendar() {
        $.ajax({
            type: "GET",
            url: "http://www.hebcal.com/hebcal/?v=1&cfg=json&nh=on&nx=on&year=now&month=x&ss=on&mf=on&c=on&zip=" + zip +"&m=72&s=on",
            success: function (data) {
                console.dir(data);
                $(data.items).each(function(index, item){
                    //console.dir(item.date.substr(0, 10));
                    events.push(item);
                });
            }
        });
    }

    $("#addItemButton").on("click", function(){
        BootstrapDialog.show({
            message: $("#newItem"),
            buttons: [{
                label: "Enter",
                action: function(dialog){
                    newItem = $("#newItem").val();
                    events.push({date: new Date(date).toISOString(), title: newItem});
                    dialog.close();
                }
            }]
        });
    });

});

Answer 1

我花了一些时间做这个小提琴，显然一切都很好：

我暂时怀疑这条线，但仍然没有注释是正确的：

$(function () {
//"use strict";
var url,
    year,
    month,
    zip,
    date,
    events = [],
    newItem;

http://jsfiddle.net/r2FyC/3/

带输入元素的对话框

1 个答案: