<template>
<div>
<Header></Header>
<div class=" flex justify-center items-center" v-if="!item && !product">
<div class="animate-spin rounded-full h-20 w-20 border-b-2 border-sky-500"></div>
</div>
<div v-else>
<div class="grid md:grid-cols-2 my-5">
<div>
<img class="w-full h-52 md:h-96 md:w-96 mx-auto " :src="product.imagePath" alt="Extol Coffee">
</div>
<div class="mr-16 ">
<div class="grid grid-cols-4 text-5xl mb-3">
<p class="inline col-span-4">{{product.name}} - {{item.quantity_type}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Region</p>
<p class="inline text-justify col-span-3">{{product.region}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Growing Altitude</p>
<p class="inline text-justify col-span-3">{{product.growing_altitude}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Arabica Variety</p>
<p class="inline text-justify col-span-3">{{product.arabica_variety}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Milling Process</p>
<p class="inline text-justify col-span-3">{{product.milling_process}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Aroma</p>
<p class="inline text-justify col-span-3">{{product.aroma}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Flavor</p>
<p class="inline text-justify col-span-3">{{product.flavor}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Body</p>
<p class="inline text-justify col-span-3">{{product.body}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Acidity</p>
<p class="inline text-justify col-span-3">{{product.acidity}}</p>
</div>
<div class="grid grid-cols-4 mt-4 p-2">
<p class="inline col-span-1">Price</p>
<p class="inline text-justify col-span-3 text-2xl">${{item.price}}</p>
</div>
<div class="p-2 grid grid-cols-4">
<p class="inline col-span-1">Quantity</p>
<input class="w-32 h-10 rounded-md border-2 col-span-2 bg-white" type="number" name="quantity" id="quantity" v-model="quantity">
</div>
<div class="p-2">
<button class=" block bg-transparent border-sky-500 border-2 rounded-md w-52 h-10 mx-auto" v-on:click="addToCart()">
<span>Add to Cart</span>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from "./Header.vue";
export default {
name: "ViewItem",
data(){
return{
product:null,
quantity:0,
}
},
components:{
Header,
},
methods:{
addToCart(){
var itemToCart ={
product: this.product,
item: this.item,
quantity: +this.quantity,
};
if(itemToCart.quantity>0){
this.$store.dispatch("addItemToCart",itemToCart).then(r=>{}).catch(e=>console.log(e));
}
}
},
computed:{
item(){
var item = this.$store.getters.getProductQuantities.find(item => item.id == this.$route.params.id);
this.product= this.$store.getters.getProducts.find(product => product.id == item.product_id);
return item;
},
}
};
</script>
<style></style>
<template>
<div>
<Header></Header>
<div class=" flex justify-center items-center" v-if="!item && !product">
<div class="animate-spin rounded-full h-20 w-20 border-b-2 border-sky-500"></div>
</div>
<div v-else>
<div class="grid md:grid-cols-2 my-5">
<div>
<img class="w-full h-52 md:h-96 md:w-96 mx-auto " :src="product.imagePath" alt="Extol Coffee">
</div>
<div class="mr-16 ">
<div class="grid grid-cols-4 text-5xl mb-3">
<p class="inline col-span-4">{{product.name}} - {{item.quantity_type}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Region</p>
<p class="inline text-justify col-span-3">{{product.region}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Growing Altitude</p>
<p class="inline text-justify col-span-3">{{product.growing_altitude}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Arabica Variety</p>
<p class="inline text-justify col-span-3">{{product.arabica_variety}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Milling Process</p>
<p class="inline text-justify col-span-3">{{product.milling_process}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Aroma</p>
<p class="inline text-justify col-span-3">{{product.aroma}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Flavor</p>
<p class="inline text-justify col-span-3">{{product.flavor}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Body</p>
<p class="inline text-justify col-span-3">{{product.body}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Acidity</p>
<p class="inline text-justify col-span-3">{{product.acidity}}</p>
</div>
<div class="grid grid-cols-4 mt-4 p-2">
<p class="inline col-span-1">Price</p>
<p class="inline text-justify col-span-3 text-2xl">${{item.price}}</p>
</div>
<div class="p-2 grid grid-cols-4">
<p class="inline col-span-1">Quantity</p>
<input class="w-32 h-10 rounded-md border-2 col-span-2 bg-white" type="number" name="quantity" id="quantity" v-model="quantity">
</div>
<div class="p-2">
<button class=" block bg-transparent border-sky-500 border-2 rounded-md w-52 h-10 mx-auto" v-on:click="addToCart()">
<span>Add to Cart</span>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from "./Header.vue";
export default {
name: "ViewItem",
data(){
return{
product:null,
quantity:0,
}
},
components:{
Header,
},
methods:{
addToCart(){
var itemToCart ={
product: this.product,
item: this.item,
quantity: +this.quantity,
};
if(itemToCart.quantity>0){
this.$store.dispatch("addItemToCart",itemToCart).then(r=>{}).catch(e=>console.log(e));
}
}
},
computed:{
item(){
var item = this.$store.getters.getProductQuantities.find(item => item.id == this.$route.params.id);
this.product= this.$store.getters.getProducts.find(product => product.id == item.product_id);
return item;
},
}
};
</script>
<style></style>
<div>
<img class="w-full h-52 md:h-96 md:w-96 mx-auto " :src="product.imagePath" alt="Extol Coffee">
</div>
<template>
<div>
<Header></Header>
<div class=" flex justify-center items-center" v-if="!item && !product">
<div class="animate-spin rounded-full h-20 w-20 border-b-2 border-sky-500"></div>
</div>
<div v-else>
<div class="grid md:grid-cols-2 my-5">
<div>
<img class="w-full h-52 md:h-96 md:w-96 mx-auto " :src="product.imagePath" alt="Extol Coffee">
</div>
<div class="mr-16 ">
<div class="grid grid-cols-4 text-5xl mb-3">
<p class="inline col-span-4">{{product.name}} - {{item.quantity_type}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Region</p>
<p class="inline text-justify col-span-3">{{product.region}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Growing Altitude</p>
<p class="inline text-justify col-span-3">{{product.growing_altitude}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Arabica Variety</p>
<p class="inline text-justify col-span-3">{{product.arabica_variety}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Milling Process</p>
<p class="inline text-justify col-span-3">{{product.milling_process}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Aroma</p>
<p class="inline text-justify col-span-3">{{product.aroma}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Flavor</p>
<p class="inline text-justify col-span-3">{{product.flavor}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Body</p>
<p class="inline text-justify col-span-3">{{product.body}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Acidity</p>
<p class="inline text-justify col-span-3">{{product.acidity}}</p>
</div>
<div class="grid grid-cols-4 mt-4 p-2">
<p class="inline col-span-1">Price</p>
<p class="inline text-justify col-span-3 text-2xl">${{item.price}}</p>
</div>
<div class="p-2 grid grid-cols-4">
<p class="inline col-span-1">Quantity</p>
<input class="w-32 h-10 rounded-md border-2 col-span-2 bg-white" type="number" name="quantity" id="quantity" v-model="quantity">
</div>
<div class="p-2">
<button class=" block bg-transparent border-sky-500 border-2 rounded-md w-52 h-10 mx-auto" v-on:click="addToCart()">
<span>Add to Cart</span>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from "./Header.vue";
export default {
name: "ViewItem",
data(){
return{
product:null,
quantity:0,
}
},
components:{
Header,
},
methods:{
addToCart(){
var itemToCart ={
product: this.product,
item: this.item,
quantity: +this.quantity,
};
if(itemToCart.quantity>0){
this.$store.dispatch("addItemToCart",itemToCart).then(r=>{}).catch(e=>console.log(e));
}
}
},
computed:{
item(){
var item = this.$store.getters.getProductQuantities.find(item => item.id == this.$route.params.id);
this.product= this.$store.getters.getProducts.find(product => product.id == item.product_id);
return item;
},
}
};
</script>
<style></style>
the image exists and is outputted in other components, but not in this component. I fetch the product object from the state using the item.product_id. It fetches the product, and populates the region, growing altitude.....etc and also the image path. In the DOM the image path is filled properly but it shows a "could not load image" error, then shows the alt text "Extol Coffee". The image path works fine as other components use it and display there image.
to display the image dynamically
Have you check the console and see theres no error request for image ? If all clear then something wrong with this 'w-full h-52 md:h-96 md:w-96 mx-auto' class, i suggest to clear those classes and see the results.
Related
Hello I'm confused on how should I pass collections/data to another component so I can display it in another component (in this case I'm showing discounts so it will be a section with popular discounts and another section showing latest discounts).
So i have this index.blade.php and i'm a bit confused on how to pass the data to x-discount-card component so I can access to $discount->title on the component. Right now I get "undefined variable $discount" so it seems i'm not accessing it right.
<x-layout>
<main>
#include('components.categories-row')
#include('discounts._best')
<section class="w-4/6 mx-auto my-8 font-bold flex flex-col items-center justify-center">
<h1 class="uppercase text-main-gray text-4xl bold self-start text-center mb-4 ">Últimos Descuentos</h1>
#if($discounts->count())
#foreach($discounts as $discount)
<x-discount-card :discount="$discount" />
#endforeach
#else
<p class="my-8 text-center">No hay descuentos disponibles. Por favor vuelva mas tarde. </p>
#endif
</section>
</main>
</x-layout>
discount-component
#props(['discount'])
<div
class="w-[20rem] h-auto bg-gradient-to-b from-card-light-gray to-card-main-gray p-6 rounded-2xl drop-shadow-xl md:w-[35rem] lg:w-[35rem] lg:w-[50rem] lg:h-auto mb-4">
<div class="flex-col items-center text-center justify-center h-full lg:grid lg:grid-cols-4 lg:grid-rows-4">
<a href="" class="flex justify-center lg:row-span-4 lg:-ml-10">
<img class="h-full " src="/images/pngwing.com.png" alt="" width="120" height="120">
</a>
<div
class="flex-col justify-center items-center text-center w-full lg:col-start-2 lg:col-span-full lg:row-start-1 lg:row-span-full lg:-ml-14">
<a href="/discount/1" class="lg:grid lg:row-start-2">
<h2 class="text-white font-bold text-lg md:text-2xl lg:my-2">{{ $discount->title }}</h2>
<div class="flex my-4 items-center text-center justify-center lg:my-2">
<p class="text-price-color font-bold mr-8 text-xl md:text-2xl">139,99€</p>
<p class="line-through text-white text-lg md:text-lg">149,99 (-10€)</p>
</div>
<p class="text-white my-8 text-sm md:text-lg lg:my-4">Bambas nike con 10€ de descuento y envio gratis.
Salen a
139,99€</p>
</a>
<div
class="flex-col items-center justify-center gap-2 lg:flex-row lg:inline-flex lg:col-start-2 lg:col-span-full lg:row-start-4 lg:row-end-5">
<a class="flex items-center justify-center my-2 " href="/user/1">
<img class="rounded-full mr-2" src="https://i.pravatar.cc/35"
alt="">
<p class="mr-4 text-white text-sm font-bold transition-transform hover:translate-x-0.5 md:text-lg">
JohnDoe</p>
</a>
<div class="flex items-center justify-center my-4 gap-4 lg:mx-4">
<div
class="border border-light-gray p-1 rounded-md transition-transform hover:-translate-y-0.5 cursor-pointer">
<img class="h-full" src="/images/heart.png" alt="" width="22" height="22">
</div>
<div
class="border border-light-gray p-1 rounded-md transition-transform hover:-translate-y-0.5 cursor-pointer">
<img class="h-full" src="/images/dislike.png" alt="" width="22" height="22">
</div>
<div
class="flex items-center border border-light-gray p-1 rounded-md transition-transform hover:-translate-y-0.5 cursor-pointer lg:px-4">
<img class="h-full" src="/images/comment.png" alt="" width="22" height="22">
<p class="text-light-gray ml-2">10</p>
</div>
</div>
<div class="flex justify-center lg:w-[250px] lg:-mr-14">
<button
class="flex my-4 items-center justify-center bg-gradient-to-b from-button-light-orange to-button-dark-orange p-2 rounded-md transition-transform hover:-translate-y-0.5 md:p-4 lg:w-full ">
<p class="text-light-gray mr-4 font-bold text-sm md:text-lg ">Ver Chollo</p>
<img src="/images/external-link.png" alt="" width="20" height="20">
</button>
</div>
</div>
</div>
</div>
<div
class="w-auto absolute top-5 left-5 flex-col items-center justify-center rounded-2xl bg-button-light-orange p-2 drop-shadow-lg md:flex-row md:inline-flex">
<p class="text-white text-xs uppercase font-bold mr-2 md:text-sm ">10%</p>
<p class="text-white text-xs uppercase font-bold md:text-sm ">descuento</p>
</div>
</div>
Also on the routes file i'm passing discounts but i'm a bit confused on how should I pass the data because right now i'm getting "undefined variable $discount error"
Route::get('/', function () {
return view('discounts.index', [
'discounts' => Discount::all(),
// ->where('premium','=',false)
'categories' => Category::all()
]);
})->name('home');
On the discounts._best component i'll display the discounts with more likes but this will be done in the future but I share the component too because maybe something there is what is causing the error.
<section class=" w-full text-center h-3/4 bg-light-gray flex flex-col items-center justify-center p-10">
<h1 class="uppercase text-main-gray mb-8 text-4xl font-bold">Descuentos Populares</h1>
<x-discount-card />
</section>
I searched on the Laravel Documentation about Component attributes but I dont know what i'm doing wrong and still confused.
I am using Laravel 8, Alpinejs and Livewire and having this problem:
This is my index file:
#extends('dashboard')
#section('content')
<header class="max-w-7xl mx-auto bg-white flex items-center justify-between">
<div class="mx-9 py-6 mt-4">
<h1 class="text-3xl font-bold text-gray-900">
Boards
</h1>
</div>
<div class="mx-9 py-6 mt-4">
<a href="#" #click="
$dispatch('custom-event')
"
class="w-28 text-base text-white bg-blue hover:text-gray-50 hover:bg-blue-hover rounded-xl py-2 px-3 leading-none transition ease-in duration-150 text-center">
Create new board
</a>
</div>
</header>
<livewire:boards-table
:boards="$boards"
/>
<livewire:create-board />
#endsection
When I click the "Create new board" button in the header tag, I want the create-board livewire component to be displayed. So I used #click="$dispatch('custom-event').
And here is my create-board file:
<div
x-cloak
x-data="{ isOpen: false }"
x-show="isOpen"
#keydown.escape.window="isOpen = false"
#custom-event.window="isOpen = true"
class="fixed z-20 inset-0 overflow-y-auto"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true"
>
<div class="flex items-end justify-center min-h-screen">
<div x-show.transition.opacity="isOpen" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
aria-hidden="true">
</div>
<div x-show.transition.origin.bottom.duration.300ms="isOpen"
class="modal bg-white rounded-tl-xl rounded-tr-xl overflow-hidden transform transition-all sm:max-w-lg sm:w-full">
<div class="absolute top-0 right-0 pt-6 pr-6">
<button #click="isOpen = false" class="text-gray-400 hover:text-gray-500">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="bg-white sm:p-6 my-3">
<h3 class="text-center text-xl font-bold text-gray-900">Create a new board</h3>
<form wire:submit.prevent="createBoard" action="#" method="POST" class="space-y-4 px-4 pt-6">
<div>
<input wire:model.defer="boardName" type="text"
class="w-full bg-gray-100 rounded-xl placeholder-gray-900 border-none font-semibold px-4 text-sm"
placeholder="Board name">
</div>
<div>
<input wire:model.defer="urlName" type="text"
class="w-full bg-gray-100 rounded-xl placeholder-gray-900 border-none font-semibold px-4 py-2 text-sm"
placeholder="Short name (used in board URL)">
</div>
<div class="flex items-center justify-end">
<button type="submit"
class="text-center w-44 bg-blue font-bold h-11 text-sm text-white rounded-xl border border-blue hover:bg-blue-hover transition duration-150 ease-in px-6 py-3 mr-4 mt-2">Create new board</button>
</div>
</form>
</div>
</div>
</div>
</div>
But when I click on "Create new board" button, nothing happens.
Create-board component is still rendered in the browser.
I want to show the data of table in a form for updating it.
So I'm using this code :
#foreach($castings as $cast)
<div class="card d-flex flex-row mb-3">
<a class="d-flex" href="Pages.Product.Detail.html">
<img src="img/products/fat-rascal-thumb.jpg" alt="Fat Rascal"
class="list-thumbnail responsive border-0 card-img-left"/>
</a>
<div class="pl-2 d-flex flex-grow-1 min-width-zero">
<div
class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center">
<a href="Pages.Product.Detail.html" class="w-40 w-sm-100">
<p class="list-item-heading mb-0 truncate">{{ $cast->casting_name }}</p>
</a>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_cin }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_email }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_phone }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_gender }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_address }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_city }}</p>
<div class="w-15 w-sm-100">
<span class="badge badge-pill badge-primary">PROCESSED</span>
</div>
</div>
<label class="custom-control custom-checkbox mb-1 align-self-center pr-4">
</label>
</div>
</div>
#endforeach
<div class="modal fade" id="castingmodeledit" tabindex="-1" role="dialog" aria-hidden="true">
<form method="post" class="needs-validation tooltip-label-right" id="formcastedit" novalidate
enctype="multipart/form-data">
{{ csrf_field() }}
{{ method_field('PUT') }}
<div class="modal-body">
<input type="hidden" id="id_hidden" name="id"/>
<div class="form-group position-relative error-l-50">
<label>Name</label>
<input type="text" class="form-control" name="casting_name" id="casting_name">
<div class="invalid-tooltip">Name is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CIN</label>
<input type="text" class="form-control" name="casting_cin" id="casting_cin" required>
<div class="invalid-tooltip">CIN is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>EMAIL</label>
<input type="text" class="form-control" rows="2" name="casting_email" id="casting_email" required>
<div class="invalid-tooltip">EMAIL is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>PHONE</label>
<input type="number" class="form-control" rows="2" name="casting_phone" id="casting_phone" required>
<div class="invalid-tooltip">PHONE is required!</div>
</div>
<div class="form-group position-relative">
<label>Radio</label>
<div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio1" name="casting_gender" id="casting_gender"
class="custom-control-input" required value="homme">
<label class="custom-control-label" for="jQueryCustomRadio1">Homme</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio2" name="casting_gender" id="casting_gender"
class="custom-control-input" required value="femme">
<label class="custom-control-label" for="jQueryCustomRadio2">Femme</label>
</div>
</div>
</div>
<div class="form-group position-relative error-l-50">
<label>ADDRESS</label>
<input type="text" class="form-control" rows="2" name="casting_address" id="casting_address" required>
<div class="invalid-tooltip">ADDRESS is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CITY</label>
<input type="text" class="form-control" rows="2" name="casting_city" id="casting_city" required>
<div class="invalid-tooltip">CITY is required!</div>
</div>
<button type="submit" id="createBtn" class="btn btn-primary">Update</button>
<div class="result"></div>
</div>
</form>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.editbtn').on('click', function (e) {
$('#castingmodeledit').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
console.log(data);
$('#casting_name').val(data[1]);
$('#casting_cin').val(data[2]);
$('#casting_email').val(data[3]);
$('#casting_phone').val(data[4]);
$('#casting_gender').val(data[5]);
$('#casting_address').val(data[6]);
$('#casting_city').val(data[7]);
});
});
</script>
But it does not display anything in the modal form
since I don't have the <td> and <tr> in my form I didn't know how to use them later in the ajax script
I tried to add the tr and td balise in my form but the same problem
please if you have any idea help me
Edit
I tried that
<script type="text/javascript">
$(document).ready(function(){
$('.editbtn').on('click', function(e) {
$('#castingmodeledit').modal('show');
var selector = $(this).closest('.card-body'); //get closest card div
//use .find to get values and set inside inputss
$('#casting_name').val(selector.find(".casting_name").text());
$('#casting_cin').val(selector.find(".casting_cin").text());
$('#casting_phone').val(selector.find(".casting_phone").text());
});
</scipt>
But doesn't work
Edit2
<div class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center">
<a href="Pages.Product.Detail.html" class="w-40 w-sm-100">
<p class="list-item-heading mb-0 truncate">{{ $cast->casting_name }}</p>
</a>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_cin }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_phone }}</p>
</div>
You can give classes to your p tags inside your card .Then , whenever user click on edit simply use .closest and .find() to get values from p tags and show them inside modal inputs .
Demo Code :
$('.editbtn').on('click', function(e) {
var selector = $(this).closest('.card'); //get closest card div
//use .find to get values and set inside inputss
$('#casting_name').val(selector.find(".name").text());
$('#casting_cin').val(selector.find(".cin").text());
$('#casting_email').val(selector.find(".email").text());
$('#casting_phone').val(selector.find(".phone").text());
$('#castingmodeledit input[value=' + selector.find(".gender").text().trim() + ']').prop('checked', true);
$('#casting_address').val(selector.find(".address").text());
$('#casting_city').val(selector.find(".city").text());
$('#castingmodeledit').modal('show');
});
.invalid-tooltip {
display: none
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="card d-flex flex-row mb-3">
<a class="d-flex" href="Pages.Product.Detail.html">
<img src="img/products/fat-rascal-thumb.jpg" alt="Fat Rascal" class="list-thumbnail responsive border-0 card-img-left" />
</a>
<div class="pl-2 d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center">
<!--added classes-->
<a href="Pages.Product.Detail.html" class="w-40 w-sm-100">
<p class="list-item-heading mb-0 truncate name">abcw22</p>
</a>
<p class="mb-0 text-muted text-small w-15 w-sm-100 cin">2</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 email">a#gmaile.com</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 phone">13456</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 gender">homme</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 address">abwwc xyz..</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 city">Mum</p>
<div class="w-15 w-sm-100">
<span class="badge badge-pill badge-primary">PROCESSED</span>
</div>
</div>
<label class="custom-control custom-checkbox mb-1 align-self-center pr-4">
<a href="#" class="glyph-icon iconsminds-folder-edit editbtn" >Edit</a>
</label>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<a class="d-flex" href="Pages.Product.Detail.html">
<img src="img/products/fat-rascal-thumb.jpg" alt="Fat Rascal" class="list-thumbnail responsive border-0 card-img-left" />
</a>
<div class="pl-2 d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center">
<a href="Pages.Product.Detail.html" class="w-40 w-sm-100">
<p class="list-item-heading mb-0 truncate name">abcw</p>
</a>
<p class="mb-0 text-muted text-small w-15 w-sm-100 cin">1</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 email">a#gmail.com</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 phone">134536</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 gender">homme</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 address">abwwc xyz..</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 city">Mum</p>
<div class="w-15 w-sm-100">
<span class="badge badge-pill badge-primary">PROCESSED</span>
</div>
</div>
<label class="custom-control custom-checkbox mb-1 align-self-center pr-4">
<a href="#" class="glyph-icon iconsminds-folder-edit editbtn" >Edit</a>
</label>
</div>
</div>
<div class="modal fade" id="castingmodeledit" tabindex="-1" role="dialog" aria-hidden="true">
<button type="button" class="close" data-dismiss="modal">×</button>
<form method="post" class="needs-validation tooltip-label-right" id="formcastedit" novalidate enctype="multipart/form-data">
{{ csrf_field() }} {{ method_field('PUT') }}
<div class="modal-body">
<input type="hidden" id="id_hidden" name="id" />
<div class="form-group position-relative error-l-50">
<label>Name</label>
<input type="text" class="form-control" name="casting_name" id="casting_name">
<div class="invalid-tooltip">Name is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CIN</label>
<input type="text" class="form-control" name="casting_cin" id="casting_cin" required>
<div class="invalid-tooltip">CIN is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>EMAIL</label>
<input type="text" class="form-control" rows="2" name="casting_email" id="casting_email" required>
<div class="invalid-tooltip">EMAIL is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>PHONE</label>
<input type="number" class="form-control" rows="2" name="casting_phone" id="casting_phone" required>
<div class="invalid-tooltip">PHONE is required!</div>
</div>
<div class="form-group position-relative">
<label>Radio</label>
<div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio1" name="casting_gender" id="casting_gender" class="custom-control-input" required value="homme">
<label class="custom-control-label" for="jQueryCustomRadio1">Homme</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio2" name="casting_gender" id="casting_gender" class="custom-control-input" required value="femme">
<label class="custom-control-label" for="jQueryCustomRadio2">Femme</label>
</div>
</div>
</div>
<div class="form-group position-relative error-l-50">
<label>ADDRESS</label>
<input type="text" class="form-control" rows="2" name="casting_address" id="casting_address" required>
<div class="invalid-tooltip">ADDRESS is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CITY</label>
<input type="text" class="form-control" rows="2" name="casting_city" id="casting_city" required>
<div class="invalid-tooltip">CITY is required!</div>
</div>
<button type="submit" id="createBtn" class="btn btn-primary">Update</button>
<div class="result"></div>
</div>
</form>
</div>
I'm using laravel livewire and I've created a page that you can select a date for when you want the post
to publish. When I create a new post and save the date then it saves fine in the database, but if I try
to edit the post and change the date the date that I saved in the database isn't showing in the form.
Here is my code.
My EditPost.php
<?php
namespace App\Http\Livewire;
use App\Models\Post;
use Livewire\Component;
class EditPost extends Component
{
public $name;
public $publishDate;
public Post $post;
public function mount(Post $post)
{
$this->name = $post->name;
$this->publishDate = $post->publish_date;
}
public function render()
{
return view('livewire.edit-post');
}
}
and this is my edit.blade.php
<div>
<div class="mt-10 sm:mt-0">
<div class="md:grid md:grid-cols-3 md:gap-6">
<div class="md:col-span-1">
<div class="px-4 sm:px-0">
<h3 class="text-lg font-medium leading-6 text-gray-900">Edit Post</h3>
</div>
</div>
<div class="mt-5 md:mt-0 md:col-span-2">
<div class="form">
<div class="shadow overflow-hidden sm:rounded-md">
<div class="px-4 py-5 bg-white sm:p-6">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6 sm:col-span-3">
<label for="name" class="block text-sm font-medium leading-5 text-gray-700">Name</label>
<input id="name" wire:model="name" class="#error('name') border border-red-500 #enderror mt-1 form-input block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5">
#error('name')
<small>
<div class="text-red-500">{{ $message }}</div>
</small>
#enderror
</div>
<div class="col-span-6 sm:col-span-4">
<label for="publish_date" class="block text-sm font-medium leading-5 text-gray-700">Publish Date</label>
<input id="publish_date" wire:model="publishDate" type="date" class="mt-1 form-input block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5">
</div>
</div>
</div>
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
<button wire:click="editPost" class="py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 shadow-sm hover:bg-indigo-500 focus:outline-none focus:shadow-outline-blue active:bg-indigo-600 transition duration-150 ease-in-out">
Save
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have a pivot table that links my products and categories together. What I'm trying to do is in my edit page for a product I
have a list of all the categories and each category has a toggle button that will enable or disable that category for that product.
The problem I'm having is that all my categories is set to enabled, but I only have one enabled and the rest is supposed to be disabled
I'm using laravel 8 and livewire
Here is my code
namespace App\Http\Livewire\Products;
use App\Models\Product;
use Livewire\Component;
use App\Models\Category;
class Edit extends Component
{
public Product $product;
public bool $enabled;
public $name;
public $description;
public function mount()
{
$pcPivot = $this->product->categories()->where('product_id', $this->product->id)->exists();
if($pcPivot === true)
{
$this->enabled = true;
}else{
$this->enabled = false;
}
$this->name = $this->product->name;
$this->description = $this->product->description;
}
public function render()
{
$categories = Category::all();
return view('livewire.products.edit', [
'categories' => $categories,
]);
}
}
and here is my edit.blade.php
<div>
<div class="md:grid md:grid-cols-3 md:gap-6">
<div class="md:col-span-1">
<div class="px-4 sm:px-0">
<h3 class="text-lg font-medium leading-6 text-gray-900">Edit Product</h3>
</div>
</div>
<div class="mt-5 md:mt-0 md:col-span-2">
<div class="shadow sm:rounded-md sm:overflow-hidden">
<form wire:submit.prevent="submit">
<div class="px-4 py-5 bg-white sm:p-6">
<div class="grid grid-cols-3 gap-6">
<div class="col-span-3 sm:col-span-2">
<label for="title" class="block text-sm font-medium leading-5 text-gray-700">
Name
</label>
<div class="rounded-md shadow-sm">
<input id="name" wire:model="product.name" class="flex-1 form-input block w-full min-w-0 transition duration-150 ease-in-out sm:text-sm sm:leading-5">
</div>
</div>
</div>
</div>
<div class="px-4 py-5 bg-white sm:p-6">
<div class="grid grid-cols-3 gap-6">
<div class="col-span-3 sm:col-span-2">
<label for="description" class="block text-sm font-medium leading-5 text-gray-700">
Description
</label>
<div class="rounded-md shadow-sm">
<textarea id="description" wire:model="product.description" rows="3" class="form-textarea mt-1 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"></textarea>
</div>
</div>
</div>
</div>
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
<span class="inline-flex rounded-md shadow-sm">
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
Update
</button>
</span>
</div>
</form>
</div>
</div>
</div>
#include('spacer')
<div class="md:grid md:grid-cols-3 md:gap-6">
<div class="md:col-span-1">
<div class="px-4 sm:px-0">
<h3 class="text-lg font-medium leading-6 text-gray-900">Categories</h3>
</div>
</div>
<div class="mt-5 md:mt-0 md:col-span-2">
<div class="shadow sm:rounded-md sm:overflow-hidden">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr>
<x-th>Title</x-th>
<x-th>Enable/Disable</x-th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
#foreach($categories as $category)
<tr>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="flex items-center">
<div class="text-sm font-medium text-gray-900">
{{ $category->title }}
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="mt-1 flex rounded-md">
<span role="checkbox" tabindex="0" aria-checked="false" class="#if($enabled) bg-indigo-600 #else bg-gray-200 #endif relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline">
<span aria-hidden="true" class="#if($enabled) translate-x-5 #else translate-x-0 #endif inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200">
<input id="enabled" type="checkbox" wire:model="enabled" class="invisible">
</span>
</span>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
If you check the documentation for Livewire, at lifecycle hooks... you will see that:
mount : Runs once, immediately after the component is instantiated, but before render() is called
So basically you are getting an "enabled" value once, before rendering the component,then you start rendering it, with that foreach, using the same "enabled" from mount for each item of your dataset.
Consider building your cursor with the enabled value inside for each record.