Livewire profile edit form content on the page does not change - laravel

I edited the laravel livewire profile and updated the blade in the livewire resource and the content on the page does not change. How I can update content on page after changing code? I can remove all this code, but it's still remaining on page:
<x-jet-form-section submit="updateProfileInformation">
<x-slot name="title">
{{ __('Profile Information') }}
</x-slot>
<x-slot name="description">
{{ __('Update your account\'s profile information and email address.') }}
</x-slot>
<x-slot name="form">
<!-- Profile Photo -->
#if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
<div x-data="{photoName: null, photoPreview: null}" class="col-span-6 sm:col-span-4">
<!-- Profile Photo File Input -->
<input type="file" class="hidden"
wire:model="photo"
x-ref="photo"
x-on:change="
photoName = $refs.photo.files[0].name;
const reader = new FileReader();
reader.onload = (e) => {
photoPreview = e.target.result;
};
reader.readAsDataURL($refs.photo.files[0]);
" />
<x-jet-label for="photo" value="{{ __('Photo') }}" />
<!-- Current Profile Photo -->
<div class="mt-2" x-show="! photoPreview">
<img src="{{ $this->user->profile_photo_url }}" alt="{{ $this->user->name }}" class="rounded-full h-20 w-20 object-cover">
</div>
<!-- Name -->
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="name" value="{{ __('Name') }}" />
<x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model.defer="state.name" autocomplete="name" />
<x-jet-input-error for="name" class="mt-2" />
</div>
</x-jet-form-section>

Related

gin-gonic templates only ever showing one form

I have been setting up my gin templates to use a base template that sets out the layout for my various views.
The problem I am having is that all views show my Register page, no matter what route I navigate to. All my templates inherit from base and define content when they are called and are all loaded initially when my application starts with LoadHTMLGlob().
What I expect to see is when each page is visited, the content block is inserted into the layout defined in my base template, but on every request I just see the register view.
Looking at the logs, I am getting 200 messages so the routing appears fine, also when I insert some dummy text into the content block of base it renders fine.
What am I missing below or in general to get this working properly?
Login handler for the /login route
func getLoginForm(c *gin.Context) {
c.HTML(http.StatusOK, "login.html", nil)
}
Loading templates in main()
router.LoadHTMLGlob("templates/*")
router.Static("/public", "./public")
base.html
{{ define "base" }}
{{ template "header" .}}
{{ template "navbar" .}}
{{ template "flash_messages" .}}
{{ block "content" .}}
{{ end }}
{{ template "footer" .}}
{{ end }}
index.html
{{ template "base" }}
{{ define "content" }}
{{ template "site_image" .}}
{{ end }}
register.html
{{ template "base" }}
{{ define "content" }}
<form method='POST'>
<br>
<div class="mb-3">
<label for="email">Email address</label>
<input name="email" type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="mb-3">
<label for="username">Username</label>
<input name="username" type="username" class="form-control" id="username" placeholder="Enter username">
</div>
<div class="mb-3">
<label for="password">Password</label>
<input name="password" type="password" class="form-control" id="password" placeholder="Enter password">
</div>
<div class="mb-3">
<label for="confirmPassword">Confirm Password</label>
<input name="confirmPassword" type="password" class="form-control" id="confirmPassword" placeholder="Confirm password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
{{ end }}
login.html
{{ template "base" }}
{{ define "content" }}
<form method='POST'>
<br>
<div class="mb-3">
<label for="username">Username</label>
<input name="username" type="username" class="form-control" id="username" placeholder="Username">
</div>
<div class="mb-3">
<label for="password">Password</label>
<input name="password" type="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
{{ end }}

Laravel Jetstream Livewire undefined variable

