We Keep Coding

FullCalendar event ID - how to get it for deletion of events in with Laravel?

So, I'm working on a calendar app and I'm using Laravel and FullCalendar for this.
I want to be able to delete an event - once I click on the event in the calendar, a modal popup show up with a delete button. In order to delete the event, I must know its ID, but I can't get.
I can get it via JS selectors and display it as a text, but I can't figure out how to get it as a PHP variable so that I could use it in the action parameter of the form.
The reason why I'm doing this in the way I did it is: If I get all the events and "foreach" them into the "events" array of FullCalendar, my source code when the calendar renders would be a mess, full of events and their details. By using this approach, I find that events are not displayed in the source and the page renders more quickly (but I might be mistaken).
The way I display events from the database is as follows:
EventsController
public function getEvents()
{
return Event::where('event_date', '>', '2022-01-01')
->join('hospitals', 'events.hospital_id', '=', 'hospitals.hospital_id')
->select('hospitals.hospital_color', 'hospitals.hospital_max_people', 'event_id', 'event_content', 'event_date', 'user_id')
->get()
->map(fn ($events) => [
'id' => $events->event_id,
'title' => $events->event_content,
'start' => $events->event_date,
'allDay' => true,
'editable' => false,
'backgroundColor' => $events->hospital_color,
'borderColor' => $events->hospital_color,
'hospital_max_people' => $events->hospital_max_people,
'volunteer' => User::find($events->user_id)->first_name .' '. User::find($events->user_id)->last_name
]);
}
Events blade template - FullCalendar settings:
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
editable: false,
droppable: true,
selectable: true,
initialView: 'dayGridWeek',
views: {
dayGridWeek: {
type: 'dayGridWeek',
duration: { weeks: 2 },
buttonText: '4 day'
}
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listMonth'
},
themeSystem: 'bootstrap5',
locale: 'en',
firstDay: '1',
contentHeight: 500,
height: 700,
expandRows: true,
events: 'getEvents',
eventClick: function(calendar, jsEvent, view) {
$('#eventDetail').modal("show");
$('#id').html(calendar.event.id);
$('#title').html(calendar.event.title);
$('#start').html(moment(calendar.event.start).format('DD.MM.YYYY'));
$('#volunteer').html(calendar.event.extendedProps.volunteer);
}
});
calendar.render();
});
</script>
Events blade template for showing modal:
<div class="modal fade" id="eventDetail" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="bar" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Event details</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Start: <p id="start"></p>
Volunteer: <p id="volunteer"></p>
Title: <p id="title"></p>
</div>
<div class="modal-footer">
<form method="POST" action="{{ route('calendar.destroy') }}" class="needs-validation" novalidate=""></p>
#csrf
#method('DELETE')
<div class="form-group">
<x-button tabindex="3">
{{ __('Delete event') }}
</x-button>
</div>
</form>
</div>
</div>
</div>
</div>

