step1: create a button
<button class="btn btn-primary btn-sm mr-2" :data-id="task.id" @click="selectTask(task.id)">modify</button>
step2: get dynamic id using java script
selectTask(taskId) {
this.selectedTask = this.tasks.find(task => task.id === taskId);
const modal = new bootstrap.Modal(document.getElementById("modifyModal"));
modal.show();
},
<div class="row" id="resultContainer" style="margin-top: 2%;" x-data='{
tasks: {!! json_encode($users) !!},
selectedTask: null,
init() {
console.log("Orders: ", this.tasks);
console.log("Orders length: ", Object.keys(this.tasks).length);
console.log("Tasks type:", typeof this.tasks);
console.log("Tasks:", this.tasks);
window.addEventListener("close-modal", () => {
const modal = new bootstrap.Modal(document.getElementById("modifyModal"));
modal.hide();
});
},
selectTask(taskId) {
this.selectedTask = this.tasks.find(task => task.id === taskId);
const modal = new bootstrap.Modal(document.getElementById("modifyModal"));
modal.show();
},
}'>
Note
we can do more thing on js or jquery
selectTask(taskId) {
this.selectedTask = this.tasks.find(task => task.id === taskId);
const modal = new bootstrap.Modal(document.getElementById("modifyModal"));
// Update modal title
const modalTitle = document.getElementById("modifyModalLabel");
modalTitle.textContent = `Modify Task: ${this.selectedTask.name}`;
// Update modal body with task details and status
const taskDetails = document.getElementById("taskDetails");
taskDetails.textContent = `Details for ${this.selectedTask.name}: ${this.selectedTask.description}`;
const taskStatus = document.getElementById("taskStatus");
taskStatus.textContent = `Status: ${this.selectedTask.task_status}`;
modal.show();
},
step3:include modal
<div class="col-lg-12 col-md-12 col-sm-12 col-12">
<div class="col-md-12 col-lg-12">
<div class="card" style="padding: 27px;">
<h1>My Taskboard</h1>
<div id="resultContent" class="row">
@include('livewire.influencerdetail.modifymodal')
<template x-for="task in tasks" :key="task.id">
step4: display success msg
<div class="modal fade" id="modifyModal" tabindex="-1" aria-labelledby="modifyModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modifyModalLabel" x-text="'Modify Task: ' + selectedTask.user_name"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Your form or content goes here -->
<p class="modal-title" id="modifyModalLabel" x-text="'describe: ' + selectedTask.description"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" @click="modifyTask">Save changes</button>
</div>
</div>
</div>
</div>
Top comments (0)