帶輸入元素的對話框

-1

我想要一個帶有輸入的對話窗口。我可以使用默認的jQuery-ui，但我正在使用引導程序。但是，輸入只在第一次打開時出現，隨後任何時候打開對話框，輸入都會丟失。這將如何解決？下面是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(); 
       } 
      }] 
     }); 
    }); 

});

來源

2014-06-09 Ben

你可以製作工作演示嗎？ – GomatoX

當然，我該怎麼做？ – Ben

http://jsfiddle.net/ – GomatoX

我花了時間，使這個小提琴，aparently一切正常：

我懷疑這條線片刻，但仍然沒有注意到是正確的：

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

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

來源

2014-06-09 17:55:25 martinezjc

使用你的小提琴，問題依然存在。嘗試輸入一個新的項目，然後點擊一個新的日期並再次點擊「輸入項目」按鈕。對話框中沒有輸入框。 – Ben

帶輸入元素的對話框

回答

相關問題