In my laravel Vue application, I have a vue with datatable to display some user records.
Above my datatable I have a button to add records.
Once when an user clicks on the button it should open a modal.
But I have my modal in a blade.
Following is my vue code for the button (view-docs.vue),
<open-overlay direction-from="top" identifier="addDocumentModal">
<cs-button>
Add document
</cs-button>
</open-overlay>
And my modal .blade is,
<form
method="post"
action="{{ route('dashboard.profile.otherDocuments.store.manual', ['locale' => app()->getLocale()]) }}"
enctype="multipart/form-data"
ref="addDocumentModal"
>
#csrf
<overlay direction-from="top" identifier="addDocumentModal" open="{{ isset($add_another_documents) ? 'true' : null }}" >
<div class="cs--dashboard-edit-modal w-full h-full absolute bottom-0 ">
<div class="cs--modal-content flex">
<div class="relative w-full">
<div class="cs--reveal-container bg-white w-full rounded shadow-soft mr-8 h-full">
<!--Modal title-->
<div class="flex justify-between items-center border-b border-certstyle-border px-10 py-3">
<h3 class="text-2xl leading-10 text-certstyle-titles font-bold my-2 flex items-center">
<span class="border-l-2 border-certstyle-orange inline-block h-6 mr-2"></span>
<span>{{ __('pages/other-documents.add-document') }}</span>
</h3>
<div class="h-full flex items-center cs--reveal transition-all duration-500"></div>
</div>
<div>
<!--Modal content-->
<div class="bg-certstyle-background-light w-full h-full px-10 pt-8 pb-10">
<!--Name-->
<div class="mb-5 relative z-30">
<p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/other-documents.name') }}</p>
<div class="h-12 relative z-10">
<input value="{{ old('name') }}" name="name" id="add_name_input" type="text" class=" form-input w-full relative z-10" >
</div>
<validator identifier="addDocument" name="add_name_input" selector="id" rules="{{$validations['required']}}"></validator>
</div>
<div class="flex justify-between">
<!--Completed at-->
<div class="w-1/2 mr-2">
<p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/add-certificate.date-of-issue') }}</p>
<validator-v2 identifier="addDocument" name="issued_at" rules="{{$validations['required']}}">
<div class="h-12">
<cs-date-picker value="{{ old('issued_at') != null ? Carbon\Carbon::parse(old('issued_at'))->format('Y-m-d') : '' }}" id="minimumDate" name="issued_at"></cs-date-picker>
</div>
</validator-v2>
</div>
<!--Expiration date-->
<div class="w-1/2 ml-2">
<p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/add-certificate.expiry-date') }}</p>
<validator-v2 identifier="addDocument" name="expires_at" depends-on-name="does_not_expire" :rules="{{$validations['expiry_date_must_be_same_or_after']}}">
<div class="h-12">
<cs-date-picker value="{{ old('expires_at') != null ? Carbon\Carbon::parse(old('expires_at'))->format('Y-m-d') : '' }}" name="expires_at"></cs-date-picker>
</div>
</validator-v2>
</div>
</div>
<div class="flex justify-between">
<!--Completed at-->
<div class="w-1/2 mr-2">
<div class="mb-4">
<label class="inline-flex items-center focus:outline-none checkbox--container mt-2">
<input type="checkbox" name="does_not_expire">
<span class="checkbox--checkmark flex items-center justify-center ">
<svg class="icon text-certstyle-orange feather feather-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span style="bottom: 4px;" class="text-certstyle-text font-normal text-sm relative">{{ __('pages/add-certificate.document-does-not-expire') }}</span>
</label>
</div>
</div>
</div>
<!--Upload document-->
<div class="mb-1">
<dashboard-input-label identifier="document" :settings="{help: true, helpDirection: 'left'}">
{{ __('pages/add-certificate.upload-document') }}
<template slot="helpText">
Maximum filesize is {{ config('file-upload.max_file_size') }} MB.
The default allowed file extensions are: pdf, jpeg and png.
</template>
</dashboard-input-label>
<validator-v2 identifier="addDocument" name="document_file" :rules="{{$validations['required']}}">
<custom-file-upload :max-upload-file-size="{{ config('file-upload.max_file_size') }}" name="document_file"></custom-file-upload>
</validator-v2>
</div>
<!--Certificate number-->
<div class="mb-1">
<p class="inline-block text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/other-documents.document-number') }}</p>
<div class="relative">
<validator-v2 identifier="addDocument" name="document_number" depends-on-name="no_document_number" :rules="{{$validations['required_unless']}}">
<input value="{{ old('document_number') }}" name="document_number" id="add_document_number_input" type="text" class=" form-input w-full relative z-10" >
<input-annotation identifier="document_number">
{{ __('pages/other-documents.fill-document-number-1') }}
</input-annotation>
<label class="inline-flex items-center focus:outline-none checkbox--container mt-2">
<input type="checkbox" name="no_document_number">
<span class="checkbox--checkmark flex items-center justify-center">
<svg class="icon text-certstyle-orange feather feather-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span style="bottom: 4px;" class="text-certstyle-text font-normal text-sm relative">{{ __('pages/other-documents.document-has-no-document-number') }}</span>
</label>
</validator-v2>
</div>
</div>
</div>
<!--Modal actions-->
<div class="flex justify-between border-certstyle-border bg-white border-t px-8 py-8 relative ">
<close-overlay identifier="addDocumentModal">
<div class="text-certstyle-text-light border-certstyle-border rounded border px-6 py-2 mr-4 hover:bg-certstyle-background cursor-pointer">{{ __('pages/add-certificate.cancel') }}</div>
</close-overlay>
<div class="flex justify-right flex justify-right space-x-5">
<document-submit-button
caption="{{ __('pages/add-certificate.save-and-close') }}"
buttonclass="bg-white text-certstyle-orange border-certstyle-orange border rounded font-bold px-6 py-2 cursor-pointer"
name="saveAndClose"
identifier="saveAndClose"
></document-submit-button>
<document-submit-button
caption="{{ __('pages/add-certificate.save-and-add-new') }}"
buttonclass="text-white bg-gradient-br-orange rounded border font-bold px-6 py-2 cursor-pointer"
name="saveAndNew"
identifier="saveAndNew"
></document-submit-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</overlay>
</form>
How can I open up this modal when I click on my vue button?
use clink event on button and call function.
in that function link router.js file's function.
in router.js, function should look like this,
{
path: '/yourpath which is in api.php or web.php have',
name: 'same as path name to remember easily',
meta: {
requiresAuth: true, //authentication require
roles: ['superadmin','admin'] //roles to be define
},
component: () => import('../your vue file path/myFile.vue'),
},
after this, create route in in api.php file and call function of that controller.
in controller view your blade file code like below.
view('.blade filename');
and it's done thank you.
Related
can anyone fix that for me really I spend a lot of time trying different solutions never works.
I use a tailwindcss template for the modal and javascript to show it or hide it.
I don't find the solution can anyone fix it, My modal just works fine for the first row of the table and did not work for the rest of rows
<!-- component -->
<div class="overflow-x-auto">
<div class="min-w-screen min-h-screen flex items-start justify-center font-sans overflow-hidden">
<div class="w-full lg:w-5/6">
<div class="bg-white shadow-md rounded my-6">
<table class="min-w-max w-full table-auto">
<thead>
<tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
<th class="py-3 px-6 text-left">Event Title</th>
<th class="py-3 px-6 text-left">Description</th>
<th class="py-3 px-6 text-center">Date</th>
<th class="py-3 px-6 text-center">Image</th>
<th class="py-3 px-6 text-center">Status</th>
<th class="py-3 px-6 text-center">Actions</th>
</tr>
</thead>
<tbody class="text-gray-600 text-sm font-light">
#foreach ($events as $event)
<tr class="border-b border-gray-200 hover:bg-gray-100">
<td class="py-3 px-6 text-left whitespace-nowrap">
<div class="flex items-center">
<span class="font-medium">{{ $event->title }}</span>
</div>
</td>
<td class="py-3 px-6 text-left">
<div class="flex items-center">
<span>{{ $event->description }}</span>
</div>
</td>
<td class="py-3 px-6 text-center">
<div class="flex items-center justify-center">
<span class="font-medium">{{ $event->date }}</span>
</div>
</td>
<td class="py-3 px-6 text-center">
<div class="flex items-center justify-center">
<img class="w-6 h-6 rounded-full border-gray-200 border -m-1 transform hover:scale-125" src="{{ Storage::url($event->image) }}" alt="{{ $event->place }}"/>
</div>
</td>
<td class="py-3 px-6 text-center">
#if(($event->status)==1)
<span class="bg-purple-200 text-purple-600 py-1 px-3 rounded-full text-xs">Active</span>
#else
<span class="bg-red-200 text-red-600 py-1 px-3 rounded-full text-xs">Pending</span>
#endif
<!--<span class="bg-green-200 text-green-600 py-1 px-3 rounded-full text-xs">Completed</span>-->
</td>
<td class="py-3 px-6 text-center">
<div class="flex item-center justify-center">
<div class="w-4 mr-4 transform hover:text-red-700 hover:scale-110">
<a href="{{ route('events.edit',$event->id) }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</a>
</div>
<!--------My delete buttton------------------>
<div class="w-4 mr-2 transform hover:text-red-700 hover:scale-110">
<a class="delete-btn" >
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</a>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
{!! $events->links() !!}
</div>
</div>
</div>
</div>
<!-- delet event confiming model-->
<div class="relative z-10 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true" id="overlay">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" ></div>
<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<!-- Heroicon name: outline/exclamation-triangle -->
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v3.75m-9.303 3.376C1.83 19.126 2.914 21 4.645 21h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 4.88c-.866-1.501-3.032-1.501-3.898 0L2.697 17.626zM12 17.25h.007v.008H12v-.008z" />
</svg>
</div>
<form action="{{ route('events.destroy',$event->id) }}" method="POST">
#csrf
#method('DELETE')
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Delete an Event</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">Are you sure you want to delete the event? All of the event data will be permanently removed. This action cannot be undone.</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button type="submit" class="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">Delete</button>
<button type="button" class="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" id="close-modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- delet event confiming model script-->
<script>
window.addEventListener('DOMContentLoaded', () =>{
const overlay = document.querySelector('#overlay')
const delBtn = document.querySelector('.delete-btn')
const closeBtn = document.querySelector('#close-modal')
const toggleModal = () => {
overlay.classList.toggle('hidden')
overlay.classList.toggle('flex')
}
delBtn.addEventListener('click', toggleModal)
closeBtn.addEventListener('click', toggleModal)
})
</script>
Taken directly from the MDN documentation:
The Document method querySelector() returns the first Element within
the document that matches the specified selector, or group of
selectors. If no matches are found, null is returned.
So regardless of the number of elements you have in your document with a class of delete-btn, using document.querySelector('.delete-btn') will only ever return the first element it finds.
As you want to be able to apply an event listener to all elements with the delete-btn class, what you really want is the querySelectorAll() method.
The Document method querySelectorAll() returns a static (not live)
NodeList representing a list of the document's elements that match the
specified group of selectors.
The NodeList returned from calling document.querySelectorAll('.delete-btn'); is a collection (similar concept to an array) which contains all the elements located with the specified selector. As this is a collection and not a single element, you need to iterate over each of the collection elements and attach an eventListener to each iteration.
So applying the above to your use case, you might do:
window.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.delete-btn').forEach((btn) => {
btn.addEventListener('click', function(evt) {
toggleModal();
})
})
});
An example CodePend for reference.
I want to get these elements to move over to the right. The name is in the correct spot I just want the 4 elements to the right to move over with some slight padding on the outside. Thanks.
here is the code snippet:
<!-- Header/top nav bar -->
<header class="py-6">
<nav class="container flex justify-between items-center mx-auto px-8 md:px-14 lg:px-10 w-full">
<div class="me-auto text-lg font-bold"> Jordan DeGiacomo </div>
<button class="hidden" id="hamburger">
<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 17.5H0.25V14.6667H13V17.5ZM25.75 10.4167H0.25V7.58333H25.75V10.4167ZM25.75 3.33333H13V0.5H25.75V3.33333Z" fill="white"/></svg>
</button>
<ul class="hidden md:flex space-x-12 items-center" id="nav-ul">
<li>Home</li>
<li>Languages</li>
<li>Projects</li>
<li><button class="px-6 py-2 bg-theme font-bold"> Hire Me </button></li>
</ul>
<button class="px-4 py-1 font-bold bg-theme md:hidden"> Hire Me </button>
<!-- <div class="md:hidden">
<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 17.5H0.25V14.6667H13V17.5ZM25.75 10.4167H0.25V7.58333H25.75V10.4167ZM25.75 3.33333H13V0.5H25.75V3.33333Z" fill="white"/></svg>
</div> -->
</nav>
<!-- side nav bar -->
<div class="container mt-16 flex justify-between items-center mx-auto px-8 md:px-14 lg:px-10 w-full">
<div class="flex flex-wrap md:flex-nowrap">
<nav class="inline-block lg:mr-24 lg:w-4 fixed left-percentage hidden xl:block">
<div class="absolute left-50 transform -translate-x-1/2 space-y-6 mt-36">
<a href="#" class="nav-dot selected-circle block w-7 h-7 rounded-full border-4 border-nav bg-body">
<span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Home</span>
</a>
<a href="#languages" class="nav-dot block w-7 h-7 rounded-full border-4 border-nav bg-body">
<span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Languaages</span>
</a>
<a href="#projects" class="nav-dot block w-7 h-7 rounded-full border-4 border-nav bg-body">
<span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Projects</span>
</a>
<a href="#hire" class="nav-dot block w-7 h-7 rounded-full border-4 border-nav bg-body">
<span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Hire</span>
</a>
</nav>
Here is a screenshot of the nav bar
Since you already have the justify-between just wrap the stuff you want moved to the right inside a div as follows:
<nav class="container flex justify-between items-center mx-auto px-8 md:px-14 lg:px-10 w-full">
<!-- left side div -->
<div class="me-auto text-lg font-bold"> Jordan DeGiacomo </div>
<!-- right side div -->
<div>
<button class="hidden" id="hamburger">
<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13 17.5H0.25V14.6667H13V17.5ZM25.75 10.4167H0.25V7.58333H25.75V10.4167ZM25.75 3.33333H13V0.5H25.75V3.33333Z"
fill="white" />
</svg>
</button>
<ul class="hidden md:flex space-x-12 items-center" id="nav-ul">
<li>Home</li>
<li>Languages</li>
<li>Projects</li>
<li><button class="px-6 py-2 bg-theme font-bold"> Hire Me </button></li>
</ul>
<button class="px-4 py-1 font-bold bg-theme md:hidden"> Hire Me </button>
</div>
</nav>
Try using CSS to style the element -
/* for float alignment */
element {
float: right;
}
Or for absolute positioning
element {
position: absolute;
right: 0;
}
I have run my Vue JS app in development server multiple times and never faced a single issue with any of the functions. However, as soon as I deploy my application in the production server everything except this specific discount function causes my system to crash.
So after selecting one of the option (either amount or percentage) and as soon as I type in the value inside the input box, my application stops working.
I am still very new to web app development so it would be great if someone can help me out with this. TIA
This is my function that I am using to calculate discounts:
applyDiscount(){
this.balance=this.totalCost-this.totalPaid
if(this.isPercentage=='Percentage'){
if(this.discountAmount<=100 ){
this.discount=(this.totalCost/100)*this.discountAmount
this.form.discount=this.discount
this.str=""
if(this.discount<=this.totalCost-this.totalPaid){
this.adjustment=this.totalCost-this.discount
this.balance=this.balance-this.discount
this.str=""
}
else{
this.str="Discount amount exceeding balance"
}
}
else{
this.str="Percentage is exceeding 100%"
}
}else if(this.isPercentage=='Amount'){
this.str=""
this.discount=this.discountAmount
this.form.discount=this.discount
if(this.discount<=this.totalCost-this.totalPaid){
this.adjustment=this.totalCost-this.discount
this.balance=this.balance-this.discount
this.str=""
}
else{
this.str="Discount amount exceeding balance"
}
}
},
This template code:
<!--discount-->
<form #submit.prevent>
<div class="tracking-widest text-lg text-left title-font font-bold text-gray-500 border-b border-gray-300 ">
Discount:
</div>
<!--discount-->
<div class="inline-flex items-center mt-3 ">
<label for="" class="mb-3 text-gray-800">Give discount in?</label>
<input type="radio" name="test_id" #change="onChange($event)" value="Amount" class="form-radio h-5 w-5 text-indigo-600 mr-2" ><span class="ml-2 mr-2 text-gray-700">Amount</span>
<input type="radio" name="test_id" #change="onChange($event)" value="Percentage" class="form-radio h-5 w-5 text-indigo-600 mr-1"><span class="ml-2 mr-2 text-gray-700">Percentage</span>
</div>
<div class="flex justify-start">
<div class="">
<label class="text-gray-700 dark:text-gray-200" for="discount">Discount Amount</label>
<input #keypress="isNumber($event)" v-model.number="discountAmount" id="discount" type="text"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
</div>
</div>
<div>{{this.applyDiscount()}}</div>
<!--discount-->
<div v-if="this.str.length>=1">
<div class=" flex items-center mt-10 px-8">
<svg class="h-6 w-6 fill-current text-red-400 mr-4" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path
d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
</svg>
<div>
<p class="font-medium text-red-500">{{str}}</p>
</div>
</div>
</div>
<!--after discount-->
<div class="flex justify-end items-end ml-6" >
<div class=" mt-5 w-full sm:w-2/4 lg:w-1/4">
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Total Cost:</span> <span
class="text-lg rounded ml-2 text-gray-500 "><span class="text-xl" >৳{{this.totalCost}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Total Paid:</span> <span
class="text-lg rounded ml-2 text-gray-500 "><span class="text-xl" >৳{{this.totalPaid}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Discount:</span> <span
class="text-lg ml-2 text-gray-600"><span class="text-xl" >৳{{this.discount}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Adjustment:</span> <span
class="text-lg ml-2 text-gray-600"><span class="text-xl" >৳{{this.totalCost-this.discount}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Balance:</span> <span
class="text-lg ml-2 text-gray-600"><span class="text-xl" >৳{{this.balance}}</span></span> </div>
<div class="w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
</div>
</div>
</form>
<!--form-->
</div>
</div>
<!--discount-->
I am sort of posting all of it since I can't really figure out what the issue is.
I have a problem that I do not know how to solve.
Basically it is a twitter-like page, which has two buttons: create new tweet and reply to tweet, which has modal code and javascript that opens a box to write a reply.
Everything is basically a same page. (even though is in 2-3 files that #include)
I need to know somehow which button opened a modal, so I can treat it differently.
Variable in PHP doesn't work as noting really needs server input, all is happening on a same page in front end.
Blade code or Javascript. I just need a flag so I can fill a route, and maybe if reply, add "#username" in body of textarea.
Code is too big to paste but a link that open modal is (example reply button)
<a class="modal-open cursor-pointer" title="{{ __('lang.replyTweet') }}">
<img src="{{ asset('/images/speech-bubble.png') }}" width="16" height="16">
</a>
Code of modal
<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">
<!--Title-->
<div class="flex justify-between items-center pb-3">
<p class="text-2xl font-bold">{{ __('lang.createTweet') }}</p>
<div class="modal-close cursor-pointer z-50">
<svg class="fill-current text-black" 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>
</div>
</div>
<div class="modal-body">
<form method="POST" action="{{ route('createTweet') }}" enctype="multipart/form-data">
#csrf
{{-- #method('PUT') --}}
<div class="form-group row">
<div class="col-md-6">
<textarea name="Tweet_body" id="Tweet_body" cols="45" rows="5" maxlength="250" autofocus placeholder="Tweet minimum 10 letters..."></textarea>
{{-- <input type="text" name="reply" value="{{ $replyModal }}" class="hidden"> --}}
</div>
</div>
<div class="flex flex-col-3 pt-2">
<div class="w-10 h-10">
<label class="cursor-pointer" title="{{ __('lang.uploadimage') }}" >
<img src="{{ asset('/images/uploadphoto.png') }}" alt=""
width="24" height="24">
<input type="file" name="cvrimg" class="hidden">
</label>
</div>
<div class="w-full">
#if (env('CUSTOM_NSFW_EXISTS') == true)
<label for="isNSFW" class="inline-flex items-center">
<input id="isNSFW" type="checkbox" class="ml-4 rounded border-gray-300 text-indigo-600
shadow-sm focus:border-indigo-300
focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="nsfw">
<span class="ml-2 text-sm text-red-600 font-extrabold">{{ __('lang.NSFWcontent') }}</span>
</label>
#endif
</div>
<div class="">
<button type="submit"
class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">{{ __('lang.tweet') }}</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
var openmodal = document.querySelectorAll('.modal-open')
for (var i = 0; i < openmodal.length; i++) {
openmodal[i].addEventListener('click', function (event) {
event.preventDefault()
toggleModal()
})
}
const overlay = document.querySelector('.modal-overlay')
overlay.addEventListener('click', toggleModal)
var closemodal = document.querySelectorAll('.modal-close')
for (var i = 0; i < closemodal.length; i++) {
closemodal[i].addEventListener('click', toggleModal)
}
document.onkeydown = function (evt) {
evt = evt || window.event
var isEscape = false
if ("key" in evt) {
isEscape = (evt.key === "Escape" || evt.key === "Esc")
} else {
isEscape = (evt.keyCode === 27)
}
if (isEscape && document.body.classList.contains('modal-active')) {
toggleModal()
}
};
function toggleModal() {
const body = document.querySelector('body')
const modal = document.querySelector('.modal')
modal.classList.toggle('opacity-0')
modal.classList.toggle('pointer-events-none')
body.classList.toggle('modal-active')
}
</script>
there are nothing to do in this with both PHP & laravel.
actually this is depends on your modal lib , if you are using bootstrap modals you can listen to an event when the modal is open :
$('#modal').on('show.bs.modal', (ev) => {
let o = $(ev.relatedTarget), t = $(ev.currentTarget);
});
here you can simply set a data attribute in each button to differentiate between them. and in the modal callback you can check for this value to decide you rest of logic.
all
I have an admin panel for my Laravel 7 application and I want to have a popup modal when I hit the edit button. this modal should show the correct user selected but it doesn't ist just showing the last user (user 10 because I have it paginated to 10 per page. I have a for each loop with all the user (paginated). I'm using alpine js to load the modal. Is there a way with javascript to pass the correct user through?
I have also tried using jquery creating a unique modal for each user but that didn't work either
#foreach($users as $user)
<tr class="text-white pt-2">
<td class="text-center">{{ $user->id }}</td>
<td class="text-center">{{ $user->firstName }} {{ $user->lastName }}</td>
<td class="text-center">{{ $user->email }}</td>
<td class="text-center">{{ implode(', ', $user->roles()->get()->pluck('name')->toArray())}}</td>
<td class="text-center">
<button #click="open = true" ><i class="fas fa-pen"></i></button>
</td>
</tr>
#endforeach
This is my Modal
<!-- Modal -->
<form action="{{ route('admin.users.update', $user) }}" method="POST">
#CSRF
#method('put')
<div class="modal pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center" x-show="open">
<div class="modal-overlay absolute w-full h-full bg-gray-700 opacity-50"></div>
<div class="modal-container bg-white w-5/12 mx-auto rounded shadow-lg z-50 overflow-y-auto bg-gray-900 text-white container px-5" #click.away="open = false">
<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" #click="open = false">
<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>
<!-- Add margin if you want to see some of the overlay behind the modal-->
<div class="modal-content py-4 text-left px-6">
<!--Title-->
<div class="flex justify-between items-center pb-3">
<p class="text-2xl font-bold">Edit User {{ $user->id}}</p>
<div class="modal-close cursor-pointer 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>
</div>
</div>
<!--Body-->
<div class="flex justify-start">
<div class="w-1/2">
<div class="flex flex-wrap">
<p class="w-full text-sm">Name:</p>
<p class="w-full pb-4">{{ $user->firstName }} {{ $user->lastName }}</p>
<p class="w-full text-sm">Email:</p>
<p class="w-full pb-4">{{ \Illuminate\Support\Str::limit($user->email, 25, $end='...') }}</p>
</div>
</div>
<div class="w-1/2">
<div class="flex justify-start mb-3">
<div class="flex flex-wrap">
#foreach($roles as $role)
<label class="custom-label flex w-full py-1">
<div class="bg-gray-700 shadow w-6 h-6 p-1 flex justify-center items-center mr-2">
<input type="checkbox" class="hidden" name="roles[]" value="{{ $role->id }}" #if($user->roles->pluck('id')->contains($role->id)) checked #endif >
<svg class="hidden w-4 h-4 text-white pointer-events-none" viewBox="0 0 172 172"><g fill="none" stroke-width="none" stroke-miterlimit="10" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode:normal"><path d="M0 172V0h172v172z"/><path d="M145.433 37.933L64.5 118.8658 33.7337 88.0996l-10.134 10.1341L64.5 139.1341l91.067-91.067z" fill="currentColor" stroke-width="1"/></g></svg>
</div>
<span>{{$role->name}}</span>
</label>
#endforeach
</div>
</div>
</div>
</div>
<div class="flex justify-end">
<button type="submit" class="px-4 bg-gray-600 p-2 rounded-lg text-white hover:bg-gray-100 hover:text-indigo-400 mr-2">Update</button>
</div>
</div>
</div>
</div>
</form>
Your $user variable is never assigned when you hit the edit button, meaning it will show the last value from your iteration.
This is not possible using just PHP.
You need to use javascript to dynamically change the values of your modal form before showing it.
You cant have an error in webpackmix.js.
In my case I change:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
for
mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css');
all content in one line.