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.
Related
I am working on a react project using vite and for css I am using tailwind css. From the component section of tailwind css website I have copied template, and I am unable to get responsive functionality and show/hide menu on click
below is my header code
<nav class="bg-gray-800">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg class="hidden h-6 w-6" 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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex flex-shrink-0 items-center">
<img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company"/>
</div>
<div class="hidden sm:ml-6 sm:block">
<div class="flex space-x-4">
Dashboard
Team
Projects
Calendar
</div>
</div>
</div>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" 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="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
<div class="relative ml-3">
<div>
<button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
</button>
</div>
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
Your Profile
Settings
Sign out
</div>
</div>
</div>
</div>
</div>
<div class="sm:hidden" id="mobile-menu">
<div class="space-y-1 px-2 pt-2 pb-3">
Dashboard
Team
Projects
Calendar
</div>
</div>
</nav>
everything is working fine but by running the above code I am getting only ui and not getting click function on menu bars or other
see the image below
[
let menuMovilButton = document.getElementById('menu-movil-button');
let userMenuButton = document.getElementById('user-menu-button');
let userMenu = document.getElementById('user-menu');
let menuMovil = document.getElementById('menu-movil');
menuMovilButton.addEventListener('click', () =>{
menuMovil.classList.toggle('hidden');
});
userMenuButton.addEventListener('click', () =>{
userMenu.classList.toggle('hidden');
});`
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 am really stuck on this
I have created a json-server and would like to create a new card with every new entry in the json. I believe it is done by using document.createElement
Could someone please help by providing the function I need to make this happen, the REST API is working so no issues there. I just need to create a new card with the {$image} and {$name} as per the json
<div class="mt-8 grid lg:grid-cols-6 gap-10">
<!-- cards go here -->
<div id="card" class="card hover:shadow-lg">
<img src="**IMAGE**" alt="stew" class="h-48 sm:h-48 w-full object-cover">
<div class="badge">
<svg class="inline-block w-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor" viewBox="0 0 10 10"></svg>
<span>**NAME**</span>
</div>
Here is an example I found online for it working but for a table layout
function td_fun({ profile, name, email, status, role}){
let td = document.createElement('tr');
td.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img src="${profile}" class="h-10 w-10 rounded-full" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
${name}
</div>
<div class="text-sm text-gray-500">
${email}
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
${status}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="text-sm text-gray-500">${role}</span>
</td>
`;
return td; }
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.
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.