1,133 questions
1
vote
1
answer
836
views
HTMX get the text from inputfield for using in hx-get
<input type="number" x-model="inputValue" min="1" max="{{ page.paginator.num_pages }}"
placeholder="Enter a number">
<button type=&...
- 235
0
votes
1
answer
548
views
Alpinejs: x-text not updating text on conditional change
I have the following code which should, as far as I can see, update the text 'Copy to Clipboard' to 'Copied!' on the click of the element. The text is being copied to the clipboard, but the element ...
- 99
1
vote
1
answer
762
views
Laravel Livewire with Select2: Losing State on Dynamic Input Addition and Language Change
I am working on a Laravel project using Livewire with Select2 for a dynamic form. I have encountered a challenge where Select2 loses its enhanced functionality when I dynamically add new select inputs ...
- 116
0
votes
1
answer
164
views
I can't drop the job that I dragged onto the calendar table with Alpine.js
i created a calendar with javascript. I want to add jobs to that calendar. I can drag the jobs but I cant drop it into the calendar.
enter image description here
body
<div class="grid-...
- 13
0
votes
0
answers
692
views
AlpineJS with CSP Build in a Chrome Extension Setting with Manifest v3
Following the instructions at https://alpinejs.dev/advanced/csp to build the CSP library and include it in a simple settings extension, the alpine data is executed but the click event never is ...
- 18.3k
1
vote
1
answer
686
views
Livewire doesn't trigger events when files are uploaded using $wire.$upload(...args)
I am uploading a file using the $wire.$upload(...args) but it does not trigger Livewire default upload events. it works when trying to upload it via $wire:model
This is what the $upload method looks ...
- 301
0
votes
1
answer
7k
views
Alpine Expression Error: variable is not defined
I'm encountering this error after moving my Tile class to Tile.js and moving the game data from app.js to game.js. When all the JS is in the same file everything works fine, but once I break it up ...
- 828
0
votes
1
answer
199
views
Submitting Laravel Livewire form crashes another component
I have an add component, that is essentially a pop-up window with form. When I click the submit, the display component, that shows the data deletes from the page. Not even dispatch even dispatch even ...
- 19
0
votes
1
answer
46
views
Parameter passed to x-data but css class not applying
I'm passing an integer (0 or 1) called $highlight to a component using Alpine; the default value is 0. Here's my component:
<div
x-data="{ hover: false, highlight: @js($highlight) }"
...
- 35
0
votes
1
answer
135
views
Save Flatpickr Date Range to Local Storage with AplineJS Persist
I am attempting to find some information on how I may use Flatpickr daterange to have a user select a date range and save it to local storage when clicking the "next" button.
I'd like to ...
- 409
1
vote
2
answers
95
views
Check button list isn't properly checked at init on edit view, by using a blade component
I have, on my edit view of a model, a checkbox list whose elements should be initially checked with the correspondent values chosen at the creation of the instance.
Despite I've tried a lot, by ...
- 121
0
votes
1
answer
352
views
Adding dynamic ltr and rtl directions inside splide js slider
I am using alpine js in my project. I added i18n to subpport both arabic and English languages.
when I change the language, I added this code to change all layout from ltr to rtl.
enter image ...
0
votes
0
answers
40
views
Track file selection in file input
I have Laravel/Blade form with simple file upload functionality:
Upload: {{ Form::file('logo') }}
I use AlpineJS, and I want to track file selection - when user selects some file, framework will be ...
- 2,575
4
votes
1
answer
2k
views
Leaflet JS widget in Filament won't execute
For a non-profit I'm creating a Filament admin panel with a widget running a Leaflet.js map.
I've set this up according to the Filemant docs
All goes well, the data gets passed to the JS. But leaflet ...
- 503
0
votes
1
answer
261
views
incrementing counter in template with a condition is showing only the final count
Why isn't counter starting from 1 and not ending at 9 ?
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<div x-data="{counter: 1, data1: [33,34,56,78,13,45,...
- 4,291
0
votes
1
answer
197
views
Errors when I send a comment with Laravel, Livewire and AlpineJS
I have a problem that I can't resolve.
I made a blog with Laravel 10, livewire 3, AlpineJS 3.
I'll show you my code.
Component livewire:
<?php
namespace App\Livewire;
use App\Models\Post;
use App\...
user16995764
1
vote
1
answer
57
views
alpine.js with Zope Page Templates
When using alpine.js directives containing a colon (like x-on:click or :class) in a Zope Page Template, I get a an error like builtins.KeyError 'Undefined namespace prefix: x-on.'.
Are ZPT and alpine....
- 1,629
0
votes
1
answer
612
views
Alpine.JS how to save dynamic data after refresh
I made a dropdown that after clicked, displays the result below. However, I cant seem to be able to figure out how to keep the data after refreshing. If I add ten different names, if I refresh the ...
0
votes
0
answers
124
views
Implementing AJAX-Based Filters in JavaScript Without Page Reload/Refresh
If I may pick your brain?
I'm working on a web development project where I need to implement filter buttons that update the content of a page without reloading it. I've written a JavaScript function ...
2
votes
2
answers
972
views
hide element on condition using AlpineJS
Using AlpineJS I have the following:
<div x-data="pricing()" x-init="data = { plan: 'a' }">
<p><span x-text="calculate() + '€'"></span>per ...
- 40k
0
votes
1
answer
627
views
Filamentphp Using drag and drop sorting on a custom page
I want to sort list Using drag and drop sorting on Filamentphp custom page
I used this example
<div
x-data="{}"
x-sortable
x-on:end="console.log('Sorting ended!', $event....
0
votes
0
answers
385
views
Alpine transition causes elements to 'jump'
I have a simple card-based 'slide show' using Alpine and Tailwind. I have a x-transition.opacity on the elements I want to animate between, but I get a weird 'jump' where the next or previous element ...
- 1,502
0
votes
1
answer
188
views
Is it possible to conditionally use AlpineJS event with Django templates?
I have a select with an AlpinheJS @change event that changes the path based on the selected option:
<select role="menu"
id="LanguageSelector"
@change="...
- 107
0
votes
1
answer
6k
views
Laravel Livewire 3 dispatch issue
I'm using Livewire 3. I want to pass some values to a function. Here are the related codes:
<div x-data="{ selectedDataTypes: [] }" class="space-x-0.5 space-y-1.5">
...
- 109
3
votes
4
answers
2k
views
Flowbite & LiveWire - Force re-render
I'm working with the following stack:
Laravel 10.29.0
Livewire 2.12
TailwindCSS 3.3.5
AlpineJS 3.13.1
Flowbite 2.0.0
PHP 8.2
My issue is around Livewire updating the entire DOM when content is re-...
- 53
0
votes
2
answers
3k
views
Dispatch and listen for event in child Livewire component not working
I have created a separate Livewire modal component. I want to reuse that component but fill it dynamically for different pages.
<?php
namespace App\Livewire;
use Livewire\Component;
class ...
- 4,529
0
votes
0
answers
311
views
How do I initialize async functions in alpine?
I am currently working on our capstone project that is running on laravel as my framework with tailwind as my css and I have stumbled upon an error in which I still couldn't understand.
here is block ...
0
votes
1
answer
367
views
Modal built with alpinejs only working after page refresh in Firefox
I have a modal on my page which was built using Alpinejs. When you click the "See how it works" button a modal opens and a video should start playing automatically. You can then close the ...
- 41
0
votes
1
answer
444
views
AlpineJS + Laravel Blade - x-if conditions still showing in the devtools under #document-fragment
I'm applying this condition in blade and it seems to work as expected, however, after inspecting the page with the browser devtools, I can still inspect the code under the condition that's not met. It ...
1
vote
2
answers
3k
views
Alpine.js not reacting to data change
In tinybind.js (which seems to be a dead project) setting: var view = tinybind.bind(app, data) results in the UI updating upon directly setting a global variable, with no special requirements. Is ...
- 43
0
votes
2
answers
2k
views
Alpinejs call method when variable changes
Using Alpine.js for the first time.
I have a video tag to show the camera feed, in a modal, which is initialized when the video tag is initialized using
<div x-data="initTestData()" @data-...
- 9,922
0
votes
1
answer
124
views
stuck on this code saving to database... on laravel 10
Can anyone help? I made a dynamic (array) text input + checkbox input using Alpine JS, well in the form I checked C, but when I save to the database it was A instead.
Which part is wrong?
here dynamic ...
0
votes
0
answers
465
views
Added reactivity to Alpine.data component, but it's not working
I've a simple Alpinejs component named "glide". I'm passing a configuration object, making it reactive with Alpine.reactive:
Alpine.data('glide', (config = {}) => ({
glide: null,
...
- 48.9k
0
votes
0
answers
308
views
Alpine.js not updating price when quantity is added dynamically
I'm working on a web project that uses Alpine.js for dynamic updates on a product page. The product initially loads with a price, and users have the option to add a quantity selector dynamically. ...
- 11
0
votes
1
answer
277
views
AlpineJS: @click doesn't work on <option> tag
I'd like to make changes value using @click in <option>, how can improve it while the code seems like @click inside on <option>
<x-input select class=" w-[270px] h-10 duration-100&...
1
vote
1
answer
2k
views
In AlpineJS, is it possible to create x-model tags which bind to objects in an array?
I have an AlpineJS page which uses something like the following in its x-data:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="...
- 43
1
vote
1
answer
892
views
I can't use Alpine.js @change,@submit and @keyup with ASP.NET Razor Pages
I'm using Alpine.js (included via CDN) in my ASP.NET Razor Page, but can't make it work.
VSCode shows an error: CS0103: The name 'change' does not exist in the current context'.
How can I use the @...
- 23
0
votes
1
answer
547
views
Can I update x-data from a child component that has it's own x-data?
So I have code similar to this
<div x-data="dataManager()">
<some-other-component />
<div x-text="id"></div>
</div>
<script>
...
- 13
0
votes
0
answers
337
views
video.js only works after page refresh
I'm working on a project that was built using Astro website builder and in which I'm Alpine.js as well. In this project I have a video in which I'm trying to incorporate videojs (the open source HTML5 ...
- 41
0
votes
0
answers
128
views
Why is the input text not going away for my livewire modal form the is generated with alpine js?
I'm new to the world of livewire and alpine JS. I'm trying to write a livewire form in a modal. The form works fine but whenever I close the form the last text I entered into my into doesn't go away. ...
- 71
0
votes
1
answer
1k
views
How to keep my variable updated using AlpineJS
First post here,
I'm currently working on a web project where I'm using Alpine.js for some dynamic functionality. In my project, I have a shopping cart feature, and I want to display the total price ...
- 3
0
votes
1
answer
231
views
use up.render to rerender a section in django using unpoly and alpinejs
I am building an ecommerce website using Django with Alpine and Unpoly, In home page i got a list of products so its making a lot of queries which means it takes time, long story short, I got a ...
1
vote
1
answer
672
views
Display number of items in list filtered with AlpineJS
I have a system of filters that can be applied to a list of images.
I use AlpineJS to keep only the items to be displayed when a filter is active.
Everything works fine but I'm having a problem ...
- 33
0
votes
1
answer
609
views
How to track mouse position in pixels using AlpineJS
I'm using AlpineJS and would like to track the coordinates of the mouse cursor within a div.
Context: I'm trying to apply a radial blur hover effect using TailwindCSS emanating from the cursor ...
- 55
0
votes
1
answer
97
views
Possible to use laravel function inside x-bind:href
I am working with Alpine.js and trying to pass id in a href, I am trying to convert the id into encrypted format but it doesn't work, I don't know if we can pass alpine data into laravel method?
I ...
1
vote
1
answer
2k
views
With Livewire pagination elements do not update when changing page
I'm passing a paginated collection of products from my Livewire class into my Livewire component and it mostly works fine. However when I change page via the pagination (e.g. go from page 1 to page 2) ...
- 7,461
0
votes
1
answer
211
views
How to create tabs as block in shopify (with Alpine JS)
This is my default code, but i need Tab name to be as a block so i can add and remove from Dashboard of Shopify.
<div class="tab-wrapper" x-data="{ activeTab: 0 }">
<...
1
vote
1
answer
343
views
How do I create a two way binding list of elements consisting of input boxes using AlpineJs
I need to create a list of input boxes based on a array element. However when using x-for for looping and x-model for binding the elements any changes to the input boxes are not transmitted back to ...
- 13
1
vote
2
answers
1k
views
Add an element after Alpine.js element
I have a datepicker with tailwindcss and alpinejs and it works as expected:
this is my index.html file:
<!doctype html>
<html lang="en">
<head>
<title>Datepicker&...
- 13
0
votes
0
answers
855
views
Laravel Component with Laravel Breeze/AlpineJS not working inside <td> but working fine outside
With Laravel 9, using laravel breeze, I have a blade component that's a button with a modal prompt that's show on click.
When the component is called in a <td> tag, @click.outside="open = ...
- 13