I am doing a download functionality by jquery and laravel.
I have an anchor tag in the loop.
<a href="#" name="cite" class="popover-trigger" data-placement="top" download data-target="#downloadModal" data-video-id="{{ Crypt::encrypt($video_list->id) }}">Cite</a>
This anchor tag is in loop and there are multiple anchor tag based on the loop.
below is the modal.
<div class="modal fade" id="downloadModal" tabindex="-1" role="dialog" aria-labelledby="downloadModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="downloadModalLabel">Download Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to download the BibTeX file?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="confirmDownload">Confirm Download</button>
</div>
</div>
</div>
</div>
By clicking on the anchor tag, related modal will be open and if I click on the button the only single file should be downloaded.
js is:
<script>
$(document).ready(function() {
var downloadInProgress = false;
var currentVideoId = null;
// Handle popover click to show modal
$('.popover-trigger').on('click', function(e) {
e.preventDefault();
var videoId = $(this).data('video-id');
currentVideoId = videoId;
$('#downloadModal').modal('show');
});
// Handle confirm download button click
$('#confirmDownload').on('click', function() {
// Check if a download is already in progress
if (downloadInProgress || currentVideoId === null) {
return;
}
// Set the download flag to true
downloadInProgress = true;
// Disable the Confirm Download button to prevent multiple clicks
$(this).prop('disabled', true);
// Make an AJAX request to your Laravel route
var videoId = currentVideoId;
var url = "{{ route('export.bibtex', ':videoId') }}";
url = url.replace(':videoId', videoId);
$.ajax({
url: url,
method: 'GET',
success: function(response) {
var filename = response.filename;
var content = response.content;
// Create a Blob with the response content
var blob = new Blob([content], { type: 'text/plain' });
// Create a link element and trigger a download
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = filename + '.bib';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
error: function(error) {
console.error('Error downloading BibTeX:', error);
},
complete: function() {
// Re-enable the Confirm Download button after the request is complete
$('#confirmDownload').prop('disabled', false);
// Set the download flag to false
downloadInProgress = false;
// Reset the currentVideoId variable
currentVideoId = null;
// Close the modal after download
$('#downloadModal').modal('hide');
}
});
});
// Handle modal close event to reset the download flag
$('#downloadModal').on('hidden.bs.modal', function() {
downloadInProgress = false;
});
});
</script>
My controller is:
public function export_bibtex($video_id)
{
$video_id = Crypt::decrypt($video_id);
$corr_authors = DB::table('coauthors')
->where('videoupload_id',$video_id)
->where('authortype_id','3') // 3 for corresponding author
->get();
foreach($corr_authors as $corr_authors_value)
{
$name = '';
$surname = '';
if(!empty($corr_authors_value->name))
{
$name = $corr_authors_value->name;
}
if(!empty($corr_authors_value->surname))
{
$surname = ' '.$corr_authors_value->surname;
}
$corr_author_array[] = $name.$surname;
$corresponding_author_data = implode(", ",$corr_author_array);
}
$video_details = single_video_details($video_id);
$rvoi_link = generate_rvoi_link($video_details->short_name,$video_details->historycurrentstatus_created_at,$video_details->unique_number);
$entries = [
[
'video_unique_id' => $video_details->unique_number,
'author' => $corresponding_author_data,
'title' => $video_details->video_title,
'journal' => 'ResearchVideos',
'year' => Carbon::parse($video_details->historycurrentstatus_created_at)->year,
'month' => Carbon::parse($video_details->historycurrentstatus_created_at)->format('F'),
'doi' => $rvoi_link
],
];
$bibtex = $this->convertToBibTeX($entries);
$filename = 'RV'.$video_details->unique_number;
$response = Response::make($bibtex);
$response = ['filename'=>$filename, 'content'=>$response->getContent()];
return response()->json($response);
}
After clicking on the modal button it downloads multiple same files. And in the inspector I checked multiple same ajax is calling at the same time.