'Laravel Modal Edit
Good morning. A real beginner question here. I am creating a simple form. I want to open a edit model window. I suspect my script is wrong. The reason I suspect the script is if I remove the "modal-normal" from the script the modal window opens. I am getting not errors and nothing in console. I just need the edit button to be modal. I am using something else for add and delete. Thank you for any help you can provide in advance.
The Edit Button:
<a data_category_id= "{{ $category->id }}"
data-category-name="{{ $category->name }}"
data-category-type="{{ $category->type }}"
data-category-color="{{ $category->color }}"
type="button" class="btn btn-alt-primary" data-bs-toggle="modal"
data-bs-target="#modal-normal">Edit</a>
The Modal Window:
<div class="modal" id="modal-normal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="block block-rounded shadow-none mb-0">
<div class="modal-body">
<form action="..." method="POST">
<div class="block-content fs-sm">
@csrf
@method('PUT')
<input type="hidden" id="id" name="id">
<input type="text" class="form-control" id="edit_category_name" name="edit_category_name" placeholder="Category Name">
<select class="form-select" id="edit_category_type" name="edit_category_type">
<option selected="">Category Type</option>
<option value="Product">Product</option>
</select>
<input type="text" class="form-control input-lg" value="#902100" id="edit_category_color" name="category_color">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
My Script
$('#modal-normal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget)
var edit_category_name = button.data('name')
var edit_category_type = button.data('type')
var edit_category_color = button.data('color')
var id = button.data('id')
var modal = $(this)
modal.find('.modal-title').text('Edit Category ');
modal.find('.modal-body #edit_category_name').val(name);
modal.find('.modal-body #edit_category_type').val(type);
modal.find('.modal-body #edit_category_color').val(color);
modal.find('.modal-body #id').val(id);
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
