要素が検査要素の後に表示されています

Question

AJAXを使用してグラフを作成し、ポップアップでバインドしています。グラフは正常に作成されますが、モーダルでは表示されませんが、Google ChromeとMozilla Firefoxの要素を調べると、グラフがモーダルに表示されます。 私のコードは、私がなぜこの出来事を理解していない

<div class="ibox-content"> 
    <div id="search_trens_graph" style="min-height: 100px;"> 
    <?php 
     if(!empty($trends)) { 
     foreach ($trends as $trend) { 
      $dates[] = $trend->month; 
      $num[] = $trend->trend; 
     } 
     } else { 
     $month = time(); 
     for ($i = 1; $i <= 12; $i++) { 
      $month = strtotime('last month', $month); 
      $months[] = date("M", $month); 
     } 

     $dates = array_reverse($months); 
     $num = array('50', '50', '50', '50', '50', '50', '50', '50', '50', '50', '50', '50') ; 
     } 
    ?>   
    <canvas id="lineChart" height="50" style="display:inline-block !important;"></canvas>  
    <script> 
     $(document).ready(function() { 
     var lineData = { 
      labels: <?php echo json_encode($dates); ?>, 
      datasets: [ 
      { 
       label: "Example dataset", 
       fillColor: "rgba(26,179,148,0.5)", 
       strokeColor: "rgba(26,179,148,0.7)", 
       pointColor: "rgba(26,179,148,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(26,179,148,1)", 
       data: <?php echo json_encode($num); ?> 
      } 
      ] 
     }; 

     var lineOptions = { 
      scaleShowGridLines: true, 
      scaleGridLineColor: "rgba(0,0,0,.05)", 
      scaleGridLineWidth: 1, 
      bezierCurve: true, 
      bezierCurveTension: 0.4, 
      pointDot: true, 
      pointDotRadius: 4, 
      pointDotStrokeWidth: 1, 
      pointHitDetectionRadius: 20, 
      datasetStroke: true, 
      datasetStrokeWidth: 2, 
      datasetFill: true, 
      responsive: true, 
     }; 

     var ctx = document.getElementById("lineChart").getContext("2d"); 
     // console.log(ctx); 
     var myNewChart = new Chart(ctx).Line(lineData, lineOptions); 
     c3.generate({ 
      bindto: '#gauge', 
      data:{ 
      columns: [ 
       ['data', 68] 
      ], 
      type: 'gauge' 
      }, 
      color:{ 
      pattern: ['#bd362f', '#f9f9f9'] 
      } 
     }); 
     }); 
    </script> 
    </div> 
</div> 

です。どのように私はこれを解決する。キャンバス用のインライン・ブロックの表示も設定しました。グラフを表示しない理由が表示されていた場合：none。それでも同じ問題に直面しています。

ありがとう

Answer 1

それはアヤックスが完了する前に、私はbeforeSend機能を使用する固定だ

$.ajax({ 
    type:'POST', 
    url:'your url', 
    data: 
    {your data}, 
    cache:true, 
    beforeSend:function(data){ 
     $("#keywordInfoModal .modal-body").html(ajaxloadbig); 
     $("#keywordInfoModal").modal('show'); 
    } 
    }).done(function(msg){ 
    $('#img_'+id).css('display','none'); 
    $("#search_count1_"+id).replaceWith(res.html); 
    $("#keywordInfoModal .modal-body").html(msg); 
    $("#keywordInfoModal").modal('show'); 
    })