i am doing tutorials doing comments website, i have app layout which yield content and register page the view is working fine but the form in register submit prevent doesnt work it just refresh when submitted.
here are the codes
layout app blade php
`--``
<!DOCTYPE html>
<html lang="en">
<head>
...
#livewireStyles
#livewireScripts
<script src="{{asset('js/app.js')}}"></script>
</head>
<body class="flex flex-wrap justify-center bg-blue-100">
<div class="flex w-full justify-between px-4 bg-purple-900 text-white">
<a class="mx-3 py-4" href="/">Home</a>
<div class="py-4">
<a class="mx-3" href="/login">Login</a>
<a class="mx-3" href="/register">Register</a>
</div>
</div>
<div class="my-10 w-full flex justify-center">
#yield('content')
</div>
<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks#v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false"></script>
<script type="module">
import hotwiredTurbo from 'https://cdn.skypack.dev/#hotwired/turbo';
</script>
</body>
</html>
register blade php
#section('content')
<div class="my-10 flex justify-center w-full">
<section class="border rounded shadow-lg p-4 w-6/12 bg-gray-200">
<h1 class="text-center text-3xl my-5">SignUp to Get Started</h1>
<hr>
<form class="my-4" wire:submit.prevent="submit">
<div class="flex justify-around my-8">
<div class="flex flex-wrap w-10/12">
<input type="name" class="p-2 rounded border shadow-sm w-full" wire:model="form.name"
placeholder="Name" />
#error('form.name') <span class="text-red-500 text-xs">{{ $message }}</span> #enderror
</div>
</div>
<div class="flex justify-around my-8">
<div class="flex flex-wrap w-10/12">
<input type="email" class="p-2 rounded border shadow-sm w-full" placeholder="Email"
wire:model="form.email" />
#error('form.email') <span class="text-red-500 text-xs">{{ $message }}</span> #enderror
</div>
</div>
<div class="flex justify-around my-8">
<div class="flex flex-wrap w-10/12">
<input type="password" class="p-2 rounded border shadow-sm w-full" placeholder="Password"
wire:model="form.password" />
#error('form.password') <span class="text-red-500 text-xs">{{ $message }}</span> #enderror
</div>
</div>
<div class="flex justify-around my-8">
<div class="flex flex-wrap w-10/12">
<input type="text" class="p-2 rounded border shadow-sm w-full"
placeholder="Confirm Password" wire:model="form.password_confirmation" />
</div>
</div>
<div class="flex justify-around my-8">
<div class="flex flex-wrap w-10/12">
<input type="submit" value="Register" class="p-2 bg-gray-800 text-white w-full rounded tracking-wider cursor-pointer" />
</div>
</div>
</form>
</section>
</div>
#endsection
this is my first time posting, i searched in a lot of places but didnt find the solution.
it worked when i used #livewire('register') in app layout but if i use that the register page is visible in all other pages when app layout is called
I found the solution,
The problem was i am using the livewire 1.0 code which is '#yield('content')' in app layout, i changed that to '{{ $slot }}' and removed '#section('content')' blade code from my views it worked fine
Check the documentation
https://laravel-livewire.com/docs/2.x/upgrading#route-livewire
Related
hi sorry for my bad engilsh.
im using blade component page in laravel to include a blade page in another blade page
i use component blade page.
i send A VARIABLE that its name is "post" like this
#foreach($posts->skip(1) as $post)
<x-post-card :post="$post"/>
#endforeach
i use #props(['post']) on that page to get the variable
#props(['post'])
and when put 'post'
on #ddd its fine and ok
but when i wonna use its property like 'title' the laravel send me a error that Undefined variable: post
this the way i use property
#props(['post'])
#dd($post)
<article class="transition-colors duration-300 hover:bg-gray-100 border border-black border-opacity-0 hover:border-opacity-5 rounded-xl">
<div class="py-6 px-5 lg:flex">
<div class="flex-1 lg:mr-8">
<img src="/images/illustration-1.png" alt="Blog Post illustration" class="rounded-xl">
</div>
<div class="flex-1 flex flex-col justify-between">
<header class="mt-8 lg:mt-0">
<div class="space-x-2">
{{$post->category->name}}
</div>
<div class="mt-4">
<h1 class="text-3xl .bold">
{{$post->title}}
</h1>
<span class="mt-2 block text-gray-400 text-xs">
Published <time>{{$post->created_at->diffForHumans()}}</time>
</span>
</div>
</header>
<div class="text-sm mt-2">
<p>
{{$post->excerpt}}
</p>
</div>
<footer class="flex justify-between items-center mt-8">
<div class="flex items-center text-sm">
<img src="/images/lary-avatar.svg" alt="Lary avatar">
<div class="ml-3">
<h5 class="font-bold">{{$post->user->name}}</h5>
<h6>Mascot at Laracasts</h6>
</div>
</div>
<div class="hidden lg:block">
Read More
</div>
</footer>
</div>
</div>
</article>
I have a database filled with articles to create a baby webshop.
At this moment, all articles are shown on my webpage but I have a sidebar with a filter in it that gives the customer the option to choose between different categories, shops and to order the price by ascending or descending price.
How can I say to my foreach function to only show the articles that are called by the filter?
I can't use any external libraries like Jquery or Ajax to do this because school won't let us to..
Here is my code for my page:
<body class="relative min-h-screen">
#include('partials.header')
<main class="m-auto flex flex-row w-3/5">
<div class="p-2 w-3/12 bg-red-100 mt-4 h-fit flex flex-col">
<h3 class=" p-2 m-auto text-2xl w-10/12 border-b border-black ">Verfijnen</h3>
<ul class="p-2 text-xl ">
<ul class="p-2">Categorieën
<div>
<form action="{{route('filter')}}" method="GET">
#foreach ($categories as $category)
<li class="text-sm">
<input type="checkbox" id="{{$category->id}}" name="{{$category->id}}" value="{{ $category->title }}" onChange="this.form.submit()" {{ request()->filled($category->id) ? 'checked' :''}}>
<label for="{{$category->id}}">{{ $category->title }}</label>
</li>
#endforeach
</form>
</div>
</ul>
<ul class="p-2">Website
<div>
#foreach ($websites as $website)
<li class="text-sm">
<input type="checkbox" id="{{$website->id}}" name="{{$website->id}}" value="{{ $website->title }}">
<label for="{{$website->id}}">{{ $website->title }}</label>
</li>
#endforeach
</div>
</ul>
<ul class="p-2">Prijs
<div>
<li class="text-sm">
<input type="checkbox" id="LnH" name="LnH">
<label for="LnH">Laag naar Hoog</label>
</li>
<li class="text-sm">
<input type="checkbox" id="HnL" name="HnL">
<label for="HnL">Hoog naar Laag</label>
</li>
</div>
</ul>
</ul>
</div>
<div class="w-full p-8">
<h3 class="text-center p-4">Overzicht</h3>
<div class="flex flex-row flex-wrap justify-between gap-y-20 gap-x-2">
#foreach ($articles as $article)
<div class=" w-3/12 h-auto flex flex-col justify-between">
<div class="h-2/3 flex justify-center items-center">
<img src="{{$article->image}}" alt="" class="">
</div>
<div class="h-fit mt-2 ">
<h4 class="text-md text-center"><strong>{{ $article->title }}</strong></h4>
</div>
<div class="">
<p class="mt-4">{{$article->prijs}}</p>
</div>
</div>
#endforeach
</div>
</div>
</main>
#include('partials.footer')
</body>
This is the code that i have in index.blade.php
#foreach ($posts as $item)
<!-- Someting -->
<form name="f" method="POST" action="route...">
#csrf
#method('DELETE')
<button class="modal-open"><i class="fas fa-edit"></i></button>
<!-- Delete button... -->
</form>
#endforeach
How i can open a modal window with the data from $item where i clicked the edit button and not the others? (When i tried the code always give me the data of the frist or the last $item)
Here the modal window code
<div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
<div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
<div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
<div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
<span class="text-sm">(Esc)</span>
</div>
<div class="modal-content py-4 text-left px-6">
<form name="form" action="route..." method="GET" class="mt-3">
#csrf
#method('POST')
<br>
<textarea class="bg-gray-300 rounded" name="mensaje" placeholder="{{Here the old data}}" required></textarea>
<input type="hidden" name="foro_id" value="#">
<input type="hidden" name="tema_id" value="#">
<div class="mt-2">
<button type="submit" class="bg-green-300 p-1 rounded">Actualizar Post</button>
</div>
</form>
<div class="flex justify-end pt-2">
<button class="px-4 bg-transparent p-3 rounded-lg text-indigo-500 hover:bg-gray-100 hover:text-indigo-400 mr-2">Action</button>
<button class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">Close</button>
</div>
</div>
</div>
</div>
Thank you all and sorry for the inconvenience.
You must use JavaScript or JQuery to pass the data to the modal. For my convenience, I am using JQuery. For JQuery, we need to do something like the following-
In index.blade.php
<button class="modal-open" data-item-foro-id="{{ $item->foro_id }}" data-item-tema-id="{{ $item->tema_id }}"><i class="fas fa-edit"></i></button>
//In Modal
............
<input type="hidden" name="foro_id" id="foro_id" value="#">
<input type="hidden" name="tema_id" id="tema_id" value="#">
............
JQuery Code-
<script>
$(document).on("click", ".modal-open", function () {
var foroId= $(this).attr('data-item-foro-id');
var temaId= $(this).attr('data-item-tema-id');
$("#foro_id").val(foroId);
$("#tema_id").val(temaId);
});
</script>
Note: Here, I am providing an example to pass values to the two input fields. If you get the idea from it, you can pass any value to the modal.
I am using the below code from Tailblocks Link under CTA section , upon clicking the button I am not able to get to new page. In the below code form tags are added by me. please guide how can I resolve it?
<form ction="index.php" method="post">
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap items-center">
<div class="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
<h1 class="title-font font-medium text-3xl text-gray-900">Slow-carb next level shoindcgoitch ethical authentic, poko scenester</h1>
<p class="leading-relaxed mt-4">Poke slow-carb mixtape knausgaard, typewriter street art gentrify hammock starladder roathse. Craies vegan tousled etsy austin.</p>
</div>
<div class="lg:w-2/6 md:w-1/2 bg-gray-100 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
<h2 class="text-gray-900 text-lg font-medium title-font mb-5">Sign Up</h2>
<div class="relative mb-4">
<label for="full-name" class="leading-7 text-sm text-gray-600">Full Name</label>
<input type="text" id="full-name" name="full-name" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600">Email</label>
<input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<button class="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>
<p class="text-xs text-gray-500 mt-3">Literally you probably haven't heard of them jean shorts.</p>
</div>
</div>
</section>
</form>
You form action attribute is having a typo.
<form action="index.php" method="post">
Also, instead of button you need to select the input type as submit.
<input type='submit' class="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg" value="Button">
else add some JS to submit the form
<script>
var forms = document.getElementsByTagName('form');
for(var i = 0; i < forms.length; i += 1) {
forms[i].addEventListener('submit', function(e) {
e.preventDefault();
}, true);
}
</script>
You have a typo error in action attribute in your form tag.
<form action="index.php" method="post">
Also you don't add the type attribute to your button tag.
<button type="submit" class="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>
I hope this will fix your problem.
fast and (hopefully) simple question. I am starting out with a project. I'm using de standard authorisation that comes with laravel. Registering a user works fine and it is logged in afterwards. I can also logout with no problem. The login screen seems fine. But when I enter my login credentials and click on 'login' nothing happens. no redirects or errors at all. It doesnt matter if I enter right, wrong or nothing at all in the login fields.
Login controller (Should be default):
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
class LoginController extends Controller
{
/*
*/
use AuthenticatesUsers;
/**
* Where to redirect users after login.
*
* #var string
*/
protected $redirectTo = '/profile';
/**
* Create a new controller instance.
*
* #return void
*/
public function __construct()
{
$this->middleware('guest')->except('logout');
}
}
Login view (should also be default):
#extends('layouts.app')
#section('content')
<div class="container mx-auto">
<div class="w-full max-w-xs mx-auto px-4">
<h1 class="mb-4 text-center">Inloggen</h1>
<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<div class="mb-4">
<label class="block text-grey-darker text-sm font-bold mb-2" for="username">
E-mailadres
</label>
<input id="email" type="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker {{ $errors->has('email') ? 'border-red-dark' : 'border-grey-light' }}" name="email" value="{{ old('email') }}" required autofocus>
{!! $errors->first('email', '<p class="text-red text-xs italic">:message</p>') !!}
</div>
<div class="mb-6">
<label class="block text-grey-darker text-sm font-bold mb-2" for="password">
Wachtwoord
</label>
<input id="password" type="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker {{ $errors->has('email') ? 'border-red-dark' : 'border-grey-light' }}" name="password" required>
{!! $errors->first('password', '<p class="text-red text-xs italic">:message</p>') !!}
</div>
<div class="flex items-center justify-between">
<button class="bg-blue hover:bg-blue-dark text-white py-2 px-4 rounded" type="button">
Inloggen
</button>
<a class="inline-block align-baseline text-xs text-grey hover:text-grey-dark" href="{{ route('password.request') }}">
Wachtwoord vergeten?
</a>
</div>
</form>
<p class="text-center text-grey text-xs">
©{{ date('Y') }} {{ config('app.name') }}. Alle rechten voorbehouden.
</p>
</div>
</div>
#endsection
It seems like your Inloggen button is the part that is wrong. Should be something like:
<button class="bg-blue hover:bg-blue-dark text-white py-2 px-4 rounded" type="submit">
Inloggen
</button>
It needs to be type="submit" to submit form data.