[Java Script]csvファイルのありなしで画像を出しわける

サーバー上の規定の場所にcsvファイルがあるかないかによって、画像を出しわけるJava Scriptのメモ。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.8/jquery.csv.min.js"></script>
<script>
$(window).on('load',function(){

  var randomNum = Math.random()*1000;
  var csvPath = 'csv/teideninfo.csv?d='+randomNum;
  var csvCheckTimer;
  var intervalTime = 10000;
  var dispBlackoutInfo_F;

  onCheckBlackoutInfo(csvPath);
  csvCheckTimer = setInterval(
    function(){
      onCheckBlackoutInfo(csvPath)
    },intervalTime
  );
  function onCheckBlackoutInfo(csvPath,sort_F){
   
    $.ajaxSetup({
        beforeSend : function(xhr) {
            xhr.overrideMimeType('text/csv;charset=Shift_JIS');
        }
    });
    
    $.ajax({
        type: 'GET',
        url: csvPath,
        dataType: 'text',
        cache: false
      }).done(function (results) {
         //csvファイルが取得できた時に表示するimg      
        document.getElementById('icon').innerHTML = '<img src="icon_a.jpg" alt="A">';
        onDispBlackoutInfo(results,sort_F);
      }).fail(function (jqXHR, textStatus, errorThrown) {
        //csvファイルが取得できなかった時に表示するimg
        document.getElementById('icon').innerHTML = '<img src="icon_b.jpg" alt="B">';
      });
  }

});
</script>

//html

<p id="icon">IMG</p>

//demo(これだけみてもわからんが）

CSVファイルあるなしで画像切り替え

ikuranet.com

元々は、「csvファイルが規定の場所にあるかないかで表示/非表示を切り替えるスクリプト」で

協力会社のエンジニアさんに書いてもらいました。

それをベースに青いところだけ改変して、

「csvファイルが規定の場所にあるかないかで画像を切り替えるスクリプト」にしました。

csvファイルがあるときはnewがついたアイコンをだし、

ファイルがない時はnewのないアイコンがでます。

参考にさせていただいたサイト：

【JavaScript】入門14. JavaScriptで文字や画像を表示する

【JavaScript】入門14. JavaScriptで文字や画像を表示する

入門14. JavaScriptで文字や画像を表示する。

www.webdlab.com