I duplicated <x-slot name="form"> with <x-slot name="form2"> and inserted variable $form2 in form-section.blade.php but get an error for undefined $form2. I don't know why update-profile-information-form.blade.php didn't send $form2 HTML. I am using Laravel 8.
Error: ErrorException Undefined variable: form2 (View:
\resources\views\vendor\jetstream\components\form-section.blade.php)
form-section.blade.php
#props(['submit'])
<div {{ $attributes->merge(['class' => '']) }}>
<x-jet-section-title>
<x-slot name="title">{{ $title }}</x-slot>
<x-slot name="description">{{ $description }}</x-slot>
</x-jet-section-title>
<div class="md:grid md:grid-cols-2 md:gap-6">
<div class="mt-2 md:mt-0 md:col-span-1">
<form wire:submit.prevent="{{ $submit }}">
<div class="px-4 py-5 bg-white sm:p-6 shadow {{ isset($actions) ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md' }}">
<div class="grid grid-cols-6 gap-6">
{{ $form }}
</div>
</div>
#if (isset($actions))
<div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
{{ $actions }}
</div>
#endif
</form>
</div>
<div class="mt-2 md:mt-0 md:col-span-2">
<form wire:submit.prevent="{{ $submit }}">
<div class="px-4 py-5 bg-white sm:p-6 shadow {{ isset($actions) ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md' }}">
<div class="grid grid-cols-6 gap-6">
{{ $form2 }}
</div>
</div>
#if (isset($actions))
<div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
{{ $actions }}
</div>
#endif
</form>
</div>
</div>
</div>
update-profile-information-form.blade.php
<x-jet-form-section submit="updateProfileInformation">
<x-slot name="title">
{{ __('Profile Information') }}
</x-slot>
<x-slot name="description">
{{ __('Update your account\'s profile information and email address.') }}
</x-slot>
<x-slot name="form">
<!-- Name -->
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="name" value="{{ __('Name') }}" />
<x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model.defer="state.name" autocomplete="name" />
<x-jet-input-error for="name" class="mt-2" />
</div>
<!-- Email -->
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="email" value="{{ __('Email') }}" />
<x-jet-input id="email" type="email" class="mt-1 block w-full" wire:model.defer="state.email" />
<x-jet-input-error for="email" class="mt-2" />
</div>
</x-slot>
<x-slot name="form2">
<!-- Profile Photo -->
#if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
<div x-data="{photoName: null, photoPreview: null}" class="col-span-6 sm:col-span-4">
<!-- Profile Photo File Input -->
<input type="file" class="hidden"
wire:model="photo"
x-ref="photo"
x-on:change="
photoName = $refs.photo.files[0].name;
const reader = new FileReader();
reader.onload = (e) => {
photoPreview = e.target.result;
};
reader.readAsDataURL($refs.photo.files[0]);
" />
<x-jet-label for="photo" value="{{ __('Photo') }}" />
<!-- Current Profile Photo -->
<div class="mt-2" x-show="! photoPreview">
<img src="{{ $this->user->profile_photo_url }}" alt="{{ $this->user->name }}" class="rounded-full h-20 w-20 object-cover">
</div>
<!-- New Profile Photo Preview -->
<div class="mt-2" x-show="photoPreview">
<span class="block rounded-full w-20 h-20"
x-bind:style="'background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url(\'' + photoPreview + '\');'">
</span>
</div>
<x-jet-secondary-button class="mt-2 mr-2" type="button" x-on:click.prevent="$refs.photo.click()">
{{ __('Select A New Photo') }}
</x-jet-secondary-button>
#if ($this->user->profile_photo_path)
<x-jet-secondary-button type="button" class="mt-2" wire:click="deleteProfilePhoto">
{{ __('Remove Photo') }}
</x-jet-secondary-button>
#endif
<x-jet-input-error for="photo" class="mt-2" />
</div>
#endif
</x-slot>
<x-slot name="actions">
<x-jet-action-message class="mr-3" on="saved">
{{ __('Saved.') }}
</x-jet-action-message>
<x-jet-button wire:loading.attr="disabled" wire:target="photo">
{{ __('Save') }}
</x-jet-button>
</x-slot>
</x-jet-form-section>
I just found the problem, in form-section.blade.php you have: #props(['submit', 'test' => '']) if you don't put default value for that variable test, the variable we'll be see it like undefined

Laravel : Trying to access array offset on value of type null

I have the following in my livewire file to create a contact and create an new entreprise for him.
public $contact;
public $entreprise;
public function saveContact()
{
$this->validate();
$newentreprise = Entreprise::create([
'nom' => $this->entreprise['nom'],
'adresse' => '1',
'cle' => Str::random(32),
'code_postal' => '95959',
'ville' => 'meknes',
]);
Contact::create([
'nom' => $this->contact['nom'],
'prenom' => $this->contact['prenom'],
'e_mail' => $this->contact['e_mail'],
'cle' => Str::random(32),
'telephone_mobile' => '',
'telephone_fixe' => '',
'entreprise_id' => $newentreprise->id,
]);
$this->confirmingContactAdd = false ;
}
The contact is perfectly created, but I have a problem in the creation of the entreprise. It seems like the input of 'nom' in $newentreprise is not requested correctly. Where do I have the problem ?
contact.blade.php of displaying the inputs ( The 3 inputs of contact are requested correctly ) :
<div class="flex mt-6">
<div class="flex-1 text-left mr-2"><div class="col-span-6 sm:col-span-4">
<x-jet-label class="font-bold" for="prenom" value="{{ __('Prénom') }}" />
<x-jet-input id="prenom" type="text" class="mt-1 block w-full" wire:model.defer="contact.prenom" />
<x-jet-input-error for="contact.prenom" class="mt-2" />
</div></div>
<div class="flex-1 text-left ml-2"><div class="col-span-6 sm:col-span-4">
<x-jet-label class="font-bold" for="nom" value="{{ __('Nom') }}" />
<x-jet-input id="nom" type="text" class="mt-1 block w-full" wire:model.defer="contact.nom" />
<x-jet-input-error for="contact.nom" class="mt-2" />
</div></div>
</div>
<div class="flex-1 text-left mt-4"><div class="col-span-6 sm:col-span-4">
<x-jet-label class="font-bold" for="e-mail" value="{{ __('E-mail') }}" />
<x-jet-input id="e-mail" type="text" class="mt-1 block w-full" wire:model.defer="contact.e_mail" />
<x-jet-input-error for="contact.e_mail" class="mt-2" />
</div></div>
<div class="flex-1 text-left mt-4"><div class="col-span-6 sm:col-span-4">
<x-jet-label class="font-bold" for="entreprise" value="{{ __('Entreprise') }}" />
<x-jet-input id="entreprise" type="text" class="mt-1 block w-full" wire:model.defer="contact.entreprise.nom" />
<x-jet-input-error for="contact.entreprise.nom" class="mt-2" />
</div></div>

