1,113
questions
0
votes
0
answers
7
views
AlpineJs 3 and Charts.js (4.4.6) gives Uncaught RangeError: Maximum call stack size exceeded when calling Chart.update()
I'm tring to update my chart with new data. But whenever I call update functions I get error: Maximum call stack size exceeded.
<div x-data="chartComponent()" class="max-w-xl mx-...
- 61
-1
votes
0
answers
17
views
Alpine Linux How to Get Security Fix Published Date [closed]
I am reviewing the following URL for affected components and their fixes:
https://secdb.alpinelinux.org/v3.18/main.json
However, I am unable to locate the published date for this dataset within the ...
0
votes
1
answer
39
views
Buttons not showing in Livewire Powergrid [Alpine Expression Error: 'variable' is not defined]
I installed livewire-powergridin my project. So far everything works well except the header and action buttons.
I am getting an undefined where the button is supposed to be rendered.
Also. In my ...
- 1,025
1
vote
1
answer
45
views
Alpine.js x-data not reactive
I'm using Alpine.js to render a list of videos from an API. After making the API call, the response data populates my videos array successfully, but the page doesn’t update to show the new data.
Here'...
0
votes
1
answer
34
views
Laravel Livewire 2 pagination breaks Alpine
I'd be happy to post some or all of my code, but for starters, here is the upshot. I have a Livewire view with Livewire components that are paginated. These items may also be filtered. However, any ...
- 3,937
-2
votes
2
answers
83
views
Opening a modal in livewire - laravel
I am designing a login form. when the user clicks on login button a modal should popup.
I have used livewire emitsTo event.
<button wire:click="$emitTo('login','loginModalOpen')" class=&...
0
votes
0
answers
25
views
Livewire/Alpine v3 debounce on x-modelable not working
I am trying to debounce the changes in my tiptap editor, via the x-modelable attribute. The plain inputs debounce as expected, while the x-modelable ones do not.
Entangle Version
<div x-data="{...
- 1,411
0
votes
1
answer
28
views
wire:model value not accessible during x-init for x-modelable properties
I have the following component
<div>
<div
x-data="{ value: 0 }"
x-modelable="value"
wire:model.live="counter"
x-init="...
- 1,411
1
vote
1
answer
168
views
Laravel Filament V3 causes Action components on ViewResource to be disabled on polling
As the title suggests I have an application that receives a huge amount of data that gets updated aproximately 3-5 times every second for each record in the database. It is required that my ...
- 608
0
votes
1
answer
56
views
How to get the value from select tag in alpine.js
I have an xml file where i am iterating the object as dropdownData
<select x-model="areaData" class="form-input w-full cursor-pointer" x-show="dropdownType==='Area'" x-...
- 150
0
votes
1
answer
31
views
Alpine can't access variable set with data()
I'm using Astro with the Alpine integration, rendering set to static.
I am trying to fetch data and based on the response render some html client side.
stats.ts
const FUNCTIONS_BASE_URL = import.meta....
- 150
0
votes
1
answer
51
views
Adapt a multi input with JavaScript and Alpine JS
I have a multi input made with alpine js, is not mine, I search for one on Google and like this one. So, the problem is that 3 inputs on my form needs to be multi-options available, but the first ...
- 123
0
votes
0
answers
98
views
alpine Warning: found "[x-sort]", but missing sort plugin
I am building a dynamic form filter using Filament, and need sort for drag and drop static elements to the form.
Now, I know alpine and livewire comes inbuilt with filament, but when i run
consele.log(...
0
votes
0
answers
51
views
Validation with alpine.js
In my form, I am trying to implement validation for checkboxes using Alpine.js.
When I fill out the form correctly (when the validation passes without displaying any error messages), the result of $...
- 33
0
votes
1
answer
172
views
Use AlpineJS data in django-cotton component
I'm trying to use AlpineJS jointly with django-cotton components. I tried the following but it did not work.
<div x-data="{ message: 'I ❤️ Alpine' }">
<c-card x-bind:title="...
- 502
0
votes
1
answer
43
views
show counter for nested loop using alphine js
I am trying to add the counter based on the provider. It should be global not service wise. I mean if there are 2 services and both of them have 2 providers, then it should show the counter like ...
0
votes
2
answers
52
views
How to view and watch an image with Laravel Livewire
I am trying to recreate a reusable blade component that will allow me to view and upload images for all my forms. The value in the livewire component could be a string of a previously uploaded image ...
0
votes
0
answers
103
views
Can Alpine's x-teleport reposition an element dynamically?
I have a video player which changes its parent based on media queries, i.e. in "small" mode it's in one part of the layout, and in "large" mode it's in another. To make sure the ...
- 1,336
0
votes
1
answer
102
views
Trigger alpine function from vanilla javascript
I created an AlpineJs Toaster and I want to trigger it from javascript code to call it from anywhere.
I tried to update the store but it's not working. What I am missing ?
$("#triggerBtn")....
- 2,929
1
vote
1
answer
134
views
fasthtml and aplinejs integration
I am using fasthtml and trying out alpinejs for some interactivity. I am stuck with the @click attribute. I can't find a way of getting @click to render in the generated html.
Here is how it is ...
- 935
0
votes
2
answers
61
views
AlpineJS aynchronous data loading
I'm looking into AlpineJS for the first time and I'm trying to load some data into the x-data attribute.
I have something like
<body x-data="data">
...
in my HTML. Inside data I store ...
- 67
0
votes
0
answers
204
views
Alpine Expression Error: error is not defined
Project with TALL (Tailwind, Alpine, Laravel, Livewire) Stack and Filament
I got in local/dev mode the follwing warning (in prod it does not happens, so it maybe has todo with some dev-packages?):
...
- 192
0
votes
0
answers
79
views
Alpine js not working or reinitialize after livewire load
I have added checkbox for single and multiple select using alpine js, but when livewire load it stops working abd getting this error . getting in the console.
Here is my code:
<div x-data="...
0
votes
1
answer
118
views
HTML hx-boost with AlpineJS x-for - errors after using back button
I have some code like:
<html>
...
<body>
<div id="content-root"
hx-boost="true"
hx-select="#content-root"
hx-target=&...
- 33.7k
0
votes
0
answers
94
views
Infinitely recursive nested product form wizard with AlpineJS
I'm working on the front end of a restaurant takeaway system, and I need to create an "infinitely" recursive nested product form wizard similar to the UberEats modal product form flow. The ...
- 63
-1
votes
1
answer
30
views
HTML element from livewire not applying tailwind css correctly
I'm making a livewire dev using vite and it has a function where html elements are generated and sent to the ui component but for some reason, unless i have a static code at the same page which ...
- 7
0
votes
0
answers
30
views
Video Loading Issue on Chapter Switch in FilamentPHP Custom Page
I'm working on a learning management system using Laravel, FilamentPHP, AlpineJs and Livewire, and facing an issue with loading videos in my Filament custom page. The video for the current chapter ...
0
votes
0
answers
46
views
How to cancel the HTTP request for a livewire current lazy component when click on browser back button?
I am working on laravel and livewire where i load the lazyload the component and i want cancel the current loading component request when click on back button of browser. How can i do that.
listing-...
0
votes
2
answers
43
views
How to prevent history.pushState from iFrame src change
For an existing <iframe> the src attribute gets changed with AlpineJS. How can I make the browser ignore this src change for the browser history?
My current (basic) iframe code:
<iframe :src=&...
- 4,892
0
votes
0
answers
29
views
Show the value of a variable inside a string of text
I'm trying to display the following sentence in my site that is made of a static part and a dynamic one that depends on the value of a js variable
There are {X} things in the set
I'm using alpine.js ...
- 1,584
1
vote
1
answer
39
views
cannot access elements when using x-for
I made this code to get a json file and display a field from each of the elements
<script src="https://www.unpkg.com/alpinejs" defer></script>
<script>
function note(a) {...
- 19
0
votes
0
answers
57
views
Astro with Alpine.js: what's the right syntax to parameterize client scripts?
I have installed Astro with Alpine.js integration.
The following code snippet works fine, but I would like to parameterize the URL.
<div x-data="{
result: null,
async ...
0
votes
1
answer
50
views
Tinymce and laravel when submit form the textarea turn back to normal textarea
when submit form in livewire the editor disappers and turn back to text area
body
<textarea class="form-control" wire:model='body' id="body">{{ old('body') }}</...
0
votes
0
answers
26
views
Alpinejs errors when used in Django templates
I have AlpineJS loaded in my Django base.html template, and throughout the app I'm using AlpineJS in my partials. This works locally, but when I deploy I see errors such as:
Alpine Expression Error: ...
- 13.3k
0
votes
1
answer
148
views
Choices js with wire:model.live bespoke javascript
I'm currently using choices js for a searchable select but now, when i use it with live:model.live, after my result reload, the select changes to back to a normal select and can't be used as live ...
- 7
0
votes
1
answer
306
views
update alpine.js data variable on htmx form submit response
I'm using HTMX and Alpine.js on a form like
<form x-data="{submitted: false}" @submit.prevent="submitted = true" hx-on:htmx:after-request="submitted = false" hx-post ...
- 9,712
0
votes
1
answer
216
views
Alpinejs with HTMX prevents form submit on @click event
Using Alpinejs and HTMX both together.
There is a form that is submitted using HTMX on the form submit event, but I also want to show a spinner on the button and disable the button when the form is ...
- 9,712
0
votes
1
answer
173
views
In Alpine.JS, this.property inside method is undefined
I have a request for help with Alpine.JS
I have a packetaApiKey property defined. When I access it this.packetaApiKey in the pickPoint method, it works as expected. But in the showSelectedPickupPoint ...
0
votes
0
answers
65
views
Unable to add emojis in quill RTE
I am using quill as my RTE in laravel/livewire app. Here is some of my code
I have installed quill-emoji using npm
My view file that loads the quill
<div class="w-full"
wire:ignore
...
- 111
1
vote
1
answer
107
views
BladewindUI with Alpine JS
sorry if this is silly to ask but i haven't found any solution to this question of mine. so the code below is i want the page to run something (in this case, just alert on change of select option). if ...
- 7
0
votes
1
answer
259
views
Difficulty Sorting Nested JSON Layer Tree with SortableJS in Alpine.js
I'm having trouble sorting my nested JSON layer tree using SortableJS in an Alpine.js application. I have a complex JSON structure representing layers, which can be nested multiple levels deep. My ...
- 8,385
0
votes
1
answer
54
views
Tailwind: dynamic grid columns with no gaps
The documentation is not very clear about all the grid options there.
I have this grid template in alpinejs styling it with tailwind:
<div x-show="multiple" class="w-auto grid mt-3&...
- 131
0
votes
1
answer
61
views
Show content if certain checkboxes are checked
I want to show a block of content if certain checkboxes in a group are selected.
This partially works:
<div x-data="{ show: false }">
<div>
<label class="flex" ...
- 1,709
1
vote
0
answers
44
views
i Have a laravel 10 livewire 2 apline.js 2 component search-suggest-dropdown which works but not always giving an error Error evaluating filteredItems
the error is as follows and it only gives it to me lately i worked before and i did not chenge any code since last it worked i just stopped
error
Error evaluating "filteredItems"
TypeError: ...
- 11
0
votes
1
answer
210
views
Alpine.js 3.x and Chart.js Integration Error: "Uncaught TypeError: Cannot read properties of null (reading 'save')"
I'm working on a Laravel project where I use Alpine.js for interactivity and Chart.js for data visualization. My setup works fine with Alpine.js 2.8.2, but when I upgrade to Alpine.js 3.x, I encounter ...
- 23
0
votes
1
answer
177
views
AlpineJS model not updating via jQuery ajax callback
I am trying to update a checkbox value tied to a AlipneJS data model based on the response of a jquery ajax call.
However it doesn't seem to work when I try to update the data model for the checkbox ...
- 181
-1
votes
1
answer
188
views
Laravel 11 mix to vite : Uncaught TypeError: $ is not a function
I'm using Laravel 11 mix and I have a problem with Alpine which is loaded 2 times when I connect on my website in local. If it's possible, I prefer to stay in mix I already tried to go on Laravel vite ...
0
votes
0
answers
55
views
Why Input box value not force reset to old value if new value not accepted using x-data and x-model in Alpinejs
Having this html element:
<input x-data="myInput" type="number" x-model="dataInput" >
And this corresponding js:
document.addEventListener("alpine:init", ...
0
votes
0
answers
114
views
How to add an item to the bottom of a sortable list in Alpine Js?
I have the following simple code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=...
- 107
0
votes
0
answers
60
views
Livewire: Use Child Component Form on Modal
I'm building a modal that can have multiple forms, depending on the number of sets. This is the structure.
workouts.edit-logger.blade.php
<div>
<x-card title="{{ $planner->...