Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hey all, I am trying to fix my alpine javascript to simply show some content but it seems to be ignoring the xdata="showWindow()" function.
The code.
HTML
<div x-data="showWindow()">
<button @click="toggle()">Toggle Content</button>
<div x-show="isOpen">
Content...
</div>
</div>
JS Code
function showWindow() {
return {
open: false,
get isOpen() {
return this.open;
},
toggle() {
this.open = !this.open;
}
};
}
window.showWindow = showWindow;
If I put the js data in the x-data it works, but if I try to load it from a function I get an error.
"Alpine Expression Error: toggle is not defined"
the code https://codepen.io/terreporter/pen/abERRWO?editors=0001
I got the test code for the showWindow stuff here, https://alpinejs.dev/directives/data
So you are immediately invoking the function that way. Have you tried instead of adding it on the window object to instead do it this way: https://alpinejs.dev/directives/data#re-usable-data and listen for when the Alpine has initialized.
Also instead of this <div x-data="showWindow()"> to just use this <div x-data="showWindow">
perhaps you need to use Alpine.data in order for this to be the correct scope
Hello there! You could try this instead
document.addEventListener('alpine:init', () => {
Alpine.data('showWindow', () => {
return {
open: false,
get isOpen() {
return this.open;
},
toggle() {
this.open = !this.open;
}
}
});
});
Also, there is no need for the () on the x-data attribute
<div x-data="showWindow">
Or another different thing that may be causing this is if you forget to add defer in Alpine's <script> tag.
@nakov @snapey Thank you both for your replies. I tried both options but neither worked for me on the test page. Besides the concept of having to put such little code in that way was confusing, I should need to. I find tons of sights that do the x-data=" function" and it works fine. I just can't figure out what I am doing wrong.
@bicicura Thanks for your reply and for providing the code. Your code is a combination of what @nakov and @snapey suggested and it failed to work.
I honestly don't believe the function is being loaded. I put an alert in it and nothing shows up.
Do any of you know what could be causing that type of error? I would figure if alpine was broken then there would be a lot more people having the problem.
I made a very trimmed test page, https://codepen.io/terreporter/pen/OJzaygq?editors=1111, if anyone wants to see the error, at least I would hope the error is there and I am not going crazy.
Again thanks for the replies
@TerrePorter If the alert is not showing up I might suggest that the script with the function is not being loaded. Are you sure that there is a script tag with the js we provided or that the route to the file is correct? You could share us where you have included the script.
Not sure whats happening in codepen, but this works, wheras putting the script in the JS window does not
<div x-data="showWindow">
<button @click="toggle()" class="px-4 py-3 text-white bg-blue-500 rounded">Toggle Content</button>
<div x-show="isOpen">
Content...
</div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('showWindow', () => ({
open: false,
get isOpen() {
return this.open;
},
toggle() {
this.open = ! this.open
}
}))
})
</script>
also worth noting that this works identically
<div x-data="{
open: false,
get isOpen() {
return this.open;
},
toggle() {
this.open = ! this.open
}
}">
<button @click="toggle()" class="px-4 py-3 text-white bg-blue-500 rounded">Toggle Content</button>
<div x-show="isOpen">
Content...
</div>
</div>
@terreporter yeah, as @snapey said, this worked for me on CodePen, but not with the JS mode. So everything in HTML window:
<html>
<head>
<script>
function showWindow() {
return {
open: false,
get isOpen () {
return this.open;
},
toggle() {
this.open = ! this.open;
}
};
}
window.showWindow = showWindow;
</script>
</head>
<body>
<div x-data="showWindow">
<button @click="toggle()">Toggle Content</button>
<div x-show="isOpen">
Content...
</div>
</div>
</body>
</html>
It does seem to be a problem with CodePen. I found another pen that had code in a function and that one was working. A comparison between their page and mine. I used the add external script in settings and they had directly included it in the HTML.
So I did some testing if you add alpine.js using the settings menu, it will fail to execute any functions using x-data="function" but it would run scripts on the page. If I added the script, the same CDN, using a script tag to the HTML it would work as expected and the x-data=" function" runs
Thank you both for your assistance in figuring this out.
Please or to participate in this conversation.