ブートストラップモデルのテキストボックスに値としてJavaスクリプト変数をロードする方法


13

ブートストラップモデルの入力ボックスへのJavaScript変数の読み込みに問題があります。

setTimeout(function() {
  swal({
      title: "OverTime Status!",
      text: "You Need to get Sub OT Approval " + data.value + " Hours to Time allocate in the department",
      type: "warning",
      confirmButtonText: "OK"
    },
    function(isConfirm) {
      if (isConfirm) {

        $('#hours_work').val(data.value); //data.value alert the correct value in here.but this value not load in to the bootstrap model text box 
        $('#overtime_requset').modal('show');
        clear_field();
      }
    });
}, 1);
<div class="modal" id="overtime_requset">
  <div class="modal-dialog ">
    <form id="overtime_requset_form">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Sub OT Request</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          <div class="form-group">
            <div class="input-daterange">
              <input type="text" name="from_date" id="from_date" class="form-control" value="<?php echo $_GET[" month "]; ?>" readonly />
              <span id="error_from_date" class="text-danger"></span>
              <span id="error_future_from_date" class="text-danger text-center"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="text-info">Tolal Number Of Employee <?php echo get_total_employee_count($connect,$_SESSION["dept_Id"])?></br>
            <label>Add the addition number of OT hours requried</lable>
            <input type="text" name="hours_work" id="hours_work"  class="form-control" value=""/>
            <label class="text-secondary">Approved OT hours :   <?php echo GetApprovedOt($connect,$_SESSION["dept_Id"],$currentMonth)?></br></label><br>
            <label class="text-secondary">Pendding OT hours :  <?php echo GetPendingOt($connect,$_SESSION["dept_Id"],$currentMonth)?></label>
          </div>
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" name="get_approval" id="get_approval" class="btn btn-info btn-sm">Get Approval</button>
          <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
        </div>

      </div>
    </form>
  </div>
</div>

data.valueは、ここで正しい値を警告します。ただし、この値はブートストラップモデルのテキストボックスに読み込まれません。私の間違いは何ですか?どうすれば修正できますか?(唯一の問題は、JavaScript値を渡してテキストフィールドの内側にロードしないことです。HTMLとしてdivタグに出力できます)

cdn sweetAlert boostrapに従って使用した更新

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.css" />

setText()関数を試してください
Ahamed Safnaj

仕事仲間ではない.i問題は別のことだと思う
コードクリス

あなたはJSファイルをリンクしていないと思います。アラート機能を書いて、あなたが...それをリンクされている作る
Ahamed Safnaj

alert(data.value); 正しい値を表示
Code Kris

1
私は最新のcdn 'sweetalert'を使用しています
コードクリス

回答:


5

あなたの投稿されたコードは少し不足していて、いくつかのエラーがあります、とにかく私はあなたの問題を再現しようとしました、そして私はそれが機能しているかもしれないと思う 以下のjsfiddleスニペットを見て、コードに実装して機能させることができるかどうかを確認してください。

このリンクを最初に確認して くださいhttps : //jsfiddle.net/b1nary/je60gxv8/2/

SWEETALERTで更新: https ://jsfiddle.net/b1nary/je60gxv8/11/

setTimeout(function() {
    swal({
    title: "OverTime Status!",
    text: "You Need to get Sub OT Approval " + data_val + " Hours to Time allocate",
    type: "warning",
    showCancelButton: true,
    confirmButtonText: "Yes, do it",
    closeOnConfirm: false,
    html: false
  }, function(){
    swal("Deleted!",
    "Poof! Your number has been added to input box!",
    "success");
    $('#hours_work').val(data_val); 
    $('#overtime_requset').modal('show');
    //clear fields    
  });

}, 1000 );

私はbootstrapに甘いアラートを使用しましたが、sweetalertではありませんでした
コードクリス



アラートを取得するための2つのCDN
コードクリス

テキストボックスに値を読み込むことができれば、私はあなたの答えを正解として受け入れます。いずれにしても、貴重な貢献に感謝します
コードクリス

3

これを試して。function(isConfirm)問題だと思います。

then()関数を使用する必要があります

    swal({
      title: "OverTime Status!",
      text: "You Need to get Sub OT Approval " + data.value + " Hours to Time allocate in the department",
      type: "warning",
      showCancelButton: false
    }).then(function (result) {
        $('#hours_work').val(data.value);
        $('#overtime_requset').modal('show'); 
    });

この場合もモデルは機能しません
コードクリス

1

フォーム入力フィールドでは、のval()代わりに使用する必要がありますtext()

例: $('#hours_work').val(data.value);


ところで コードを確認しましたか?上記で投稿したコードで1つの二重引用符が欠落している(クラスの最後の引用符)場合、これが問題の原因である可能性があります。<input type="text" name="hours_work" id="hours_work" class="form-control value=""/>
CodyKL、

1

HTML構文を確認してください

古い

<input type="text" name="hours_work" id="hours_work"  class="form-control value=""/>

新着

<input type="text" name="hours_work" id="hours_work"  class="form-control" value=""/>

