1,134 questions
0
votes
0
answers
77
views
Uncaught ReferenceError: Alpine is not defined in Laravel Livewire app
Context:
I am using Laravel 8 with Livewire.
Alpine.js is installed via npm in my package.json:
"devDependencies": {
"alpinejs": "^3.15.2"
}
I am not using a ...
3
votes
1
answer
39
views
Laravel Livewire/Eloquent: Position update fails when moving task to first position (index 1) of a different list
My application uses Laravel Livewire with Alpine.js/SortableJS for drag-and-drop reordering of tasks between status columns. The tasks have a status (string) and a position (integer) in the database.
...
0
votes
0
answers
31
views
How to properly coordinate consecutive Livewire 3 events between sibling components to reflect loading state in Alpine.js?
I have two sibling Livewire components: a country select and a city select. When the user selects a country, I want to:
Notify the city select to show a loading spinner (via loading-cities event)
Load ...
- 791
-1
votes
1
answer
163
views
Binding Livewire nested data insertion using Alpine js
In screenshot below i have a set of data insertion which contains each parent might have o to 6 children :
when i try to get data in my livewire blade (the part facing issue) like below:
<div ...
- 82
0
votes
0
answers
42
views
How to make Cypress work with AlpineJS x-teleport elements while hovering event list
I have a webapp with the stack django, django-component, htmx, alpinejs and cypress for the end-to-end tests.
I use at different places the element with x-teleport directive from AlpineJS. For ...
- 794
0
votes
0
answers
105
views
ServiceWorker not reacting on periodicSync event
In the web app, it looks good since onSuccess gets called, but the only console log from the service worker I get is the one from initializing it. Somehow, it looks like listening for the periodicsync ...
- 5,110
0
votes
1
answer
104
views
Reset form to its original state using alpine.js
In a regular form, I can use a button with type="reset" to reset it to its original state.
I'm using alpinejs to render a form. How can I reset its data?
- 22.4k
1
vote
0
answers
97
views
Convert Alpine.js on-click to Datastar data-on*
I have some links on my site which currently uses alpine.js to trigger a function that scrolls to a div on the page and I wish to convert this to use Datastar.js
This is what is currently in the base....
- 11
1
vote
1
answer
123
views
Creating css anchors with dynamic identifiers
For the following HTML code (with AlpineJS syntax), I intent to create dynamic anchors for each entry. This works for the popover, but how can I set it for the button as well?
<!-- looping ...
- 5,110
0
votes
1
answer
87
views
loader is not working in livewire when dispatch event from class
I need to make loader while click on date. Then loader should work on timeslot before loading the slot
Below shows short code
Dateslot class
Class Dateslot extends component
{
Public function ...
- 101
1
vote
1
answer
54
views
How to dynamically update nested data with dependency on parent?
I have nested alpine.js x-data tags, where the nested tag depends on the parent, like the following:
<div x-data="{foo: 1234}">
<input x-model="foo" type="number&...
- 1,500
1
vote
1
answer
81
views
How to refer to the entire x-data object inside the <div> itself where it was defined?
update: the answer is use $data and its actually in the alpinejs docs page
I'm new to Alpine.js. Below code works fine, but I'm trying to find a way to refer to the whole x-data object in the line
--&...
- 13
0
votes
0
answers
70
views
AlpineJS data() causing Uncaught ReferenceError on first-time page load
I am not an AlpineJS expert.
I am trying to use Alpine JS in a Laravel Blade component to use the SignaturePad library to capture a signature. My code, cribbed from somewhere else, is below and has ...
1
vote
0
answers
100
views
Format Alpine.js code in templ in Visual Studio Code
I am using AlpineJS with Templ and golang in Visual Studio Code. How can I get format document (Ctrl+Shift+i) to work for the x-data, x-init, etc attributes to work in Visual Studio Code?
I currently ...
0
votes
1
answer
56
views
Optional parent property in Alpine.js nested scope
In a scoped / nested Alpine.js structure, I need data from an outer x-data in an inner one.
This works:
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
<...
- 22.4k
1
vote
0
answers
89
views
Instant response of the Like/Dislike buttons using Alpine.js in Livewire 3
I have logic for like/dislike button in two separate livewire components (LikeButton.php/DislikeButton.php)
The problem is I want like/dislike buttons react immediately after clicking
After clicking I ...
- 123
0
votes
4
answers
169
views
Livewire 3.6.10 with Laravel 11: wire:model not binding input value after page refresh
I'm working with Laravel 11, Livewire 3.6.10, and Alpine.js (properly configured). I'm encountering an issue where wire:model doesn't bind the value to an input field after a page refresh, even though ...
0
votes
1
answer
131
views
Responsive sidebar filters overlay on mobile and static on desktop with Tailwind CSS & Alpine.js
I’m trying to build a self-contained example of an e-commerce “Product Search” layout where:
On mobile (width < 768px) – the filter sidebar is hidden by default, slides in from the left over a ...
- 5,271
1
vote
1
answer
95
views
Data from within JSON Array not showing when Fetching in Alpine.js
I am trying to fetch data from a (local) JSON file. I have no trouble accessing the first level of data within the JSON file (e.g. id, title, ingredients as a whole). However, the issue arises when I ...
- 11
1
vote
1
answer
95
views
How to interrupt the timeout that hides the toast? [closed]
I'm showing a toast alert, controlling visibility with alpinejs, and want the alert to dim after a couple of seconds and be hidden after some more seconds unless the mouse hovers over it.
I got the ...
- 351
0
votes
1
answer
124
views
Htmx preload extension not working, default behaviour not firing network request on mouseover (with Django)
Hi anybody here used preload extension with htmx, I am using it with django. But htmx does not fire any request after setting preloading to mouseover (I am using the preload cdn for loading and it ...
- 1
0
votes
0
answers
135
views
Livewire component deep inside @foreach gets uncaught (in promise) Component not found
Livewire version
v3.6.2
Laravel version
v11.44.2
PHP version
PHP 8.3
What is the problem?
I have nested livewire components in the following way (I am not sure if this information is relevant)
...
- 380
2
votes
1
answer
56
views
Problem with positioning close button in modal window
I have a problem with the button that closes the modal window.
The X button in the main right corner of the modal window is cut off by the area of the modal window.
Example (codepen):
.modal-...
- 33
0
votes
0
answers
153
views
display livewire validation errors in alpine js x-for template
I have a Laravel 10, Livewire 3, Alpine JS application. On one of the blade files, I use the alpine x-for to loop through and add an input for each entry. I need to validate each input on change. I'm ...
- 1
0
votes
0
answers
72
views
How to correctly display the updated value in alpinejs?
So I have a component in my blade that I want to display the updated value.
This value is used to display the correct icon.
The problem with using livewire is that whenever I call togglePinned() it ...
- 634
0
votes
0
answers
33
views
Issue with Saving Dynamic Formset Data on Frontend: Event Dates and Times Not Persisting
I’m facing an issue where dynamic formsets (for event dates and times) on the frontend are not saving correctly. The form is properly rendered, and new event dates and times are added dynamically ...
0
votes
1
answer
119
views
Access child data from parent with AlpineJS
AlpineJS' x-data can be nested, so one can access parent data inside a child.
But can one access child data from its parent?
Contrived example:
<script defer src="https://cdn.jsdelivr.net/npm/...
- 22.4k
0
votes
0
answers
47
views
Recursive category Livewire 3.x and AlpineJS 3.x
I have created a recursive category display using Livewire 3.x and AlpineJS 3.x The categories are stored in the database. Everything is working except for the activeDropdown function. When I open a ...
- 21
0
votes
0
answers
40
views
How would I use AlpineJs to create a dynamic number of fields on a form?
I'm trying to create a form that has an dynamic number of position fields within the form. I'm building the project in laravel. I want to use AlpineJS to accomplish this but can't wrap my head ...
- 77
0
votes
0
answers
93
views
Accessibility for Screen Readers on Stepper in Modal
Focus management in Alpine.js modal doesn't properly redirect screen readers between steps
The Problem
In my TALL (+Fillament) stack app, I have a multi-step modal dialog using Alpine.js and Filament ...
- 767
0
votes
0
answers
53
views
Alpine Expression Errors: vimeoComponent and state Undefined in Custom Component
I'm working with Alpine.js and encountered several errors related to expressions in my custom component. Specifically, I get the following errors in my browser's console:
Error 1:
Alpine Expression ...
0
votes
0
answers
61
views
Form submission is not working with when using Alpinejs to pass to livewire component
I have a problem when passing form value to livewire component while the form is inside alpinejs. When I click the submit button, the only thing happening is page reloaded and the collapse closed
When ...
- 1
0
votes
1
answer
52
views
Drag-and-Drop Form Customizer: Duplicate and Empty Fields Issue When Reordering
I am working on a drag-and-drop form customizer where users can add, reorder, and remove fields using Alpine.js and Sortable.js. However, I am encountering two issues that I cannot seem to fix:
...
1
vote
1
answer
162
views
Automatically trim text using Alpine.js
How can I use Alpine.js to automatically trim text in an input or textarea?
- 22.4k
1
vote
1
answer
239
views
Observe attribute changes using Alpine.js
I have a DOM element with an attribute that is added/removed by an external library (e.g. bootstrap).
Before:
<div x-data="{ fooEnabled: false }">
...
</div>
After:
<div x-...
- 22.4k
0
votes
0
answers
42
views
Data not refreshing inside template in Alpine JS
For some reason the list is not updating. Any ideas why?
The function is called and the entry is removed properly. But it keeps on showing the old list along with the removed entry.
(I have not ...
- 398
0
votes
1
answer
62
views
Image is not fully displayed after clicking
I have a photo gallery in Laravel with Tailwind and Alpine.js. The images are only in a small box as a preview, and I need to fully show up after clicking on any of the photos.
<!DOCTYPE html>
&...
- 3
-2
votes
1
answer
67
views
Uncaught ReferenceError: error2 is not defined - Livewire - Filamentphp:
im having this issue with my laravel-filamentphp code
My login form is disabled... when i enter my credentials and press the login button i get the above errors in the console... Please help me to ...
2
votes
2
answers
727
views
Sending alpine.js data via htmx hx-vals as a json
My goal is to be able to serialize alpine variables into JSON and send those JSONs to my backend via htmx. This would be way more convenient then sending disparate form input values and random hx-vals....
0
votes
1
answer
92
views
Alpine Expression Error: cards is not defined
I have this views/Home.html:
<div x-data="cards">
<h2>Bienvenue sur SwiftDeli !</h2>
<p>
Commencez à créer et partager des recettes, ingrédients et listes de
...
- 41
0
votes
0
answers
56
views
Syntax highlighting for Jinja and AlpineJS
{# jinja-html #}
{% extends "base.html" %}
{% block content %}
<div class="min-h-screen bg-gray-100" x-data="{
photos: [],
selectedPhoto: null,
previewUrl: ...
- 2,491
0
votes
2
answers
295
views
Livewire wire:click Not Working Inside Alpine.js x-data Directive
I'm encountering an issue where Livewire's wire:click method doesn't work inside an Alpine.js x-data directive. Here's a breakdown of my setup:
Inside routes/web.php,
Route::get('/product/{slug}', [...
- 11
0
votes
1
answer
238
views
Update table row with async fetch using alpinejs
Each table row has a cell with some "expensive" data loaded on demand; before it is loaded, it shows "?". When that row's button is clicked, the cell is populated.
<table>
&...
- 22.4k
0
votes
0
answers
103
views
Echarts tooltip and resize not working in laravel livewire alpine js setup
I have implemented echart line and bar charts for my laravel project. I am using livewire with alpine js to show the chart. Chart shows up with the data I am passing but there is few problems. The ...
- 1
0
votes
0
answers
47
views
FilePond image preview plugin does nothing
I'm using laravel and livewire + alpineJS. And I'm trying to create a filepond component.
First I imported the styles and scripts and registered the plugin:
In <head>:
<link rel="...
1
vote
1
answer
161
views
Can I bind x-transition in alpine.js like :x-transition:leave-end？
Can I use Alpine.js to set a variable within x-data and bind my animation effects based on the swipe direction? Currently, it doesn't work when I try to do it this way.
:x-transition:leave-end=&...
- 11
2
votes
1
answer
124
views
Alpine.js menu toggle issue
I'm currently working on a project using Laravel and Alpine.js, and I've run into a bit of a problem with a menu toggle feature. I have a button that is supposed to toggle the visibility of a menu ...
- 314
1
vote
1
answer
187
views
Binding Alpine.js Click Events to Dynamically Rendered JSX Components in Astro.js
I can't seem to bind the Alpine click event when I dynamically render content in Astro.js.
This is an example of that :
<div class="grid grid-cols-1 min-[450px]:grid-cols-2 md:grid-cols-4 xl:...
- 11
-1
votes
1
answer
51
views
Alpine JS - Showing item twice when declaring only one
I have a Blade template in Laravel that uses Alpine JS.
I have a questions array that gets initialized with only one element, but for some reason there are two elements on screen.
What can be wrong?
...
- 2,848
0
votes
2
answers
85
views
External libraries are not functioning in the newly loaded HTMX page
I'm trying to load external scripts dynamically with HTMX, but the libraries don't work on the newly loaded page.
Can anyone provide a simpler solution than the one in my answer in
the answer section?...
- 1,149