Level 75
That's a bunch of code, I would just suggest working with a smaller form at first just to practice working with a modal until you get the problems worked out.
That's only a suggestion.
Feb 18, 2021
6
Level 6
Laravel 8 - Livewire: When you type in text field the modal will close and hang-up..
Hi guys, when I applied wire:model="" on my input fields the modal will close automatically or hang-up when you type something in input field.
Note: I only use one page CRUD
These are my codes:
branch.blade.php
<div>
<!-- page content -->
<div class="row">
<div class="col-md-12 col-sm-12 ">
<div class="dashboard_graph">
<div class="row x_title">
<div class="col-md-6">
<h3>Branch Information</h3>
</div>
</div>
<div class="row">
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary ml-3" data-toggle="modal" data-target="#branchModal" data-backdrop="static" data-keyboard="false">
<i class="fa fa-add"></i>  Add Branch Information
</button> -->
<button type="button" class="btn btn-primary ml-3" data-toggle="modal" data-target="#exampleModal" >
<i class="fa fa-add"></i>  Add Branch Information
</button>
<div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<div id="branch_table" class="display">
<div class="row">
<div class="col-sm-12">
<table id="about" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed" cellspacing="0" width="100%" role="grid" aria-describedby="datatable-responsive_info" style="width: 100%;">
<thead class="text-center align-middle">
<tr role="row">
<th>Branch Image</th>
<th>Branch Name</th>
<th>Branch Manager</th>
<th>Contact No</th>
<th>Post</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($branches as $branch)
<tr>
<td>
@if (!empty($branch->branch_image))
<img width="100px" src="{{url('storage/images/'.$branch->branch_image)}}">
@else
No Branch Image Available
@endif
</td>
<td>{{$branch->branch_name}}</td>
<td>{{$branch->branch_manager}}</td>
<td>{{$branch->branch_contact_no}}</td>
<td class="text-center align-middle">
<button class="btn btn-info m-1 " title="Post"><i class="glyphicon glyphicon-upload" small></i></button>
<button class="btn btn-info m-1 " title="Unpost" ><i class="glyphicon glyphicon-download" small></i></button>
</td>
<td class="text-center align-middle">
<div class="btn-group">
<a href="" class="btn btn-info m-1" title="Edit"><i class="glyphicon glyphicon-pencil" small></i></a>
<form action="" method="POST">
<button class="btn btn-danger delete-header m-1" title="Delete"><i class="glyphicon glyphicon-trash" small></i></button>
</form>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--end sa table row--->
</div>
</div>
</div>
</div>
<!-- /page content -->
<!-- The Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Branch Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="branch_profile" class="col-form-label">Branch Name:</label>
<input type="text" wire:model="branch_profile" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="branch_name" class="col-form-label">Branch Name:</label>
<input type="text" wire:model="branch_name" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="address" class="col-form-label">Branch Address:</label>
<input type="text" wire:model="address" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="branch_contact_no" class="col-form-label">Branch Contact No:</label>
<input type="text" wire:model="branch_contact_no" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="branch_email" class="col-form-label">Branch Email:</label>
<input type="text" wire:model="branch_email" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="branch_manager" class="col-form-label">Branch Manager:</label>
<input type="text" wire:model="branch_manager" class="form-control" id="recipient-name">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<script>
// $(document).ready( function () {
// $('#branch_table').DataTable();
// } );
// </script>
and branch.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithFileUploads;
use App\Models\Branches;
class Branch extends Component
{
use WithFileUploads;
public $branch_profile, $branch_name, $address, $branch_contact_no, $branch_email, $branch_manager;
public function render()
{
$branches = Branches::get()->all();
return view('livewire.branch',['branches'=>$branches]);
}
public function SaveBranch(){
$this->validate([
'branch_profile' => 'image|max:1024', // 1MB Max
'branch_name' => 'required',
'address' => 'required',
'branch_contact_no' => 'required',
'branch_email' => 'required',
'branch_manager' => 'required',
]);
$data = [
'branch_profile' => $this->branch_profile,
'branch_name' => $this->branch_name,
'address' => $this->address,
'branch_contact_no' => $this->branch_contact_no,
'branch_email' => $this->branch_email,
'branch_manager' => $this->branch_manager,
];
if(empty($this->branch_profile)){
$this->branch_profile->store('images','public');
}
if($this->brachId){
Branches::find($this->branchId)->update($data);
}else {
Branches::create($data);
}
}
}
Level 104
You can use the defer modifier on the wire:model directives to store up the changes until you need to submit the form; this will prevent the re-render which causes the modal to close, e.g.
<input type="text" wire:model.defer="branch_profile" class="form-control" id="recipient-name">
https://laravel-livewire.com/docs/2.x/properties#deferred-updating
Now, whenever the form is submitted, the modal will close, but this may not be desirable (e.g. validation failure), so I would consider using a Livewire property to set the modal open/close state also.
Additionally, I would consider splitting the table and the form into separate Livewire components, for easier maintenance.
And lastly, you can use an Eloquent model as a property on the form component which displays the modal; then you can bind directly to the model's properties
2 likes
Level 6
Thanks for the help sir... I will split the table and modal if the module has many inputs but for small components I will just use one page :)
Level 6
by the way does defer also work in file upload?
Level 1
@tykus tanks a lot It works for me
Level 1
Unfortunately there isn't any offical way to fix that issue for now, you can use JS to fix it as i have done it
if this does not work you can use use emit on updatedFileName(){//OR CustomFuction $this->emit("PreventModalClose") //File Upload Code }
//JS Code
window.livewire.on('PreventModalClose', () => { //Option 1 init();//Reinitialize Things $("#modalID").addClass("active"); //i'm using cutom modal here you can do that or you can use Option 2
//Option 2
$("#modalID").addClass("show");
var html = "<div class='offcanvas-backdrop fade show custom-backdrop' ></div>";
if( $('.offcanvas-backdrop').length <= 0)
{
$(html).insertAfter("#modalID");
$("#modalID").attr('aria-modal',true);
$("#modalID").attr('role','dialog');
}
})
Please or to participate in this conversation.