2016-12-13 9 views
1

DataTableに問題がありますが、 'fnDrawCallback'が発生したため(テーブルが正常に表示されるため)正常に作成されたようですが、テーブルの作成は実行されません。そして、後でonClick、データテーブルの変数にアクセスすると、(元々設定されていたように)まだ "null"です。それはnullであるため、チェックボックスの値とjavascriptのエラーにアクセスできません( "nullの" fnGetNodesプロパティを読み取れません)。DataTableでjavascriptの実行が停止する - コンソールでエラーが発生しない

ここDataTableの源です:

<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.10.5/jquery.dataTables.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.10.5/css/jquery.dataTables.css"> 

は、このボタンは、ドキュメントレディ機能にクリック機能を起動:

<a href="javascript:void(0);" id="blast" class="btn btn-lg btn-success">Send selected cranes in an Email Blast</a> 

...と、これはチェックボックスとテーブルのヘッダを作成...

<table class="table" id="active_cranes_id" data-type="crane"> 
    <thead> 
     <tr><th class="nosort actions">Select</th><th>Make</th><th>Model</th><th>Unit</th><th>Hits</th></tr> 
    </thead> 

...このJavaScriptを挿入すると表が表示され、 - のdataTableを作成するときに、何かが起こるのjavascriptがこれ以上のコードの実行を停止させる

[{"DT_RowId":"218686","DT_RowClass":"alert-success","0":"<input type=\"checkbox\" checked> Select","1":"Grove","2":"GMK6300L","3":null,"4":"101"}] 

だから、基本的な問題:ここに...

<script type="text/javascript"> 
    alert("script is executing");//this hits on page load 
    active_cranes_table = null; 
    $(document).ready(function(){ 
     alert('defining blast-onClick function');//this hits 
     $("#blast").click(function() { 
      $("#blast").attr("disabled", "disabled"); 
      var equipments_selected = new Array(); 
      alert("active_cranes_table: "+active_cranes_table);//active_cranes_table=null ... next line blows up... 
      $(active_cranes_table.fnGetNodes()).find("input[type='checkbox']:checked").each(function(index) { 
       alert('index: '+index); 
       equipments_selected.push($(this).closest('tr').attr('id')); 
      }); 
      $("#blast").removeAttr("disabled"); 
      //doesn't hit, error was thrown above because datatable was null 
      alert('leaving blast-click function'); 
     }); 

     //this executes after the page has rendered and creates the table (unsuccessfully?) 
     $.fn.dataTable.ext.errMode = 'alert';//i've tried using "none" as well 
     active_cranes_table = $('#active_cranes_id') 
      .on('error.dt', function (e, settings, techNote, message) { 
       console.log('DataTable error: ', message); 
      }) 
      .dataTable({ 
       "fnDrawCallback": function(){alert('table finished drawing');},//this gets hit 
       "aaData": <?php echo $active_cranes_json;?>, 
       "bStateSave": true, 
       "sDom": '<"top"plf>rt<"bottom"p>', 
       "bSortClasses":false, 
       "asStripeClasses": [], 
       "aoColumnDefs": [ 
        //{ "sClass": "test", "aTargets": [ "actions" ] }, 
        {"bSortable": false, "aTargets": [ "nosort" ] } 
       ] 
      });//THIS IS WHERE EVERYTHING STOPS, and the following alerts don't execute... 
     alert("datatable created");//DOESNT GET HIT 
     alert("datatable var: "+active_cranes_table);//DOESNT GET HIT 
    }); 
    alert('outside document-ready-function');//this hits before anything in document-ready-function 
</script> 

をonclickのを処理し、するためには、入力JSONであります、データテーブルにはエラーが発生した場合にエラーを処理する "on-error-function"があり、コンソールにエラーは表示されず、テーブルは正常に表示され、ページソースのHTMLは何も表示されません。後続のアラートは実行されません。他に何を試していいのか分かりません。前もって感謝します。

+0

爆弾の直前に 'console.log(active_cranes_table.fnGetNodes())'を実行できますか? –

+0

devlin - それは、その時点ではnullだと言います。これは問題の症状で、.datatableはjavascriptに制御を戻さず、その後のアラートは決して起動しません。 – davpeterson

+0

データテーブル定義でテーブルIDをマングルすると、空のデータテーブルが正常に作成され、その後のアラートが発生しますちょうど良い。私はテーブル要素をどのように定義しているのでしょうか? – davpeterson

答えて

0

私は犯人が、それは他の場所でのJavaScriptファイルに追加されたこのブロックがわかった:(私は古いコードベースを引き継いだ)、それが追加された理由

$(document).on("draw.dt", ".dataTable", function() { 
    $('.selectpicker').selectpicker('render'); 
}); 

正確にわからないが、私はでした「selectpickerは関数ではない」というJavaScriptのアラートを見て、ブロックをコメントアウトすることにしました。そして、VOILAはデータテーブルを作成してその上で動作することができました。今では別のページに何か影響を与えないと期待しています...

関連する問題