I have two distinct buttons that should trigger the opening of the modal ($('#create-ponto-atipico').modal('show');). Depending on which button is clicked, I need to pass a different value to an input field within the modal.
Additional Information:
I'm using Bootstrap 3.4, Laravel 7, and PHP 7.4 with Livewire 2.12. I'm available to provide further details if needed. I'm developing a project in PHP using the Laravel framework, where I'm using Livewire to compose my components. In a specific view of my application, I have a Livewire component that is called using the following code:
@livewire('create-ponto-atipico')
@livewireScripts
However, I'm having trouble passing a specific value to an input field within the Livewire modal before displaying it.
create-ponto-atipico.view
<div class="modal fade" id="create-ponto-atipico" tabindex="-1" aria-labelledby="create-ponto-atipico" aria-hidden="true"
wire:ignore.self>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form wire:submit.prevent="save">
{{-- TODO: PASSAR O TIPO DE INPUT PARA DENTRO DO CONTROLADOR --}}
<input type="text" id="tipo_entrada_modal" wire:model="tipo_entrada" hidden>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h5 class="modal-title fs-5" id="create-ponto-atipico">Selecionar data e horário</h5>
</div>
<div class="modal-body">
<div>
<fieldset>
<legend class="form-label ml-3">Data</legend>
<input type="text" class="form-control daterange" id="data_submissao"
wire:model.defer="data_submissao"
onchange="this.dispatchEvent(new InputEvent('input'))">
</fieldset>
@error('data_submissao')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="row mt-4">
<div class="col-md-4">
<fieldset>
<legend class="form-label ml-3">Manhã</legend>
<label for="entrada_manha" class="form-label">Entrada</label>
<input type="time" class="form-control" id="entrada_manha"
wire:model.defer="entrada_manha">
@error('entrada_manha')
<span class="text-danger">{{ $message }}</span>
@enderror
<label for="saida_manha" class="form-label">Saída</label>
<input type="time" class="form-control" id="saida_manha"
wire:model.defer="saida_manha">
@error('saida_manha')
<span class="text-danger">{{ $message }}</span>
@enderror
</fieldset>
</div>
<div class="col-md-4">
<fieldset>
<legend class="form-label ml-3">Tarde</legend>
<label for="entrada_tarde" class="form-label">Entrada</label>
<input type="time" class="form-control" id="entrada_tarde"
wire:model.defer="entrada_tarde">
@error('entrada_tarde')
<span class="text-danger">{{ $message }}</span>
@enderror
<label for="saida_tarde" class="form-label">Saída</label>
<input type="time" class="form-control" id="saida_tarde"
wire:model.defer="saida_tarde">
@error('saida_tarde')
<span class="text-danger">{{ $message }}</span>
@enderror
</fieldset>
</div>
<div class="col-md-4">
<fieldset>
<legend class="form-label ml-3">Noite</legend>
<label for="entrada_noite" class="form-label">Entrada</label>
<input type="time" class="form-control" id="entrada_noite"
wire:model.defer="entrada_noite">
@error('entrada_noite')
<span class="text-danger">{{ $message }}</span>
@enderror
<label for="saida_noite" class="form-label">Saída</label>
<input type="time" class="form-control" id="saida_noite"
wire:model.defer="saida_noite">
@error('saida_noite')
<span class="text-danger">{{ $message }}</span>
@enderror
</fieldset>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
<button type="submit" class="btn btn-primary">Submeter</button>
</div>
</form>
</div>
</div>
</div>
class CreatePontoAtipico extends Component
{
public $data_submissao = "";
public $entrada_manha = "";
public $saida_manha = "";
public $entrada_tarde = "";
public $saida_tarde = "";
public $entrada_noite = "";
public $saida_noite = "";
public $tipo_entrada = "";
public function render()
{
return view('livewire.create-ponto-atipico');
}
public function save()
{
$this->validate([
'data' => 'required',
]);
//return to dashboard view
$dia_hoje = Carbon::now();
$mes_hoje = $dia_hoje->month;
$ano_hoje = $dia_hoje->year;
return redirect()->to('/dashboard/' . $ano_hoje . '/' . $mes_hoje);
}
}
I have every other input field in the controller, besides the tipo_entrada.
- I tried using the Bootstrap show.bs.modal event to set the value of the input field before displaying the modal, but it didn't work.
- also tried setting the value of the input field before displaying the modal using JavaScript, but without success.
$('#create-ponto-atipico').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
var tipo = button.data('tipo');
var modal = $(this);
modal.find('.modal-body #tipo_entrada_modal').val(tipo);
});
- I tried to set the #tipo_entrada_modal with JS didn't worked aswell
$("#tipo_entrada_modal").prop('value', 'trabalho');
- I tried to Livewire.emit it aswell
window.livewire.emit('set:tipo_entrada', 'trabalho');
- I tried to update the hidden input with jquery
$('#tipo_entrada_modal').attr('value','trabalho');
The input inside the modal has the value 'trabalho', but when I submit the form, $tipo_entrada is null.
I hope someone can help me with this !
Okey I found a solution. Maybe I think I can better explain what I wanted to achieve, and how I achieved it. I've a blade view file wich contains two buttons to add working days or abscent days. At the beggining, clicking the buttons would submit a for with input's select from that view. Now, i want to add a modal to insert a custom working day or abscent day if none of the input in the view were select. I designed a livewire component for the modal, i could open the modal. My first trouble was stopping the modal from auto submiting. Achieved that with wire:model.defer. The second problem was : I couldn't distinguish wich button triggered the modal. I tried everything. Ended up with JS submiting it to the modal with a Livewire.emit() that would set the variable !