So, I did it in anoter way; just wanted to post the answer - I added a hidden input field: <input type="hidden" name="id" id="id" value=""> and the value is filled out when a modal opens with addition of this to the original id selector: $('#id').html(calendar.event.id).attr('value', calendar.event.id);
I also had to alter my delete route: Route::DELETE('calendar/destroy/{event_id}'
And that's it. Thank you anyway for your help

Bootstrap modal is sitting behind backdrop in Vue

When I try to add a modal in a component, the backdrop is coming to front and modal is behind it as below. I checked all the position css properties in the parent components. I found nowhere that used position: fixed, relative or absolute.
My code is as below,
<template>
<div
class="modal p-4"
id="confirmModal"
tabindex="-1"
data-bs-backdrop="static"
data-bs-keyboard="false"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered p-4 modal-xl">
<div class="modal-content p-4">
<div class="modal-body text-center">
<p class="my-5">No Images</p>
</div>
</div>
</div>
</div>
</template>
<script>
import bootstrap from "bootstrap/dist/js/bootstrap.min.js";
export default {
name: "ConfirmationDialog",
mounted() {
this.openViewer();
},
methods: {
openViewer() {
var myModal = new bootstrap.Modal(document.getElementById("confirmModal"), {
keyboard: false,
});
myModal.show();
},
},
};
</script>
Please, help me to solve this issue.

I found a solution.
Appending modal to body will solve the problem.
So, change the openViewer method as below,
openViewer() {
const modal = document.getElementById("confirmModal");
document.body.appendChild(modal);
var myModal = new bootstrap.Modal(modal, {
keyboard: false,
});
myModal.show();
},

jsTree plugin : button can't work when it was included in each item

I use a tree view plugin which can drag.
I need to add button for each item.
The modals should show up after click button,but it can't work property.
Here's my link:
http://www.sldesign.url.tw/JsTree/index.html

Well I didn't exactly get the root cause but as a work around what you can do is :
Attach on click handler to memberlist buttons :
$(function () {
// Init
$('#data').jstree({
'core': {
'multiple': false,
//"animation" : 0,
"check_callback": true,
//'force_text' : true,
'data': TestData
},
"plugins": ["contextmenu", "dnd", "state", "types", "wholerow"]
});
/*Attach Click function*/
setTimeout(() => {
$('.edit-member').each((index,el) => {
$(el).click(() => {
$('#exampleModal').show();
});
});
}, 1000);
/*Click function End*/
});
Secondly remove "fade" on the modal popup code
Change this
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
to this
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Bootstrap Modal keyboard & backdrop property issue for multiple modals

I've multiple modals but keyboard: false property not working in some cases:
First event open Types model:
$('.charts').click(function () {
$('#ModalVTypes').modal({ backdrop: 'static', keyboard: false, show: true });
});
Second event open Matrics or Chart modal and hide Types model:
$('.glist a').click(function () {
$('.modal').modal('hide');
if (Type == 1) {
$('#ModalMatrics').modal({ backdrop: 'static', keyboard: false, show: true });
} else {
$('#ModalChart').modal({ backdrop: 'static', keyboard: false, show: true });
}
});
If i've use single modal its working fine.
Thanks

Try to give in HTML div modal element like below
<div class="modal-open">
<div class="modal fade" id="ModalVTypes" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Test modal</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

Solution has been fond:
The issue with modal hide functionality.
$('.modal').modal('hide'); //Create issue because it'll reset all properties
Replaced this with following:
$('Model_ID').modal({ backdrop: 'static', keyboard: false, show: false});

To show Data in modal Pop up after click on Web Grid Column

My Data in Exception Column is very large and i decided to display the Action Link instead of Data and when User will click on that Link, modal Pop up will display the Data.I am able to show Model Pop up on the click of Action Link but my problem is that i am not able to show the Data corresponding to that Record in Modal Pop Up.
Below is my Javascript code for calling Modal PopUp
#model IList<ClaimBuildMVC.Models.ApplicationLog>
#{
Layout = "~/Views/Shared/_SuperAdminLayout.cshtml";
WebGrid grid = new WebGrid(Model, canSort: false, canPage: false, columnNames: new[] { "Logger", "User", "Date", "Message", "Exception", "ErrorID" });
}
<script type="text/javascript">
$(document).ready(function () {
$('#ErrorLog').DataTable({
"bSort": false,
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"sSearch": ""
}
});
$('.dataTables_filter input').attr("placeholder", "Search by Error details...");
$(".ActionEdit").click(function () {
$(".ActionEdit").removeAttr('href');
$(".ExceptionModal").modal();
});
});
</script>
And below is Web Grid to display Data
<div class="Content-inner-pages">
<div class="TopHeading TopHeading2">
<h2>Error Log</h2>
</div>
<div class="box">
<div class="box-content">
<div class="CustomerUsers">
<div class="box">
<div class="box-content Custom-DataTable">
#grid.GetHtml(
htmlAttributes: new { id = "ErrorLog" },
fillEmptyRows: false,
alternatingRowStyle: "alternate-row",
tableStyle: "table table-hover dt-responsive CustomDatable",
headerStyle: "grid-header",
footerStyle: "grid-footer",
mode: WebGridPagerModes.All, columns: new[] {
grid.Column("Logger",header: "Page", canSort:false),
grid.Column("User",header:"UserId",canSort:false),
grid.Column("Date",header: "CreatedDate",canSort:false),
grid.Column("Message",header: "ErrorMessage",canSort:false),
grid.Column(header: "Exception", format:(item) =>
new HtmlString(Html.ActionLink("Edit", "#", new { id =item.ErrorID }, new { #class = "ActionEdit"}).ToString()
))
})
</div>
<div class="modal fade ExceptionModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
//Here i want to Load Exception Column Data that will Display to End user
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Let me know where i am doing wrong or what should be the possible solution.

You have to do two steps for this
first store your current clicked td in a session or global variable like
$(".ActionEdit").click(function () {
$(".ActionEdit").removeAttr('href');
//storing your td in session
session["currentTdData"] = $(this);
$(".ExceptionModal").modal();
});
and then you have to fill your modal with your current td data on the bootstrap event of after loading modal popup
$('.ExceptionModal').on('shown.bs.modal', function() {
// here you can session["currentTdData"] data
})