I have category component with add button as below.
<button wire:click.prevent="addNew" class="btn btn-primary mb-2">Add</button>
.....
.....
<x-mymodal-component :iscreate="$iscreate"/>
with 'addNew' method, I dispatch event to javascript listener.
public function addNew(){
$this->dispatchBrowserEvent('show-category-modal');
}
In the listener event, I try to show modal that made as component.
window.addEventListener('show-category-modal', event => {
$('#category-form').modal('show');
});
Below is modal component with data that need to pass into.
<x-mymodal-component :iscreate="$iscreate"/>
Any advice or guidance on this would be greatly appreciated, Thanks.
#livewire('mymodal-component', ['iscreate'=>$iscreate])
//Receive:
public function mount($iscreate)
{
}
Related
I have a livewire form which I intent to submit to an external url. However, before submitting, I want to programmatically add some hidden inputs which the user should not be able to edit then finally submit the form:
<form action="some-external-url" wire:submit.prevent="processForm" method="post">
<x-inputs.text-input wire:model="amount" name="amount" />
<x-inputs.button title="Submit" />
</form>
Something similar to this jQuery code:
$('form').submit( function(ev){
ev.preventDefault();
//fetch and add some additional fields to the form
// finally submit the form
$(this).unbind('submit').submit()
});
How best can I achieve this using livewire. Please note that I dont intent to use guzzle to submit this form.
If you want in your component you can set the properties, you need and then in your mount method, you initialise the value for those properties.
see forms in livewire
class ComponentName extends Component
{
public $hidden_val;
public function mount()
{
$this->hidden_val = "my_hidden_val";
}
}
Then pass it with livewire
<input type="hidden" wire:model="hidden_val">
But I also think as #ClémentBaconnier and would suggest to pass to external link the data of form using Http Client provided by laravel in your controller or event within your livewire component.
Http::asForm()->post('some-external-url', ['form_data' => /*your form data*/]);
Follow it here
I have one Laravel Livewire model open as bellow code
public function confirmItemAdd()
{
$this->resetValidation();
$this->confirmingItemAdd = true;
}
and my model window code in blade is
<x-jet-dialog-modal wire:model="confirmingItemAdd">
I have one select2 in model and want to set value of select2 on variable name $s2v
After search I findout that
$('.select2').val(s2v).trigger('change');
how can I set value of select2 on load on model?
Thanks
You can trigger a browser event from the livewire component and listen for that event and change the select2 value accordingly (assuming the select2 part is wire:ignored).
public $s2v = 'Test value';
public function confirmItemAdd()
{
$this->resetValidation();
$this->confirmingItemAdd = true;
$this->dispatchBrowserEvent('change-select2', $this->s2v);
}
in your layout file or with the stack in layout file you can listen for this event and trigger the change for the select2 as below,
<script>
$(window).on('change-select2', (e) => {
$('.select2').val(e.detail).trigger('change');
});
</script>
Note e.detail is the $s2v value passed from the livewire component.
And what validation error is giving to you? you are reseting the validation error before the dispatchBrowserEvent...seem that even by JS you are changing the select2 value the property doesn't
EDITED
Ok, first a have a particular issue with select2 rendering after each refresh and find this solution. In the component a have this:
public function hydrate()
{
$this->emit('select2');
}
and in blade parent or script section
<script>
$(document).ready(function() {
window.initSelectCompanyDrop=()=>{
$('#selectCompany').select2({
placeholder: '{{ __('locale.Select a Company') }}',
allowClear: true});
}
initSelectCompanyDrop();
$('#selectCompany').on('change', function (e) {
livewire.emit('selectedCompanyItem', e.target.value)
});
window.livewire.on('select2',()=>{
initSelectCompanyDrop();
});
});
</script>
If your issue with error bag persist, so you have to look into the kind of validation you're doing. In other case, I define global $message for a validation message but only works for $this->validate. Once I need redefine the validation, using Validator::make I have to create a new var $message for that inside the method
I'm using livewire for a new project so I want my crud operation with modal, in that case, I want to use one modal who responsible for creating and updating like vuejs. I try to do like this but this not work
In my blade
<form class="form" wire:submit.prevent="$editMode ? update : store">
In my component
public $editMode = false;
public function store() {
$this->editMode = false;
// code here
}
public function update() {
$this->editMode = true;
// code here
}
Livewire version: 2.x,
Can I achieve this Or do I have to use two modal for this? Thanks in advance
Your Livewire attributes cannot parse PHP, so you need to echo it out using blade. This will then re-render the component with the new submit method when you update the $editMode property in your Livewire component.
<form class="form" wire:submit.prevent="{{ $editMode ? 'update' : 'store' }}">
<!-- The rest of the form -->
</form>
I'am using laravel livewire to delete records in two tables, the problem is the modal, the records are being deleted but the modal still shows.
the strange thing is that when I comment one of the lines of code to delete data, it works!
I'm using Bootstrap 4.1
this is my function:
public function delete($id)
{
DB::beginTransaction();
try
{
// If I comment on any of the following two lines (it doesn't matter what line it is), it works!
DetalleRamComputadora::where('fk_computadora', '=', $id)->delete();
Computadora::where('id', '=', $id)->delete();
DB::commit();
$this->emit('confirm'); // Close modal "confirm"
session()->flash('success', 'Registro eliminado con éxito');
} catch (\Throwable $th) {
DB::rollBack();
$this->emit('confirm'); // Close modal "confirm"
session()->flash('error', 'Ocurrió un error y no se almacenó el registro');
}
}
this is the script to close modal from livewire:
window.livewire.on('confirm', () => {
$('#delete_confirm').modal('hide');
});
help me please!!
I was able to solve the problem. Only I added this code in the div of the modal
**wire:ignore.self**
<div wire:ignore.self class="modal fade" id="delete_confirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
...
</div>
In your function delete, add a dispatch browser event
public function delete($id)
{
DB::beginTransaction();
try
{
/*...Your code ... */
$this->dispatchBrowserEvent('closeModal');
} catch (\Throwable $th) {
/*...Your code ... */
}
}
And in your app.blade.php, try adding this window event listener like so.
window.addEventListener('closeModal', event => {
$("#delete_confirm").modal('hide');
})
In that way, you will be able to close the modal by triggering the javascript from your frontend.
P.S.
There's a youtube video series for laravel livewire tutorial that actually uses Boostrap Modal for the CRUD functionality. You can watch it here!
https://www.youtube.com/watch?v=_DQi8TyA9hI
First of all, there's no way we can verify that #delete_confirm is actually the name of your modal. Secondly, check if the event confirm is being triggered.
window.livewire.on('confirm', () =>
{
alert('Yes, I have reached here');
});
If the event is being fired, then try the following:
window.livewire.on('confirm', () =>
{
$('.modal').modal('hide');
});
If this still does not work, force the modal to be destroyed completely:
window.livewire.on('confirm', () =>
{
$('.modal').modal('hide').data('bs.modal', null);
$('.modal').remove();
$('.modal-backdrop').remove();
$('body').removeClass('modal-open');
$('body').removeAttr('style');
});
I'm tired of fixing that problem also,but I got an idea that close that modal directly without any code of js and livewire,only in bootstrap itself. Here what I did:
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" wire:click.prevent="store()" data-bs-dismiss="modal">Add Students</button>
Adding wire:ignore.self on modal popup
<div wire:ignore.self class="" id="">
</div>
I'm writing a plugin that have some fields defined in backend settings.
One of that field is a partial that contain a button, that trigger an Ajax request thanks to the data-attribute API.
<button type="button" class="btn btn-danger" data-request="onReset">
My button
</button>
Where should I put the "onReset()" function ? I tried to put it in my Settings model, even tried to create a Settings controller (whereas not necessary to work with settings page), but I always get the following error :
Ajax handler 'onReset' was not found
I don't know what to do to be able to trigger that onReset() function, can somebody familiar with Laravel / OctoberCMS could point me the right direction ?
Thanks
Settings are rendered by the \System\Controllers\Settings so whatever you write will be handled by \System\Controllers\Settings Controller Class,
so we need to extend \System\Controllers\Settings and we can add dynamic
method there,
inside your plugin's boot method you need to write this extension code
I am renaming your onReset handler to onPrefixReset in this example to avoid any other conflicts.
public function boot() {
\System\Controllers\Settings::extend(function($model) {
$model->addDynamicMethod('onPrefixReset', function() {
\Flash::success('You did it!');
// OR
//return ['some data data'];
});
});
}
onPrefixReset : we are adding some Prefix here, so accidentally we are not overriding internal original methods.
now inside your _partial
<button type="button" class="btn btn-danger" data-request="onPrefixReset">
My button
</button>
so now this onPrefixReset ajax handler is defined in \System\Controllers\Settings as we did that dynamically ;) it will handle your request.
you can return any data from here and it will be received at back-end settings page.
In HTML forms if you have an onReset event, you can add your call inside there:
function updateForm()
{
$.each($('form').find(":input"), function(){
$.uniform.update($(this));
});
}
<form onReset="updateForm();">
In this link you can you can do your own ordering within a click event:
$(document).ready(function() {
$("input:reset").click(function() { /click event
this.form.reset();
window.alert($("input:text").val());
return false;
});
});