Is it possible to not live search but with a search button in Laravel Livewire?
My approach is to use Alpine together with Livewire.
But I don't get the search term injected into the $emit event :/
<div x-data="{ search: '' }">
<input type="text" placeholder="Search ..." x-model="search" />
<span x-text="search"></span>
<button wire:click="$emit('test', search )">Search</button>
</div>
O.K. ... its easy ^^
Just change $emit('test', search) to window.livewire.emit('test', search)
<div x-data="{ search: '' }">
<input type="text" placeholder="Search ..." x-model="search" />
<span x-text="search"></span>
<button x-on:click="window.livewire.emit('test', search)">Search</button>
</div>
Or if you are using livewire component inside a loop. the above window.livewire.emit will call all the loop livewire component class with same function name.
so the best practice will be to use
x-on:click="#this.call('functionNameInLivewireComponent', search)"
Related
How can I let livewire know that a model is a particular modal
I have this in my livewire component
public $itemname;
public function updateReceivedKg()
{
$this->validate([
'itemname' => 'required',
]);
dump($this->itemname)
}
On livewire view, I have this
#foreach($result->products as $index=>$data)
<form wire:submit.prevent="updateReceivedKg()">
<div class="input-group">
<input required wire:model.defer="itemname" type="text" class="form-control">
<span class="input-group-append">
<button type="submit" class="btn btn-sm btn-success">Update</button>
</span>
</div>
</form>
#endforeach
After generating the form, I have about 11 forms. The issue is that livewire always submit the last itemname that was entered. For example, if on the first form, I entered "Mango" and go to another form and enter "Apple", if I go back to the form which I have already written "Mango" and click the submit (without typing anything) button, if I dump the submitted form and check the itemname, it shows it is the Apple. This is wrong because I submitted the Mango form.
In normal Laravel, I have no issue with this type of form submission. It will detect which form I submitted.
Please how can I achieve the same result using Livewire
You have the same itemname for a lot of elements. You should probably append the index to the modelname.
public $itemname1;
public $itemname2; // etc..
#foreach($result->products as $index=>$data)
<form wire:submit.prevent="updateReceivedKg()">
<div class="input-group">
<input required wire:model.defer="itemname{{$index}}" type="text" class="form-control">
<span class="input-group-append">
<button type="submit" class="btn btn-sm btn-success">Update</button>
</span>
</div>
</form>
#endforeach
I put this layer on all pages on my website(layout) and I want to hide this layer when user type password(hello) using cookie.
I tried to mix two sources but it doesn't work :(
Can you guys help me? thanks :)
--- HTML ---
<div class="popPass">
<div class="passcode aligncenter">
<form name="loginpage" action="javascript:;" method="post" onsubmit="return LogIn( this );">
<div class="input nobottomborder">
<div class="inputcontent">
<input type="password" id="password" /><br />
</div>
</div>
<div class="buttons">
<input name="Submit" type="submit" value="Login">
</div>
</form>
</div>
</div>
I think I missed something.
From your fiddle, you defined your LogIn function inside the jQuery ready callback, which is not in the global scope. So the onsubmit handler can't access it. Try to lift it to the global scope.
I have two buttons with inputs, like this:
<div class="input-group col-5 align-self-center">
<input id="endeDate" class="form-control" placeholder="dd.mm.yyyy" name="endeDate"
[minDate]="minDate" [markDisabled]="disableWeekend" [class.is-invalid]="checkValidity('dateEnd')"
ngbDatepicker #endeDate="ngbDatepicker" formControlName="dateEnd" (focus)="endeDate.toggle()">
<div class="input-group-append">
<button class="btn btn-primary calendar" (click)="endeDate.toggle()" type="button">
<fa-icon icon="calendar-alt"></fa-icon>
</button>
</div>
</div>
<div class="input-group col-5 align-self-center">
<input id="startDate" class="form-control" placeholder="dd.mm.yyyy" name="startDate"
[minDate]="minDate" [markDisabled]="disableWeekend" [class.is-invalid]="checkValidity('dateStart')"
ngbDatepicker #startDate="ngbDatepicker" formControlName="dateStart" (focus)="startDate.toggle()">
<div class="input-group-append">
<button class="btn btn-primary calendar" (click)="startDate.toggle()" type="button">
<fa-icon icon="calendar-alt"></fa-icon>
</button>
</div>
</div>
I need to write unit tests. Unit test has to check datepicker.
it('check Validation field Ende', () => {
let datepicker = fixture.debugElement.nativeElement.querySelector('button').endeDate.toggle();
expect(document.querySelector('.dropdown-menu.show')).toBeNull();
datepicker.click();
expect(document.querySelector('.dropdown-menu.show')).not.toBeNull();
});
But in first and second it opened the same first button.
I tried also this:
let datepicker =
fixture.debugElement.query(By.css('input[id=endeDate]'));
datepicker.nativeElement.click();
but it doesn't work.
Have somebody another Idea
Typically - with Angular being more of the UI component - I will not recommend doing this as a "unit test" from inside Angular. This is more of an end-to-end test you are performing, so why not make use of something like Selenium?
Also - you are selecting the element by CSS - highly recommend you do it by ID instead.
Have a small issue and wondering if some one can help me out.
I have a text search box like this that
<form class="navbar-form navbar-left" role="search" action="/library/search/">
<div class="form-group" style="display:inline;">
<div class="input-group">
<input class="form-control" id="q" name="P" type="text" placeholder="Book Search"">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</div>
</form>
When I type in a word and hit submit a URL is generated as follows,
http://127.0.0.1:8000/library/search/?P=Harry+Potter
In the URLs.py I have something like this
url(r'^search/(?P<search_result>[\w|\W.#+-]+)/$', views.search_view, name='search_view')
However the above url is not being matched by the regex statement. If I manually remove the ?P= from the url it works fine.
I have tried some of the following combination and they didn't work either
url(r'^search/(?P(.*)<search_result>[\w|\W.#+-]+)/$', views.search_view, name='search_view')
Any idea what it could be ?
Thanks
You've misunderstood what ?P means in a regex. It states that the group is a named group, which is captured and sent to a view by a keyword argument. The URL that would satisfy that regex is like this:
/library/search/harrypotter/
But that's not at all what you want from a search; you want something like the one you have created, ie library/search/?P=harry+potter. For that you just want a URL without parameters:
r'^search/$'
and get the data in the view:
query = request.GET['p']
although you probably want to use q rather than p.
I am trying to add an ember view using handlebars.js in jade. When I use this code
script(type='text/x-handlebars')
{{view App.LoginView}}
{{view Ember.TextField valueBinding="username" placeholder="Enter your username"}}
it renders it as:
<div id="ember194" class="ember-view"></div>
<input id="ember204" class="ember-view ember-text-field" placeholder="Enter your username" type="text">
I can't seem to get the textfield to be wrapped within the view. I am wondering if there is a trick to be able to use handlebars correctly within a jade template.
The desired result that I want is:
<div id="ember194" class="ember-view">
<input id="ember204" class="ember-view ember-text-field" placeholder="Enter your username" type="text">
</div>
Try:
script(type='text/x-handlebars')
{{#view App.LoginView}}
{{view Ember.TextField valueBinding="username" placeholder="Enter your username"}}
{{/view}}
Jade saves you from HTML closing tags but the handlebars block must be intact, and what you're asking for requires the Ember.TextField to be inside a {{#view}} block.
[Edit] FYI check out http://emblemjs.com/