0

誰かがJavaScriptコードの小さな部分で私を助けることができますか? 私は小さな webapp を開発しようとしていますが、モーダルから親ウィンドウへの単純な通信に問題があります:( jquery、bootstrap、bootstrap.datetimepicker、bootstrap.validator1000hz を使用しています。

「sendData」入力フィールドをパラメーターとして親ウィンドウから関数を呼び出す必要があるため、モーダルから「sendData」の値を取得する必要があります。ユーザーが必要な日付を入力するまで [送信] ボタンは正しく無効になっています (バリデータ プラグインのため)。前もって感謝します ！

これは私のモーダルです

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

1 に答える 1

0

モーダルでは、これを使用できます：

<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 で SendData 関数を定義します。

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呼び出しは次のとおりです。

$.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" );
  }
});

これは、クエリ パラメーターzipcode=97201を使用してサーバー/api/getWeather上のローカル スクリプトを呼び出し、要素 #weather-temp の html を返されたテキストに置き換えて、ページ上のユーザーにステータスを表示します。

php を使用している場合、ページのエコーは結果として送信されます。asp.net を使用している場合、Response.Write メソッドは結果を書き込み、それを返します。下の写真をご覧ください。 ここに画像の説明を入力

したがって、ajax call の data オブジェクトの 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/ をご覧ください。

于 2016-12-27T12:55:14.393 に答える