2017-06-18 1 views
0

は、私は、次の2つの機能を持っている:filterbuttonsgetTableData.ブートストラップのドロップダウンが表示されていないときにイベントを挿入するにはどうすればよいですか?

最初の関数は、呼び出しがまたはテーブル行に表示されてはならないはずです対抗するかどうかを決定します。 2番目の関数は、データベースから取得した情報に基づいてテーブルデータを作成します。

function filterButtons(status) { 
    $append = ""; 
    if (status == "PENDING") { 
     $append = "<td class='dropdown'><a id='call' class='btn btn-primary actionButton' data-toggle='dropdown'> Call to Counter </a><a class='btn btn-danger cancelbtn' > Cancel </a></td>"; 
    } else if (status== "SERVING") { 
     $append = "<td><a class='btn btn-danger cancelbtn' > Cancel </a><a class='btn btn-success donebtn'>Done</a></td>"; 
    } 
     return $append; 
    } 

    function getTableData() { 
     $.ajax({ 
      url: 'inc/php/fetch_data.php', 
      type: 'POST', 
      async: false, 
      data: 'data=gettabledata', 
      datatype: "text", 
      success: function (data) { 
       console.log(1); 
       $('.table-hover tbody').empty(); //refresh the table data 
       dataArray = JSON.parse(data);   //covert data from server to js array 
       $.each(dataArray, function (key, value) { 
        $('.table-hover tbody').append("<tr><td>" + value[0] + "</td><td><font size='3px'>" + value[1] + "</font></td><td><font size='3px'><b>" + value[2] + "</b></font></td><td><font size='3px'>" + value[3] + "</font></td><td><font size='3px'>" + value[4] + "</font></td><td><font size='3px'>"+value[5]+"</font></td>"+filterButtons(value[2])+"</tr>"); 
       }); 

       $(".actionButton").click(function() { 
        //move dropdown menu 
        $(this).after($dropdown); 

        // clearInterval(counter); 
        // clearInterval(table); 
        // $(".actionButton").click(function(){ 
        //  table = setInterval(getTableData,150); 
        // }); 
       }); 

       $(".dropdown").on('hide.bs.dropdown', function(){ 
         console.log("hide method called"); 
        }); 


       $(".cancelbtn").click(function(){ 
        var id = $(this).closest("tr").children().first().html(); 
        if(confirm("Are you sure you want to cancel the transaction?")){ 


         $.ajax({ 
          url: 'inc/php/fetch_data.php', 
          type:'POST', 
          async: false, 
          data:'data=canceltrans&id='+id, 
          datatype:'text', 
          success: function(data){ 
           if(data=="1"){ 
            console.log("Cancel Successful!"); 
           } 
          } 
         }); 
        } 
       }); 

       $(".donebtn").click(function(){ 
        var id = $(this).closest("tr").children().first().html(); 

        $.ajax({ 
         url: 'inc/php/fetch_data.php', 
         type: 'POST', 
         async: false, 
         data: 'data=completetrans&id='+id, 
         datatype:'text', 
         success: function(data){ 
          if (data=="1"){ 
           console.log("Transaction Completed"); 
           location.reload(); 
          } 
         } 
        }); 
       }); 
      } 
     }); 

     $.ajax({ 
      url:'inc/php/fetch_data.php', 
      type: "POST", 
      async: false, 
      data: "data=getavailcounter", 
      datatype: "text", 
      success: function (data){ 
       $dropdown.empty(); 
       dataArray = JSON.parse(data); 
       $dropdown.append('<li><a class="Label">Select Counter:</a></li>'); 
       $.each(dataArray, function (key,value){ 
        $dropdown.append('<li><a class="counterLink" role="menu">'+value+'</a></li>'); 
       }); 

       //CODE FOR CLICK FUNCTION on select counter from dropdown 
       $(".counterLink").click(function(){ 
        console.log("Counter CLicked!"); 
        table = setInterval(getTableData,150); 
        var counter = $(this).html(); 
        var id = $(this).closest("tr").children().first().html(); 
        $.ajax({ 
         url: 'inc/php/fetch_data.php', 
         type: 'POST', 
         async: false, 
         data: "data=calltrans&id="+id+"&counter="+counter, 
         datatype:"text", 
         success: function (data){ 
          if(data=="1"){ 
           console.log("Call Successful!"); 
          } 
          else{ 
           console.log("Unsuccessful!"); 
          } 
          location.reload(); 
         } 

        }); 
       }); 
      } 
     }); 
    } 

私はこれを行う方法でオンラインいくつかの情報を読んでいると私は、ドロップダウンが閉じられたときに実行する機能を置くために、次のコードを得た:

$(".dropdown").on('hide.bs.dropdown', function(){ 
    console.log("hide method called"); 
}); 

私はそのコードを追加しましたドロップダウンのボタンのクリック機能の直後にある関数getTableData。私はそれを試したとき、私のコードのその部分に到達してはならないので、何も私のコンソール上に現れません。誰でも私に教えてもらえますか?

答えて

0

ごめんなさい。私はそれがブートストラップのインポートに関する問題であることに気付きました。

+0

これは、次回の「回答」ではなく「コメント」として配置してください。 – eeya

関連する問題