Better solution instead of $wire.set to pass computed Alpine value for livewire

I am new in Alpine / Livewire. This tag script works well expect one thing: the form is sending continiusly query to the server. Is better way to pass the form data for livewire?
<div class="col-span-6 my-2" x-data="{tags: [], newTag: ''}" >
<x-jet-input id="tags"
type="text"
wire:model="tags"
:value="$wire.set('tags','JSON.stringify(tags)')"
class="mt-1 block w-full hidden"
/>
<div class=" w-full mx-auto ">
<div class="tags-input border-gray-300 shadow-sm focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
<template x-for="tag in tags" :key="tag">
<span class="tags-input-tag">
<span x-text="tag"></span>
<button type="button" class="tags-input-remove" #click="tags = tags.filter(i => i !== tag)">
×
</button>
</span>
</template>
<input class="tags-input-text w-full" placeholder="{{__('Add music tags eg.') }} Pop Trap Live..."
#keydown.enter.prevent="if (newTag.trim() !== '') tags.push(newTag.trim()); newTag = ''"
#keydown.space.prevent="if (newTag.trim() !== '') tags.push(newTag.trim()); newTag = ''"
#keydown.backspace="if (newTag.trim() === '') tags.pop()"
x-model="newTag"
/>
</div>
<x-jet-input-error for="tags" class="mt-2" />
<x-slot name="actions">
<x-jet-action-message class="mr-3" on="saved">
{{ __('Saved.') }}
</x-jet-action-message>
<x-jet-button
>
{{ __('Save') }}
</x-jet-button>
</x-slot>
For everyone who has problem with $wire.set:
I find the solution and is not in documentation.
$wire.set need third parameter true to skip watch function and it won't send data in the background if no need
$wire.set('param','value',true)

Laravel Deloying file upload does not work on 000webhost

I have just uploaded a project to 000webhost, my problem is that the request of the inputs work fine, only the input "file" is not working when form submit, tt does not even request to input the file before uploading at the local server it works perfectly, please help me.
public function update(Request $request)
{
if($request->isMethod('post'))
{
if($request->color && $request->color != ''){ // Work fine
$data['theme_color'] = $request->color;
}
if($request->copyright && $request->copyright != ''){ // Work fine
$data['theme_copyright'] = $request->copyright;
}
if ($request->hasFile('logo')) // Not working
{
$file = $request->logo;
$extension = pathinfo($file->getClientOriginalName(), PATHINFO_EXTENSION);
$logo = md5_file($file).time().'.'.$extension;
$request->logo->move('uploads/images', $logo);
$data['theme_logo'] = $logo;
}
}
}
//view
<form action="{{ url('manage/setting/update') }}" method="post" enctype="multipart/form-data">
#csrf
<div class="row">
<div class="col-md-12 theme_color">
<h5>Theme Color</h5>
<div class="chosen_color" style="background-color: {{ $setting['theme_color'] }}"></div>
<label for="upload-color">Chọn color ...</label>
<input type="color" name="color" id="upload-color" value="{{ $setting['theme_color'] }}" />
</div>
</div>
<br>
<div class="row">
<div class="col-md-12 theme_logo">
<h5>Theme Logo</h5>
<img src="{{ asset('uploads/images/'.$setting['theme_logo']) }}" width="200" height="100">
<label for="upload-logo">Chose image ...</label>
<input type="file" name="logo" id="upload-logo" />
</div>
</div>
<br>
<div class="row">
<div class="col-md-12 theme_copyright">
<h5>Theme Copyright</h5>
<input type="text" name="copyright" class="form-control" style="width: 50%" value="{{ $setting['theme_copyright'] }}" autocomplete="off">
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<button class="btn btn-default">Update</button>
Reset
</div>
</div>
</form>

Resources