將bootstrap模式的數據傳回給他的父窗口

Question

有人可以幫我一小段javascript代碼？我試圖開發一個小的webapp，但我遇到了困難，從模態到他的父窗口:(我使用jquery，bootstrap，bootstrap.datetimepicker和bootstrap.validator1000hz進行簡單的通信。

我有以'sendData'輸入字段作爲參數調用父窗口的函數，所以我需要從模態中獲取'sendData'的值。 在用戶輸入所需日期（因爲Validator插件）之前，提交按鈕被正確禁用，但當我點擊它的模態消失最後不了了之打印到控制檯上。 提前感謝！

這是我的模態

<!-- Modal --> 

    <div id="modalPrint" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Seleziona intervallo di stampa</h4> 
     </div> 
     <div class="modal-body">  
      <form> 
      <div class="form-group"> 
       <div class="form-group"> 
         <label>Indicare la data d'invio</label> 
          <div class='input-group date col-sm-3' id='sendData' data-date-format="DD/MM/YYYY"> 
          <input type='text' class="form-control" required > 
          <span class="input-group-addon"> 
           <span class="glyphicon glyphicon-calendar"></span> 
          </span> 
          </div> 
          <div class="help-block with-errors"></div> 
        </div> 
       <button type="submit" id="print" class="btn btn-default btn-sm pull-right" data-dismiss="modal"> 
             <span class="glyphicon glyphicon-print"></span> 
             <span style="font-size:smaller;">Stampa</span> 
       </button> 
      </div> 
     </form> 

     <div class="modal-footer"> 

     </div> 
    </div> 
    </div> 
</div> 
<script> 
    $('#modalPrint').validator().on('submit', function() { 
     console.log('ok') 
    }); 
</script> 

Answer 1

在模式您可以使用此：

<button id="print" onclick="SendData('+yourData +')" class="btn btn-default btn-sm pull-right" data-dismiss="modal"> 
             <span class="glyphicon glyphicon-print"></span> 
             <span style="font-size:smaller;">Stampa</span> 
</button> 

然後在你的js定義送出數據功能是這樣的：

function SendData (_data){ 
var serialedjs = "..."; 
$.ajax({ 
       type: "POST", 
       url: 'page.aspx/YourWebMethodName', 
       data: serialedjs, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       beforeSend: function (msg) { 
        //close modal here 
        $("div.modal-body").append(
         '<img class="spinner" src="Content/ajax-loader.gif" />' 
        ); 
       }, 
       success: function (data) { 
       }, 
       complete: function (data) { 

       } 
      }); 
} 
} 

更新：

jQuery的AJAX是一個異步HTTP（阿賈克斯）請求。它會在您的頁面沒有啓動任何回發到服務器時發送數據。這裏是一個Ajax調用使用jQuery：

$.ajax({ 
    url: 'http://yourpage_url/yourpage.html', 
    data: { 
     'yourDataKey1': 'yourDataValue1', 
     'yourDataKey2': 'yourDataValue2', 
     'yourDataKey3': 'yourDataValue3' 
    }, 
    dataType: 'jsonp', 
    contentType: "application/json; charset=utf-8", 
    success: function(data) { 
    alert('finish'); 
    }, 
    type: 'GET' 
}); 

爲另一個〔實施例下面你可以看到：

$.ajax({ 
    url: "/api/getWeather", 
    data: { 
    zipcode: 97201 
    }, 
    success: function(result) { 
    $("#weather-temp").html("<strong>" + result + "</strong> degrees"); 
    } 
}); 

它調用本地腳本服務器/API /的GetWeather與查詢參數zipcode = 97201，並用返回的文本替換元素＃weather-temp的html，以在頁面上向用戶顯示狀態。

如果您使用php，頁面上的回顯將作爲結果發送，如果您使用asp.net，則Response.Write方法會將結果寫回給您。 請看下圖：

所以在ajax調用中的數據對象的url參數中，您將設置將處理您的請求的頁面的url。

因此，你需要在你的頁面的頂部添加此腳本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

，或者您也可以下載jQuery和把它放在你的項目文件的附近，參考他們：

<script src="/libs/jquery/3.1.1/jquery.min.js"></script> 

閱讀更多關於jquery ajax，請訪問：https://learn.jquery.com/ajax/key-concepts/