Debug School

rakesh kumar
rakesh kumar

Posted on

how to display dynamic success msg in alpine js

step1: create a button

 <button class="btn btn-primary btn-sm  mr-2" :data-id="task.id" @click="selectTask(task.id)">modify</button>
Enter fullscreen mode Exit fullscreen mode

Image description

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();
    },
Enter fullscreen mode Exit fullscreen mode 
<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();
    },
}'>
Enter fullscreen mode Exit fullscreen mode

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();
    },
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Image description

Top comments (0)