I'm trying to work with livewire and i cant get it working.
I have a route:
Route::middleware(['auth:sanctum', 'verified'])
->get('/nuevoturno', NuevoTurno::class)
->name('nuevoturno');
The NuevoTurno.php contains:
namespace App\Http\Livewire;
use App\Models\FormatoTurno;
use Livewire\Component;
class NuevoTurno extends Component
{
public $qFecha = '2020-11-17';
public function render()
{
return view('livewire.nuevo-turno',[
'formatoTurno' => FormatoTurno::First()
]);
}
}
The livewire view:
#section('header', 'Nuevo Turno')
#section('content')
{{ $qFecha }}
<input type="text" value="{{ $qFecha }}">
<div>
<br>
{{-- A good traveler has no fixed plans and is not intent upon arriving. --}}
{{ $formatoTurno->Distancia_Entre_Turnos }}
{{ $formatoTurno->Hora_Inicio }}
{{ $formatoTurno->Hora_Fin }}
</div>
#endsection
{{ $qFecha }} is showing, but the input is not filled
So.. What's goin on?
EDIT:
I changed #section('content') to and in app.blade.php changed #yield('content') to {{ $slot }}
And now it appears:
< wire:id="BCEos1ECXtGL114CYnTn" wire:initial-data="{"fingerprint":{"id":"BCEos1ECXtGL114CYnTn","name":"nuevo-turno","locale":"es"},"effects":{"listeners":[]},"serverMemo":{"children":[],"errors":[],"htmlHash":"850cd1b2","data":{"qFecha":"2020-11-17"},"dataMeta":[],"checksum":"3cb32d8a817d51f7ff71a9ebeb184da10fb421dc1eb00e1ddd53a4ab30dcefb7"}}"!doctype html>
[SOLUTION]
I changed app.blade format from #yield() to {{ $slot }}.
Also changed livewire component nuevo-turno.blade:
<x-slot name="header">
Nuevo Turno
</x-slot>
<div>
{{ $qFecha }}
<input type="text" value="{{ $qFecha }}">
<div>
<br>
{{-- A good traveler has no fixed plans and is not intent upon arriving. --}}
{{ $formatoTurno->Distancia_Entre_Turnos }}
{{ $formatoTurno->Hora_Inicio }}
{{ $formatoTurno->Hora_Fin }}
</div>
</div>
And now it works.
Thanks everybody for the answers!
Related
I overrided my form in EasyAdmin to organize differently my input so I did like this :
In my Crud :
public function configureCrud(Crud $crud): Crud
{
return $crud
->setPageTitle(Crud::PAGE_INDEX, 'admin.menu.infos')
->setFormThemes(['bundles/EasyAdminBundle/crud/company/edit.html.twig'])
;
}
And in my Twig :
{% extends '#EasyAdmin/crud/form_theme.html.twig' %}
{% use '#EasyAdmin/symfony-form-themes/bootstrap_5_layout.html.twig' %}
{% block form %}
{{ form_start(form) }}
<div class="row">
{{ form_row(form.logo) }}
{{ form_row(form.phone) }}
{{ form_row(form.catchphrase) }}
</div>
<div class="row">
{{ form_row(form.businessName) }}
{{ form_row(form.email) }}
{{ form_row(form.website) }}
</div>
<div class="row">
{{ form_row(form.companyName) }}
{{ form_row(form.address) }}
{{ form_row(form.linkedin) }}
</div>
<div class="row">
{{ form_row(form.siren) }}
{{ form_row(form.zipcode) }}
{{ form_row(form.facebook) }}
</div>
<div class="row">
{{ form_row(form.legalForm) }}
{{ form_row(form.city) }}
{{ form_row(form.twitter) }}
</div>
<div class="row">
{{ form_row(form.description) }}
</div>
{{ form_end(form) }}
{% endblock %}
The form is like I wanted and when I submit, it's work but the problem is when I make an error. For example if I valid with an empty value, then instead of getting my form_errors, I've got a 500.
I've tried different things but none of them worked :
block errors :
{{ form_start(form) }}
{% block form_errors %}
{{ parent() }}
{% endblock %}
individual error :
{{ form_errors(form.businessName) }}
Any idea ?
I'm using symfony 2.8. In registration form, when I submit form with empty fields, it is showing validation errors in tag. It is really making the UI looks bad. How can I change the css of each validation error messages.
{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register','novalidate': 'novalidate'}}) }}
<div class="form-group">
{{ form_row(form.name) }}
</div>
<div class="form-group">
{{ form_row(form.email) }}
</div>
<div class="form-group">
{{ form_row(form.username) }}
</div>
<div class="form-group">
{{ form_row(form.plainPassword.first) }}
</div>
<div class="form-group">
{{ form_row(form.plainPassword.second) }}
</div>
<div>
<input type="submit" class="btn btn-primary" value="{{ 'registration.submit'|trans }}" />
</div>
{{ form_end(form) }}
You are rendering form fields using form_row widget which renders label, field & related error to do custom styling you can render your fields and their labels and errors individually like
{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register','novalidate': 'novalidate'}}) }}
{{ form_label(form.email) }}
<div class="some_class">{{ form_errors(form.email) }} </div>
{{ form_widget(form.email) }}
{{ form_end(form) }}
<style type="text/css">
.some_class{
/* write custom styling rules here */
}
</style>
Or get all errors in one place like
{# render any "global" errors #}
{{ form_errors(form) }}
Reference: Twig Template Form Function and Variable Reference
The errors have their own element and classes that you could target from your css.
One basic approach could by using a form theme as described here, or you could create your own form theme.
If you want to customise the tags it renders you could do what this guy does here.
In my Symfony 2 app I got the following code rendering the form:
{{ form_start(form) }}
{{ form_errors(form) }}
<div class="form-group">
{{ form_label(form.title) }}
{{ form_widget(form.title) }}
</div>
<div class="form-group">
{{ form_label(form.message) }}
{{ form_widget(form.message) }}
</div>
{% if extras == true %} //this block should be rendered only if extras var is true
<div class="form-group">
{{ form_label(form.description) }}
{{ form_widget(form.description) }}
</div>
{% endif %}
{{ form_end(form) }}
The problem is that I get rendered {{ form_widget(form.description) }} even if my extras var is false, not with all other form fields but somewhere at the bottom of the form which is obviously a bug. How to make it render only if extras is true and disappear completely from the page in case extras is false?
Thank you.
All other form fields are automatically added to the end of your form by default. It triggers {{ form_rest() }} by default. Use this code to prevent this behavior:
{{ form_end(form, {'render_rest': false}) }}
http://symfony.com/doc/current/reference/forms/twig_reference.html#form-end-view-variables
I'm trying to control the rendering of password fields based on whether i'm editing an user or creating one. I'm doing this with a simple session boolean variable as follows:
{{ form_start(userForm) }}
{{ form_errors(userForm) }}
<div id="user-fg-email" class="form-group">
{{ form_label(userForm.email) }}
{{ form_errors(userForm.email) }}
{{ form_widget(userForm.email) }}
</div>
{% if app.session.get('editingUser') == false %}
<div id="user-fg-pp1" class="form-group">
{{ form_label(userForm.plainPassword.first) }}
{{ form_widget(userForm.plainPassword.first) }}
</div>
<div id="user-fg-pp2" class="form-group">
{{ form_label(userForm.plainPassword.second) }}
{{ form_errors(userForm.plainPassword.first) }}
{{ form_widget(userForm.plainPassword.second) }}
</div>
{% endif %}
<div id="user-fg-role" class="form-group">
{{ form_label(userForm.role) }}
{{ form_errors(userForm.role) }}
{{ form_widget(userForm.role) }}
</div>
<button type="submit" class="btn btn-primary pull-right">Submit</button>
{{ form_end(userForm) }}
However when this boolean is evaluated as true, which is supposed to prevent these fields from rendering, they are still being rendered assumingly by the later following form_end tag.
Is there a way to prevent that from happening?
edit:
if editingUser == true the password fields are actually rendered after the button, hence my assumption it's done so by the form_end tag.
Because you have to specify Twig to not display all the rest of the fields which are not explicitly rendered in the form : http://symfony.com/doc/current/reference/forms/twig_reference.html#form-end-view-variables
{{ form_end(form, {'render_rest': false}) }}
In my views folder i have layouts/main.blade.php and under store/index.blade.php i am using the layout file like so:
#extends('layouts.main') // importing here.
#section('promo')
<section id="promo">
<div id="promo-details">
<h1>Today's Deals</h1>
<p>Checkout this section of<br/>
products at a discounted price.</p>
Shop Now
</div><!-- end promo-details -->
{{ HTML::image('img/promo.png' , 'Promotional Ad') }}
</section><!-- promo -->
#stop
#section('content')
<h2>New Products</h2>
<hr>
<div id="products">
#foreach($products as $product)
<div class="product">
<a href="store/view/{{ $product->id }}">
{{ HTML::image($product->image , $product->title , array('class'=>'feature' ,
'width'=>'240' , 'height'=>'127')) }}
</a>
<h3>
<a href="/store/view/{{ $product->id }}">
{{ $product->title }}
</a>
</h3>
<p>
{{ $product->description }}
</p>
<h5>Availability:
<span class="{{ Availability::displayClass($product->availability) }}">
{{ Availability::display($product->availability) }}
</span>
</h5>
<p>
<a href="#" class="cart-btn">
<span class="price">${{ $product->price }}</span>
{{ HTML::image('img/white-cart.gif' , 'Add to Cart') }}
ADD TO CART
</a>
</p>
</div>
#endforeach
</div> <!-- end products -->
#stop
In my storeController , i am calling the store/index.blade.php file like so:
public function getIndex() {
return View::make('store.index')
->with('products' , Product::take(4)->orderBy('created_at' , 'DESC')->get());
}
In my routing file, i have the following:
Route::get('/', array('uses' => 'StoreController#getIndex'));
But still when i load my / , i get some other template rather than layouts/main.blade.php. Why is this happening ? can anybody explain ?
Why is layouts/main.blade.php not loading when i hit / in the browser ?
Thank you.
Alex-z.
Well i had the following syntax .
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{{ HTML::style('css/bootstrap.css') }}
{{ HTML::style('css/animate.min.css') }}
{{ HTML::style('css/style.css') }}
{{ HTML::style('css/nprogress.css') }}
{{ HTML::style('css/new-arrivals.css') }}
Removing the below line
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
solved my problem ... Why though ? also how do i disable cache in laravel during development ?