1,117 questions
0
votes
0
answers
14
views
async loading with laravel+vite+alpinejs? (filamentphp custom field)
I'm trying to create a google maps class to use in a location clicker on laravel with filamentphp that uses alpine.js in conjunction with livewire. Near as I can tell, I'm having problems with vite ...
0
votes
2
answers
41
views
Handle livewire events in both PHP and JS
I have this component called beat-player, on the PHP code I receive a dispatched event from another component and it works:
<?php
namespace App\Livewire;
use Livewire\Component;
use Livewire\...
- 660
1
vote
1
answer
39
views
How to escape properly a text in alpinejs/Laravel?
I am using alpinejs and laravel, I stored in the database this text: F & M, this part of my blade file:
.....
<input type="text" name="title" id="title" x-...
- 337
0
votes
1
answer
28
views
Alpinejs xtext performance in magento project
I’m new to working on a Magento project with Hyvä Theme and Alpine.js.
On the product page, I have a JSON containing product models that I’ll receive from Typesense. My plan is to use PHP for the ...
- 1
0
votes
0
answers
9
views
How to workaround or fix Alpine.js on Webview on iOS?
Alpine.js functionality is not working when accessed with WebView on iOS (React Native). On Android it works as expected. Is there any way to setup WebView to make it work?
//App.tsx
import React ...
- 1
1
vote
0
answers
24
views
wire:snapshot with html instead json in livewire
I'm having problems with a livewire component. There is html in the wire:snapshot attribute it is supposed to contain just json:
<ul wire:snapshot="{"data":{"...
- 31
0
votes
1
answer
71
views
Make a responsive navbar with alpinejs and tailwind css
I made a navbar by using html, tailwind css and alpine.js. It should be responsive, so added two parts (horizontal and vertical nav links) as you see in my following code. It work fine, but is there a ...
- 594
0
votes
0
answers
27
views
Native javascript events triggered by wire:model update
I'm trying to run a client javascript function when a form element gets updated by wire:model changes on the client side. I know Livewire doesn't trigger a change event, but I've read that input and ...
- 109
0
votes
0
answers
25
views
Livewire DataTable: `$this->data` is cleared during `dehydrating`, causing table rows to disappear
Title
Livewire: $this->data is cleared during dehydrating, causing table rows to disappear
Body
I’m working with a modular Livewire component structure that involves a base component (BaseTable....
- 41
0
votes
1
answer
54
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
0
votes
1
answer
100
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,035
1
vote
1
answer
80
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
69
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
95
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
44
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,421
0
votes
1
answer
41
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,421
1
vote
1
answer
405
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
57
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
46
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
63
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
141
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
98
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
201
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
54
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
163
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
125
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,939
1
vote
1
answer
160
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
89
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
290
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?):
...
- 191
0
votes
0
answers
100
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
171
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.8k
0
votes
0
answers
105
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
42
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
31
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
2
answers
51
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,922
0
votes
0
answers
43
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
67
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
52
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
30
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.4k
0
votes
1
answer
190
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
368
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,742
0
votes
1
answer
263
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,742
0
votes
1
answer
202
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
74
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
124
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
319
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,395
0
votes
1
answer
60
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&...
- 141
0
votes
1
answer
64
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,713