Debug School

rakesh kumar
rakesh kumar

Posted on

How to update data in popup modal using 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:write function inside x-data directive

   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

step3:include seprate blade file to open popup modal

 <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:open popup modal for modify or update

<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">Modify Task</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <template x-if="selectedTask">
                    <form @submit.prevent="submitForm">
                        <div>
                            <div class="mb-3">
                                <label for="taskDescription" class="form-label">Description</label>
                                <textarea id="taskDescription" class="form-control" x-model="description"></textarea>
                            </div>
                            <!-- Add more fields as needed for modification -->
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save changes</button>
                        </div>
                    </form>
                </template>
            </div>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

step5: specify some input variable and submit form in x-data

   tasks: {!! json_encode($users) !!},
    selectedTask: null,
    description: null,
Enter fullscreen mode Exit fullscreen mode 
   submitForm() {
        $wire.modifyTask(this.selectedTask.id, this.description)
            .then(() => {
                window.dispatchEvent(new CustomEvent("close-modal"));
            });
    },
Enter fullscreen mode Exit fullscreen mode

Image description

step6:write server side livewire function

   public function modifyTask($itemId,$describe)
    {

        log::info("modifyTask aa raha hain kya");  
        log::info($itemId); 
        log::info($describe);  

        DB::connection('payments')->table("task_status")->updateOrInsert(
            ['task_id' => $itemId],
                    [
                        'publisher_status' => "modify",
                        'status' => "todo",


                    ]
                );

                DB::connection('payments')->table("sharedatas")->updateOrInsert(
                    ['id' => $itemId],
                            [
                                'suggestion' => "describe",

                            ]
                        );
      return redirect()->route('influencer_work');
    }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)