ファイルを検索してhrefに表示してダウンロードします

Question

ディレクトリ内のファイルを検索するためにJqueryとPHPを使用しています。存在する場合は、< a>ダウンロード機能付きタグで表示してください。

ほとんどの場合、コードが機能します。しかし、リンクが複数回表示されるというエラーが発生しています。 JavaScriptのを皮切り

：

$('#submitSearch').on('click', function() 
{ 
    var voyage = $('#voyageText').val(); 
    $.post('searchVoyages.php', {voyage:voyage}, function(data) 
    { 
    var obj = JSON.parse(data); 
    $('#voyageBody').empty(); 
    var htmlToInsert = obj.map(function (item) 
    { 
     return '<tr><td><a href="#" class="voyageFileCall" data-filevoyage="'+item.voyage+'">'+item.voyage+'</a> 
     <td>'+item.export_import+'</td></tr>'; 
    }); 
    $('#voyageBody').html(htmlToInsert);  

    // The user submits a search, and the data is returned and displayed 
    // in a datatable. (image below) The next part is where the user clicks 
    // the link to open a modal window that display a download link 

    $('.voyageFileCall').on('click', function(e) 
    { 
     e.preventDefault(); 
     var filevoyage = $(this).attr('data-filevoyage'); 
     $.post('fileDownload.php', {filevoyage:filevoyage}, function(data) 
     { 
     $('.filelink').empty(); 
     var htmlToInsert = obj.map(function (item) 
     { 
      return '<a href="'+data+'" download>"'+data+'"</a>'; 
     }); 
     $('.filelink').html(htmlToInsert); 
     }); 

     $('#downloadFileModal').modal('show'); 
    }); // end voyageFileCall click 
    }); // end searchVoyage post 
}); // end submitSearch click 

データテーブルが表示された後、（リンクあり）最初の列をクリックすると、属性を取ると呼ばれるプロセスに投稿.voyageFileCallと呼ばれるクラスを、持っていますfileDownload.php。私は、変数$ finalLinkを返すてるときに、何らかの理由で、それはデータが返されますどのくらいの回数と同じ数のリンクが表示されます

<?php 
if(isset($_POST['filevoyage'])) 
{ 
    $voyage = $_POST['filevoyage']; 
    $dir = scandir("backup/"); 
    unset($dir[0], $dir[1]); 

    if(count($dir) > 0) 
    { 
    $fileFound = false; 
    foreach($dir as $file) 
    { 
     if((preg_match("/\b$voyage\b/", $file) === 1)) 
     { 
     $finalLink = 'backup/'.$file; 
     echo $finalLink; // I think the problem is in this loop 
     $fileFound = true; 
     } 
    } 
    if(!$fileFound) die("File $voyage doesn't exist"); 
    } 
    else 
    { 
    echo "No files in backup folder"; 
    } 
} 
?> 

：ここ

はfileDownload.phpは、次のようになりますデータテーブル内にある。

しかし、彼らはリンクをクリックして、ウィンドウが開いたときに、これは、彼らが見たものである。

：

コンソールでは、私はこれを参照します

モーダルウィンドウは、リンクをクリックするだけで開くことができます。 dディレクトリからファイルをダウンロードします。しかし、最初の検索から返されたデータ量の何倍も同じリンクを表示しているようです。

この場合、最初の検索で7レコードが返されました。ユーザーがリンクの1つをクリックすると、モーダルは同じファイル名の7つのリンクで開きます。それぞれをクリックするとファイルがダウンロードされます。しかし、私は1つのリンクを表示したいだけです。

私のコードを修正するのを手伝ってください。私はそれがPHPプロセスのforeachループと関係があることを知っています。私はそれをどのように修正するか分かりません。

ありがとうございます。

Answer 1

あなたの$ _POST ['filevoyage']値に合ったコレスポンデントファイルが見つかると、foreachの下でスクリプトを書き留めてください。

<?php 
if(isset($_POST['filevoyage'])) 
{ 
    $voyage = $_POST['filevoyage']; 
    $dir = scandir("backup/"); 
    unset($dir[0], $dir[1]); 

    if(count($dir) > 0) 
    { 
    $fileFound = false; 
    foreach($dir as $file) 
    { 
     if((preg_match("/\b$voyage\b/", $file) === 1)) 
     { 
     $finalLink = 'backup/'.$file; 
     echo $finalLink; // I think the problem is in this loop 
     $fileFound = true; 
     break; # *** break here *** 
     } 
    } 
    if(!$fileFound) die("File $voyage doesn't exist"); 
    } 
    else 
    { 
    echo "No files in backup folder"; 
    } 
} 
?> 

JS部： JSもご覧ください。私のスクリプトに追加された名前空間イベントを$('#submitSearch')と$('.voyageFileCall')に「クリック」し、event.stopImmediatePropagation()をevent.preventDefault()の近くに追加します。 「e」または「event」（読者の好みに基づいて）を「jquery on click」の呼び出された関数に渡します。

$(document) 
.off('click.submitSearch') 
.off('click.voyageFileCall') 
.on('click.submitSearch', '#submitSearch', function (e) { 
    e.preventDefault(); 
    e.stopImmediatePropagation(); 
    var voyage = $('#voyageText').val(); 
    $.post('searchVoyages.php', {voyage: voyage}, function (data) { 
     var obj = JSON.parse(data); 
     $('#voyageBody').empty(); 
     var htmlToInsert = obj.map(function (item) { 
      return '<tr><td><a href="#" class="voyageFileCall" data-filevoyage="' + item.voyage + '">' + item.voyage + '</a><td>' + item.export_import + '</td></tr>'; 
     }); 
     $('#voyageBody').html(htmlToInsert); 

     // The user submits a search, and the data is returned and displayed 
     // in a datatable. (image below) The next part is where the user clicks 
     // the link to open a modal window that display a download link 
    }) 
}) 
.on('click.voyageFileCall', '.voyageFileCall', function (e) { 
    e.preventDefault(); 
    e.stopImmediatePropagation(); 
    var filevoyage = $(this).attr('data-filevoyage'); 
    $.post('fileDownload.php', {filevoyage: filevoyage}, function (data) { 
     $('.filelink').empty(); 
     var htmlToInsert = '<a href="' + data + '" download>"' + data + '"</a>'; 
     $('.filelink').html(htmlToInsert); 
    }); 

    $('#downloadFileModal').modal('show'); 
}); 

これが役に立ちます。