Reputation: 1
I have a Laravel Blade template where I'm trying to open a modal window on button click using jQuery. However, the modal window is not opening as expected, and I'm facing difficulties in identifying the issue.
@foreach($uniqueCountries as $country)
<div class="country-block" id="{{ $country }}">
<h2>{{ $country }}</h2>
<div class="company-cards">
@php
$uniqueCompanies = $project->where('country', $country)->pluck('company')->unique();
@endphp
@foreach($uniqueCompanies as $companyIndex => $company)
<div class="card company-card" data-country="{{ $country }}" data-company="{{ $company }}">
<!-- Ваш код для компаній -->
<div class="card-body">
<h5 class="card-title">{{ $company }}</h5>
<p class="card-text">{{ $project->where('country', $country)->where('company', $company)->first()->city }}</p>
<button class="btn btn-secondary details-btn" data-index="{{ $companyIndex }}">Детальніше</button>
</div>
</div>
@endforeach
</div>
<hr>
<div class="vacancy-cards" id="{{ $country }}" style="display: none;">
@foreach($uniqueCompanies as $companyIndex => $company)
@php
$vacancies = $project->where('country', $country)->where('company', $company);
@endphp
@foreach($vacancies as $vacancyIndex => $vacancy)
<div class="card vacancy-card" style="margin: 10px; display: none;" data-index="{{ $companyIndex }}">
<!-- Ваш код для вакансій -->
<div class="card-body">
<h5 class="card-title">{{ $vacancy->vacancy }}</h5>
<p class="card-text">{{ $vacancy->job }}</p>
<button type="button" class="btn btn-primary details-btn" onclick="openPDFEditor('{{ $vacancy->id }}')">Створити PDF</button>
<div id="pdfEditorModal_{{ $vacancy->id }}" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); z-index: 9999; ">
<div style="display: flex; justify-content: space-between; align-items: center;">
<h3>Редактор PDF</h3>
<button type="button" onclick="closePDFEditor('{{ $vacancy->id }}')">✖</button>
</div>
<hr>
<div style="display: flex;" >
<div id="pdfPreview" style="margin-right: 20px; border: 1px solid #ccc; "></div>
<div>
<label for="name">Країна</label>
<input type="text" id="name" required>
<br>
<label for="email">Назва проекту\заводу</label>
<input type="email" id="email" required>
<br>
<button type="button" onclick="generateAndPreviewPDF()">Створити і Переглянути PDF</button>
<br> <br>
<button type="button" onclick="downloadPDF()">Завантажити PDF</button>
</div>
</div>
</div>
</div>
</div>
@endforeach
@endforeach
</div>
</div>
@endforeach
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Ховаємо всі блоки крім блоків країн
$('.country-block, .company-cards, .vacancy-card, .details-btn').hide();
$(document).on('click', '.country-card', function(){
var countryId = $(this).data('country');
// Ховаємо всі блоки крім блоків компаній в обраній країні
$('.country-block').hide();
$('#'+countryId).show();
// Ховаємо всі блоки крім блоків компаній
$('.company-cards').hide();
// Показуємо блок компаній в обраній країні
$('#'+countryId+' .company-cards').show();
// Ховаємо всі блоки вакансій та кнопок "Детальніше"
$('.details-btn').show();
});
$(document).on('click', '.details-btn', function(){
var index = $(this).data('index');
// Ховаємо всі блоки вакансій
$('.vacancy-card').hide();
// Показуємо вакансії для обраної компанії
$('.vacancy-card[data-index="'+index+'"]').show();
});
});
function openPDFEditor(vacancyId) {
document.getElementById('pdfEditorModal_' + vacancyId).style.display = 'block';
}
function closePDFEditor(vacancyId) {
document.getElementById('pdfEditorModal_' + vacancyId).style.display = 'none';
}
I've ensured that jQuery is properly included before my custom script, and I've checked the syntax for any errors. Despite these precautions, the modal window doesn't display.
Upvotes: 0
Views: 48