1つずつ確認して

$('#hours_work').val(data.value);
$('#hours_work').text(data.value);

すべてが仲間を試してください.itが機能しません.i問題が別の問題だと思います
コードクリス

$( '#hours_work')。val( 'xyz');と書くだけです。コンソールで、それが機能していることを確認するか、エラーを出します。
Arshad Shaikh

var textbox = document.getElementById( 'hours_work');で試してください。textbox.value = 'xyz';
Arshad Shaikh

1つのオプションも値を印刷しない
コードクリス

ちょっと、ブートストラップモーダルの下でこのjavascriptを書いてください
Arshad Shaikh

1

デリゲートを使用するだけで問題を解決できます。直接使用するのではなく、 $('#hours_work').val(data.value);親の屈折で試してください。本文などのドキュメントの。そう $('#hours_work',$('body')).val(data.value);

モーダルdivの親参照を使用できます。ボディの代わりにモーダルコードが配置されます。このdivの親div。

これは、動的にロードされた場合、DOMがモデル要素を認識しないためです。

うまくいったかどうか教えてください


1

この問題に直面し#hours_workているのは、まだDOMでレンダリングされていないフィールドに値を追加しようとしているためです。値を$('#overtime_requset').modal('show');割り当てた後にレンダリングし$('#hours_work').val(data.value);、入力フィールドはモデルの一部であるため、最初にモデルを追加してから、入力フィールドに値を割り当てます。

setTimeout(function() {
swal({
   title: "OverTime Status!",
   text: "You Need to get Sub OT Approval " + data.value + " Hours to Time 
  allocate in the department",
   type: "warning",
   confirmButtonText: "OK"
 },
 function(isConfirm) {
   if (isConfirm) {

    $('#overtime_requset').modal('show');
    $('#hours_work').val(data.value);
   }
 });
 }, 1);

それはそうではありません、私はそれを試します.itは機能しません
Code Kris

'clear_field()'関数が、割り当てた入力の値をクリアしていないことを確認してください。
Sarvesh Mahajan

@ nipun258、問題が解決した場合は、投票して回答にマークを付けられるかどうかを感謝します。ありがとう
Sarvesh Mahajan

問題はまだ発生しません。明確なフィールド機能が機能していると言います
コードクリス

1

私はあなたの要件に取り組み、私のために働いています、ローカルとして以下のコードを実行してください:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
setTimeout(function() {
    var myArray = {id1: 100, id2: 200};

     swal({
      title: "OverTime Status!",
      text: "You Need to get Sub OT Approval "+ myArray.id1+ "  Hours to Time allocate in the department",
      type: "warning",
      confirmButtonText: "OK"

    },
    function(isConfirm) {
      if (isConfirm) {

        $('#hours_work').val(myArray.id1); //data.value alert the correct value in here.but this value not load in to the bootstrap model text box 
        $('#overtime_requset').modal('show');

      }
      else{
          console.log("test");
      }
    });
}, 1);
 </script>


    <div class="modal" id="overtime_requset">
  <div class="modal-dialog ">
    <form id="overtime_requset_form">
      <div class="modal-content">


        <div class="modal-header">
          <h4 class="modal-title">Sub OT Request</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>


        <div class="modal-body">
          <div class="form-group">
            <div class="input-daterange">
              <input type="text" name="from_date" id="from_date" class="form-control" value="" readonly />
              <span id="error_from_date" class="text-danger"></span>
              <span id="error_future_from_date" class="text-danger text-center"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="text-info">Tolal Number Of Employee </br>
            <label>Add the addition number of OT hours requried</lable>
            <input type="text" name="hours_work" id="hours_work"  class="form-control" value=""/>
            <label class="text-secondary">Approved OT hours :   </br></label><br>
            <label class="text-secondary">Pendding OT hours :</label>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" name="get_approval" id="get_approval" class="btn btn-info btn-sm">Get Approval</button>
          <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
        </div>

      </div>
    </form>
  </div>
</div>

1
ありがとう姉妹。しかし、私はすでに私の問題を解決しました
Code Kris

@CodeKrisああ、いいね!:)
クリシュナサバニ

0

このJavaScriptをブートストラップモーダルで記述してください

<div class="modal" id="overtime_requset">
....
<script>
setTimeout(function () { 
           swal({
             title: "OverTime Status!",
             text: "You Need to get Sub OT Approval " + data.value + " Hours to Time allocate in the department",
             type: "warning",
             confirmButtonText: "OK"
            },
         function(isConfirm){
            if (isConfirm) {

               $('#hours_work').text(data.value);//data.value alert the correct value in here.but this value not load in to the bootstrap model text box 
               $('#overtime_requset').modal('show');
               clear_field();
              }
           }); }, 1);
</script>
</div>

0

dataJavaScriptオブジェクトとclear_field関数を定義し、JQueryおよびBootstrapライブラリを呼び出した場合。コードに問題はありません。

このJSFiddleページを確認してください:https ://jsfiddle.net/1x6t3ajp

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.