<![CDATA[Alpine JS]]>https://alpinejs.inRSS for NodeTue, 08 Sep 2026 01:05:17 GMT60<![CDATA[Styling the NumberFormat in JavaScript]]>https://alpinejs.in/styling-the-numberformat-in-javascripthttps://alpinejs.in/styling-the-numberformat-in-javascriptWed, 29 Jan 2025 08:32:25 GMTIf you ever wanted to display a number (amount) in Indian currency format and you have the number in a template variable as total like {{ total }}, then here’s a quick way to go using AlpineJS’s x-text to replace the server-side rendered content.

<td x-text="new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format({{ total }})">
    ₹{{ total }}
</td>

NumberFormat has been supported on all browsers for a long time now.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

]]><![CDATA[Using getters and setters Part 3]]>https://alpinejs.in/using-getters-and-setters-part-3https://alpinejs.in/using-getters-and-setters-part-3Sat, 24 Aug 2024 06:28:22 GMTHere is the final Part 3 post on getters and setters. This is more refined and considered the goto method.

https://gist.github.com/anjanesh/18630fc3f7b1684569fc6ad34c45a883

Here, the USD price is pre-defined as usual as price_USD.

The key takeaway is in this line :

const addINRPrice = (product) => Object.defineProperty(product, 'price_INR', INRPriceConverter);

price_INR is defined as a property in the products array of objects by setting it in Object.defineProperty. As you can see, there are 3 arguments to this :

  1. the product, which is the parameter in addINRPrice method.

  2. The other property price_INR which we had declared in the products array explicitly in the first two parts of this blog series, is now dynamically added.

  3. The method that is used to set and get the dynamically added property price_INR.

this.products.map(addINRPrice); adds the price_INR property to each of the objects in the products array.

In AlpineJS store's init() method which does some initialisation, a method INRPriceConverter is defined that has a setter and a getter to convert / return USD or INR values.

Let's see what the setter and getter in INRPriceConverter does.

The getter is straight-forward - return this.price_USD * 83; returns the INR value when the USD value is multiplied by 83.

Now the setter which has a parameter val in this.price_USD = val / 83; - here, val is price_INR (that's added dynamically) and calculated to it's USD value.

Demo : https://anjanesh.s3.amazonaws.com/demo/alpine/alpine-auto-update-variable-method-2.html

]]><![CDATA[Image PopUp / Photo Gallery using PhotoSwipe]]>https://alpinejs.in/image-popup-photo-gallery-using-photoswipehttps://alpinejs.in/image-popup-photo-gallery-using-photoswipeThu, 04 Jul 2024 11:27:13 GMTI think one of the most searched query for a jquery plugin was / is that of an image popup, photo gallery etc.

It's now almost a decade since ES6 (2015) - Say GoodBye to jQuery and welcome a Ukranian's PhotoSwipe JavaScript plugin.

Captions is achieved using a Dynamic caption plugin for PhotoSwipe v5.

The preferred way to load the JavaScript plugin is via a "module" remotely.

Using <script type="module">

import PhotoSwipeLightbox from 'https://unpkg.com/photoswipe@5.4.4/dist/photoswipe-lightbox.esm.js';

And similarly for the caption plugin :

import PhotoSwipeDynamicCaption from 'https://unpkg.com/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm.js';

Then we initialise a variable to a new object using regular vanilla JavaScript.

We use AlpineJS to either loop through an array of objects containing the photo details like links and captions or1 through a count and reference the index for each image using :href, :src and :alt (for the caption) like this :

<template x-for="i in 18">
   <a :href="'https://planpros.s3.amazonaws.com/images/' + i + 's.webp'"
      data-pswp-width="1292"
      data-pswp-height="1225"
      target="_blank">
       <img :src="'https://planpros.s3.amazonaws.com/images/' + i + 's.webp'" :alt="'screenshot demo ' + i" />
   </a>
</template>

In case you're wondering why the colon (:) before href, src and alt, its because we're wanting these attributes to be parsed as JavaScript code which AlpineJS would do it for us. This is the crux of AlpineJS. For example <span :text="'Hello' + ' World'"></span> would concatenate the strings Hello and World and assign the span's text to Hello World. Same can be applied to JavaScript variables.

Here's the full source code :

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Photoswipe + AlpineJS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link  rel="stylesheet" href="https://unpkg.com/photoswipe@5.2.2/dist/photoswipe.css" />
    <link rel="stylesheet" href="https://unpkg.com/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css">
</head>
<body>

<div class="container">
    <h2 class="text-center text-2xl text-[#022350] md:text-[44px] md:leading-normal">Here's Exactly What You'll See in the PlanPros Members Area</h2>
    <div x-data="" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 pswp-gallery" id="gallery-screenshots">
        <template x-for="i in 18">
            <a :href="'https://planpros.s3.amazonaws.com/images/' + i + 's.webp'"
               data-pswp-width="1292"
               data-pswp-height="1225"
               target="_blank">
                <img :src="'https://planpros.s3.amazonaws.com/images/' + i + 's.webp'" :alt="'screenshot demo ' + i" />
            </a>            
        </template>
    </div>
</div>

<script type="module">
import PhotoSwipeLightbox from 'https://unpkg.com/photoswipe@5.4.4/dist/photoswipe-lightbox.esm.js';
import PhotoSwipeDynamicCaption from 'https://unpkg.com/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm.js';

const lightbox = new PhotoSwipeLightbox({
    gallery: '#gallery-screenshots',
    children: 'a',
    pswpModule: () => import('https://unpkg.com/photoswipe@5.4.4/dist/photoswipe.esm.js'),
});

// https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin
const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, {
  // Plugins options, for example:
  type: 'auto',
});

lightbox.init();
</script>

<script src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js" defer></script>

</body>
</html>

Gist : https://gist.github.com/anjanesh/bc46a327f830e7e717271032d5b6b60a

Demo : https://anjanesh.s3.amazonaws.com/demo/alpine/photoswipe.html

]]><![CDATA[Using getters and setters Part 2]]>https://alpinejs.in/using-getters-and-setters-part-2https://alpinejs.in/using-getters-and-setters-part-2Sat, 17 Feb 2024 04:30:33 GMTThis is second part in the series to make use of getters and setters in an AlpineJS object, that converts INR to USD.

Well, only a setter has been used here where a function call is made to the setter priceInINR when the textbox of the USD value changes. The setter changes the value of the product's (which is an argument to priceInINR) price_INR value.

x-on:input="$store.global_data.priceInINR = product"

And the setter :

set priceInINR(p)
{            
    const product = this.products.find(product => product.name === p.name);
    product.price_INR = p.price_USD * 83;
},

Here's the full source code.

https://gist.github.com/anjanesh/2563f0155a4e303dcd39aa9d3c4e2c7f

PS: 1 USD = 83 INR as of 17th February 2024.

Here's a more interactive example / demo : https://anjanesh.s3.amazonaws.com/demo/alpine/alpine-auto-update-variable-method-1.html

]]><![CDATA[How to access AlpineJS Data variable outside scope]]>https://alpinejs.in/access-alpinejs-variable-outside-scopehttps://alpinejs.in/access-alpinejs-variable-outside-scopeFri, 19 Jan 2024 12:25:15 GMTThis is actually revealing a one-liner solution because Rahul Rajput of rajputrahul.com has already posted a good article and example of how to access a AlpineJS variable outside of its scope at https://www.rajputrahul.com/access-alpinejs-variable-outside-scope/ - but this solution is valid for AlpineJS 2.x only - in version 3.x there is a change in the way its accessed.

In AlpineJS 3.x (while adding https://unpkg.com/alpinejs@3.13.3/dist/cdn.min.js in the script tag to load AlpineJS) :

document.getElementById('modalBox')._x_dataStack[0].open = false;

Full Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to access AlpineJS Data variable outside scope</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/alpinejs@3.13.3/dist/cdn.min.js" defer></script>
</head>
<body>
    <h1 class="text-2xl">Example one</h1>
    <div x-data="{open: false}" @keydown.escape="open=false" x-clock>
        <div class="px-8 py-8 align-center">
            <button @click="open=!open" class="px-3 py-1 border shadow-md bg-indigo-500 text-white">Toggle button</button>
            <div x-show="open" id="modal">
                This is modal text.  
                <br>
                <button @click="open=false" class="px-3 py-1 border shadow-md bg-red-500 text-white">Close Me</button>
            </div>
        </div>
    </div>
    <h1 class="text-2xl">Example two</h1>
    <div id="modalBox" x-data="{open: false}" @keydown.escape="open=false" x-clock>
        <div class="px-8 py-8 align-center">
            <button @click="open=!open" class="px-3 py-1 border shadow-md bg-indigo-500 text-white">Toggle button</button>

            <div x-show="open" id="modal">
                This is modal text.  
                <br>
                <button @click="open=false" class="px-3 py-1 border shadow-md bg-red-500 text-white">Close Me</button>
            </div>
        </div>
    </div>
    <button onclick="hideBox()" class="px-3 py-1 border shadow-md bg-red-500 text-white">Toggle button (Outside Scope)</button>
    <script>
        window.hideBox = function(){
            // document.getElementById('modalBox').__x.$data.open = false;
            document.getElementById('modalBox')._x_dataStack[0].open = false;
        }
    </script>
</body>
</html>
]]><![CDATA[Using AJAX to load an image in the background]]> https://alpinejs.in/using-ajax-to-load-an-image-in-the-backgroundWed, 22 Nov 2023 07:07:28 GMTEver tried loading an image using AJAX/fetch?

Here's a super simple example with AlpineJS parsing an IMG's src value as JavaScript. It can't get simpler than this.

<div x-data="{}">
    <img :src="await(await fetch('https://domain.com/myImage.jpg')).url" />
</div>

You'll have to add cors origin like the way it's done at bunny.net - https://share.getcloudapp.com/bLuARKwx

Here's a full source code :

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />    
    <title>Using AJAX to load an image in the background</title>
    <script src="https://unpkg.com/alpinejs@3.13.2/dist/cdn.min.js" defer></script>
</head>
<body>
    <div x-data="{}">
        <img :src="await(await fetch('https://anjanesh.b-cdn.net/island.jpg')).url" />
    </div>
</body>
</html>

Note the .url and the end of the closing await.

the .url is used to get the URL of the response obtained from the fetch operation, and it's accessed using await because fetch returns a promise.

]]><![CDATA[Using ENTER for submit and SHIFT+ENTER for multi-line chat]]>https://alpinejs.in/using-enter-for-submit-and-shiftenter-for-multi-line-chathttps://alpinejs.in/using-enter-for-submit-and-shiftenter-for-multi-line-chatWed, 01 Nov 2023 02:29:27 GMTIf you've noticed on LinkedIn messaging when you chat with someone, you hit the ENTER key to send the message across and SHIFT+ENTER to enter a new line in the chat box. Most people aren't used to SHIFT+ENTER to go to the next line though.

This is pretty simple to replicate using AlpineJS. We listen to @keydown.shift and @keyup.shift where keyup / keydown are the keys that are pressed down or up respectively and .shift is for listening specifically for the SHIFT key.

    <textarea
        @keyup.enter="
        if (!shiftPressed)
        {
            chats.push($event.target.value);
            $event.target.value = '';
        }
        "
        @keydown.shift="shiftPressed = true"
        @keyup.shift="shiftPressed = false"
        placeholder="type your message here... and hit enter - hit SHIFT+ENTER to enter a new line"
        rows="10" cols="50"
        ></textarea>

Using x-html is dangerous but newlines in textarea should be converted to HTML.

Here's the complete code.

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>AlpineJS Chat with Shift Enter</title>
</head>
<body>

<div x-data="{
    shiftPressed: false,
    chats: []
}">

    <template x-for="chat in chats">
        <div>
            <div x-html="chat"></div>
            <hr/>
        </div>
    </template>

    <textarea
        @keyup.enter="
        if (!shiftPressed)
        {
            chats.push($event.target.value.replace('\n', '<br/>'));
            $event.target.value = '';
        }
        "
        @keydown.shift="shiftPressed = true"
        @keyup.shift="shiftPressed = false"
        placeholder="type your message here... and hit enter - hit SHIFT+ENTER to enter a new line"
        rows="10" cols="50"
        ></textarea>

</div>

<script defer src="https://unpkg.com/alpinejs@3.13.2/dist/cdn.min.js"></script>
</body>
</html>

Demo : https://anjanesh.s3.amazonaws.com/demo/alpine/shift-enter.html

]]><![CDATA[Using getters and setters]]>https://alpinejs.in/using-getters-and-settershttps://alpinejs.in/using-getters-and-settersMon, 16 Oct 2023 02:39:47 GMTThis is going to be a 3 part series on using getters and setters in AlpineJS.

I knew about set and get in JavaScript which are commonly known as setters and getters but I had never used them in a real case scenario until now. I agree, I am pretty late to implementing these, considering these have been available since Chrome 1.0 and Firefox 1.5.

Here is an example of a basic example of using get and set in an AlpineJS global store object.

Let's say you have a product for which you want to show the price in INR (Indian Rupee ₹) and also in US dollars.

Normally we set the price in USD and convert it into INR using a factor of 83 (as of now 1 USD = 83 INR approximately).

So if we set the price of the product as 50 USD, then the price in INR should automatically be converted to 50 x 83 = 4150 INR.

The idea is to set another variable to a converted value when one variable gets changed.

So basically, if we have 2 variables, x and y, y should auto-update when x gets modified.

This will work only if both x and y are defined in an object.

https://gist.github.com/anjanesh/757c7e763653ac8be6b923b39f4a5d0f

Demo: https://anjanesh.s3.amazonaws.com/demo/alpine/alpine-auto-update-variable.html

]]><![CDATA[Update State Variables Automatically]]> { Alpine.store('global_data', ...]]>https://alpinejs.in/update-state-variables-automaticallyhttps://alpinejs.in/update-state-variables-automaticallyFri, 11 Aug 2023 03:42:50 GMTAlpineJS has a global state management system through its global variable named store.

We can store a variable named total for a page loaded in the browser like this :

document.addEventListener('alpine:init', () =>
{
    Alpine.store('global_data',
    {
        total: 0,
    });
});

(Note: This is not localStorage, so the store variable will be reset once you navigate to another page)

If you're looking to assign and update a variable stored in $store with change in input elements' values, you don't need to attach event listeners to the respective input elements at all.

Let's have 2 input elements, one for the quantity (text field) and one for the size of the product (select), where each of the 3 sizes has pre-defined prices.

So for the quantity we can bind the value of the input to a local AlpineJS variable like <input x-model="quantity"> and a <select x-model="price">

And have a total assigned and displayed as :

x-text="$store.global_data.total = calcTotal(quantity, price)"

Here is the entire code :

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />    
    <title>AlpineJS onchange update store variable</title>
</head>
<body>
<script>
document.addEventListener('alpine:init', () =>
{
    Alpine.store('global_data',
    {
        total: 0,
    });
});

let calcTotal = (quantity, price) =>
{
    return quantity * price;
}
</script>

<div x-data="{ quantity:0, price:0 }">
    Quantity : <input type="text" x-model="quantity"/>
    <select x-model="price">
        <option value="0">Select Size</option>
        <option value="150">Small ($150)</option>
        <option value="360">Medium ($360)</option>
        <option value="890">Large ($890)</option>
    </select>    
    <p>Total : <span x-text="$store.global_data.total = calcTotal(quantity, price)"></span></p>
</div>

<script defer src="https://unpkg.com/alpinejs@3.12.3/dist/cdn.min.js"></script>
</body>
</html>
]]><![CDATA[Retrieving AlpineJS data in a global function]]> I want the x-data details, first_name and last_name to be available in a global function. One option is to retrieve th...]]>https://alpinejs.in/retrieving-alpinejs-data-in-a-global-functionhttps://alpinejs.in/retrieving-alpinejs-data-in-a-global-functionTue, 04 Jul 2023 02:24:51 GMTI have a form coupled with AlpineJS.

<form
x-data="{ first_name: '', last_name: '' }"
method="POST"
@submit.prevent="submitForm"
>

I want the x-data details, first_name and last_name to be available in a global function.

One option is to retrieve the data via this.$data and other option is to pass the form data (which should be an array or an object) as an argument to the global function.

Passing the data as an object or as an array would reduce sending lots of arguments if there are, like, 30 or so variables.

Option 1: Get the data as this.$data

let submitForm = function()
{        
    const xData = this.$data;

    const first_name = xData.first_name;
    const last_name = xData.last_name;

    console.log("First Name:", first_name);
    console.log("Last Name:", last_name);
};

Option2: Send the data as an argument to the function.

let submitForm = (data) =>
{
    console.log("data = ", data);
};

But this is only if x-data is defined as x-data="{ xData: { first_name: '', last_name: '' }}" and the submit handler includes the argument - @submit.prevent="submitForm2(xData)".

<form
x-data="{ first_name: '', last_name: '' }"
method="POST"
@submit.prevent="submitForm1"
>
        <label>
            First Name:
            <input type="text" x-model="first_name" />
        </label>
        <label>
            Last Name:
            <input type="text" x-model="last_name" />
        </label>
        <button type="submit">Submit</button>
    </form>
    <script>
    let submitForm1 = function()
    {        
        const xData = this.$data;

        const first_name = xData.first_name;
        const last_name = xData.last_name;

        console.log("First Name:", first_name);
        console.log("Last Name:", last_name);
    };
    </script>

    <form
    x-data="{ xData: { first_name: '', last_name: '' }}"
    method="POST"
    @submit.prevent="submitForm2(xData)"
    >
        <label>
            First Name:
            <input type="text" x-model="xData.first_name" />
        </label>
        <label>
            Last Name:
            <input type="text" x-model="xData.last_name" />
        </label>
        <button type="submit">Submit</button>
    </form>
    <script>
    let submitForm2 = (data) =>
    {
        console.log("data = ", data);
    };
    </script>

    <script defer src="https://unpkg.com/alpinejs@3.12.3/dist/cdn.min.js"></script>

Online Demo: https://anjanesh.s3.amazonaws.com/demo/alpine/alpinejs-form-data.html

]]><![CDATA[Using Set instead of an Array]]>https://alpinejs.in/using-set-instead-of-an-arrayhttps://alpinejs.in/using-set-instead-of-an-arrayThu, 06 Apr 2023 02:02:50 GMTLet's say you had an object like this where you wanted to show the version numbers available for each type of application when the user checks an application. So if someone checks wordpress it should show the version numbers available, 6.2, 6.1, 5.9.

{
    'php': [
        '8.2',
        '8.1',
        '8.0',
        '7.4',
        '7.2',
    ],
    'wordpress': [
            '6.2',
            '6.1',
            '5.9',
        ],
    'Apache': [
            '2.4',
            '2.2',
        ],
    'Python': [
            '3.11',
            '3.10',
            '3.9',
        ],
};

Using arrays we would do something like show: [] and if the checkbox is checked we would push the key (wordpress) into the show array as a value. and if unchecked, we'll remove the key (value wordpress in show) from the show array.

So show would be ['wordpress'] when wordpress is checked and ['wordpress', 'apache'] when wordpress and apache are checked.


this.event.target.checked ? show.push(key) : show.splice(show.indexOf(key))

show.push(key) for pushing into the array and show.splice(show.indexOf(key)) to remove from the array. They would be unique since we are adding and removing on-checked and unchecked. Otherwise, we would end up checking for the existence of a value in an array like this which would be unnecessary :

this.event.target.checked ? (show.indexOf(key) === -1 ? show.push(key) : '') : (show.indexOf(key) >= 0 ? show.splice(show.indexOf(key)) : '')

So the AlpineJS code would be as follows :

<div x-data="{ applications: [], show: [] }" x-init="applications = await get_applications()">
    <div>
        <template x-for="key in Object.keys(applications)">        
            <div>
                <div class="flex h-6 items-center">
                    <input :id="key" type="checkbox" :value="key" @click="this.event.target.checked ? show.push(key) : show.splice(show.indexOf(key))">
                    <label x-text="key" :for="key"></label>
                </div>
                <select x-show="show.indexOf(key) >= 0" :id="'select-' + key">
                    <template x-for="app in applications[key]">
                        <option :value="app" x-text="app"></option>
                    </template>
                </select>
            </div>
        </template>
    </div>
</div>

If we were to use Set (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) instead then we could replace the array part like :

show: [] with show: new Set()

this.event.target.checked ? show.push(key) : show.splice(show.indexOf(key))

with

this.event.target.checked ? show.add(key) : show.delete(key)

and show.indexOf(key) >= 0 with show.has(key)

Demos :

using Arrays - https://anjanesh.s3.amazonaws.com/demo/alpine/arrays.html

Using Set - https://anjanesh.s3.amazonaws.com/demo/alpine/set.html

Side Note: My AlpineJS dev tools always show the Set Object to be empty even after selecting a check , though it isn't.

]]><![CDATA[Using AlpineJS's $store magic]]>https://alpinejs.in/using-alpinejss-store-magichttps://alpinejs.in/using-alpinejss-store-magicTue, 28 Feb 2023 18:36:33 GMTI was trying to explain reactiveness using AlpineJS to a colleague at work but failed to make a point which is the crux of how the DOM gets updated.

It's based on this blog post which has a demo.

I went on to explain that, by simply adding an entry (entry being an object in this case) to the array will auto-magically update the DIV container by populating the new array's element into the HTML.

So I went ahead and did the obvious - (what I thought would / should work) - push an object into the array so that I can show him that the table gets a new row inserted without the need to write a single line of DOM manipulation code.

But there lay an issue where this didn't work! I tried to add an object to the array in the browser's console! Thing is, this will work only when pushed within the AlpineJS section - within where x-data="{ data: content }" is defined. Outside of this, there's no way to access AlpineJS's variables.

Here comes in the $store magic.

It's like a global variable attached to AlpineJS's 'store' which has all the hooks to AlpineJS's functionality. It defeats the purpose of localized variables, but the only advantage of this is if you want to access variables from the outside or in the browser's console.

We basically add an event listener to when AlpineJS inititializes by document.addEventListener("alpine:init") and adding a data variable to it and a function to update the data.

Alpine.store('global_data',
{
    data: content,
    push(name, description)
    {
        this.data.push({name, description});
    },
});

In the AlpineJS block we don't set the data in x-data - in this case we have it as x-data="{}"

And in the button on-click, we call the $store's global_data's push function

<button type="submit" x-on:click="$store.global_data.push(document.getElementById('name').value, document.getElementById('description').value);" class="btn btn-primary">Add</button>

I've added a lone global push function just to call it from the outside for us to test :

const push = (name, description) =>
{
    Alpine.store('global_data').push(name, description);
}

Basically, this is direct access to the array in the browser console :

Alpine.store('global_data').data.push({name: 'Test N', description: 'Test DescriptionN'});

I just demoed it using a function that just does this line above to make it shorter for typing.

Demo : https://anjanesh.s3.amazonaws.com/demo/alpine/alpinejs-global-storage.html

Gist: https://gist.github.com/anjanesh/86084b837bf6bc6acc43cbbbf923992f

]]><![CDATA[Using AlpineJS Template to load data from fetch]]>https://alpinejs.in/using-alpinejs-template-to-load-data-from-fetchhttps://alpinejs.in/using-alpinejs-template-to-load-data-from-fetchMon, 23 Jan 2023 04:52:39 GMTThis is a follow-up to this post of mine where I show how to retrieve data from a public google spreadsheet via their JSON output and show it in the webpage by setting the HTML to a DOM element via innerHTML. I think doing something like document.getElementById("razorui-faq").innerHTML = details; is going to be considered bad practice shortly. Just like using document.write() is frowned upon.

With Reactive libraries and frameworks like React, Angular, Vue, Svelte etc being the standard for using templates in DOM replacement methodologies, it may not be suitable to use a whole npm install for smaller, micro-websites that are used for marketing purposes or using in an existing WordPress page.

There's a faster solution - AlpineJS - it's reactive and has a smaller footprint and can be included in your webpage like you insert a jQuery CDN. Right now, all you got to do is to include https://unpkg.com/alpinejs@3.10.5/dist/cdn.min.js

<script src="https://unpkg.com/alpinejs@3.10.5/dist/cdn.min.js" defer></script>

This - we use x-init to fetch the data using await. Even the AlpineJS docs show it as x-init="posts = await (await fetch('/posts')).json()" as an example.

<div x-data="{ faqs: [] }" x-init="faqs = await fetchFAQ().then((data) => data )">
    <template x-for="faq in faqs">
        <details>
            <summary x-text="faq[0]"></summary>
            <p x-text="faq[1]"></p>
        </details>

    </template>
</div>

Get the content from the JSON as usual :

function getFAQ(json)
{    
    let faqList = [];
    let detail, summary;

    json.table.rows.forEach((row, i) =>
    {
        if (i == 0) return; // The first row is the header        

        try { detail = row.c[0].f ? row.c[0].f : row.c[0].v }
        catch(e){ detail = '' }

        try { summary = row.c[1].f ? row.c[1].f : row.c[1].v }
        catch(e){ summary = '' }

        faqList.push([detail, summary]);
    });

    return faqList;
}

The most important part: Using Promise by returning an await new Promise.

let fetchFAQ = async () =>
{
    return await new Promise((resolve, reject) =>
    {
        fetch(url)
        .then((response) => response.text())
        .then((data) =>
        {
            let json_string = data.substring(47).slice(0, -2);
            let details = getFAQ(JSON.parse(json_string));
            resolve(details);
        });
    });
}

Demo : https://anjanesh.s3.amazonaws.com/demo/fetch-alpine.html

]]><![CDATA[Replacing oninput with x-mask]]> Using the mask plugin we can achieve the comma separators inserted to the numbers in the text box instead of writing our own JavaScript. Replace something like this we get from searching Google oninput='th...]]>https://alpinejs.in/replacing-oninput-with-x-maskhttps://alpinejs.in/replacing-oninput-with-x-maskWed, 30 Nov 2022 10:38:11 GMT<input type="text" pattern="[0-9,.]{0,10}"/>

Using the mask plugin we can achieve the comma separators inserted to the numbers in the text box instead of writing our own JavaScript.

Replace something like this we get from searching Google

oninput='this.value = this.value.replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")'

with this :

x-mask:dynamic="$money($input)"

Finally :

<!-- Alpine Plugins -->
<script defer src="https://unpkg.com/@alpinejs/mask@3.x.x/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<input
    type="text"
    name="bid" 
    placeholder="Enter your bid amount"
    pattern="[0-9,.]{0,10}"
    x-mask:dynamic="$money($input)"
/>
]]><![CDATA[Show amount of money in Indian rupees as K / Lakhs / Crores]]>https://alpinejs.in/show-amount-of-money-in-indian-rupees-as-k-lakhs-croreshttps://alpinejs.in/show-amount-of-money-in-indian-rupees-as-k-lakhs-croresMon, 22 Aug 2022 03:58:07 GMTThe method to convert a number to Indian currency as K / lakhs / crores is at : https://anjanesh.dev/returning-amount-of-money-in-indian-ruppes-to-crores-lakhs-thousands

Here's the JavaScript equivalent using Intl.NumberFormat which is JavaScript's equivalent to PHP's number_format:

const INR_THOUSAND = 1000;
const INR_LAKH = 100 * INR_THOUSAND;
const INR_CRORE = 100 * INR_LAKH;

const formatter = new Intl.NumberFormat('en', { minimumFractionDigits: 0, maximumFractionDigits: 2 });

function amountInINR(amount)
{
    INR = amount;
    ext = "";

    if (amount > INR_CRORE)
    {
        INR = amount / INR_CRORE;
        ext = INR == 1 ? "crore" : "crores";
        INR = formatter.format(amount / INR_CRORE, 2) + ' ' + ext;
    }
    else if (amount > INR_LAKH)
    {
        INR = amount / INR_LAKH;
        ext = INR == 1 ? "lakh" : "lakhs";
        INR = formatter.format(amount / INR_LAKH, 2) + ' ' + ext;
    }
    else if (amount > INR_THOUSAND)
    {
        INR = amount / INR_THOUSAND;
        ext = INR == 1 ? "lakh" : "K";
        INR = formatter.format(amount / INR_THOUSAND, 2) + ' ' + ext;
    }    
    else
    {
        INR = formatter.format(amount, 2);
    }

    return INR;
}

The AlpineJS's template :

<div x-data="{ indian_amount: '' }">
  <input type="text" name="amount" required id="amount" x-model="indian_amount" />
  &nbsp;₹<span x-text="amountInINR(indian_amount)"></span>
</div>

Full Demo - https://anjanesh.s3.amazonaws.com/demo/alpine/x-model-inr-currency.html

Update : Intl.NumberFormat has the option to get INR out of it but the notation display is a bit different - for example, thousands is represented as T and not K - and this does not work in Safari (version 14 is what I tested it on).

let amountInINR = (amount) =>
{
    return new Intl.NumberFormat("en-IN", {
      style: "currency",
      currency: "INR",
      notation: "compact",
      compactDisplay: "long"
    }).format(amount);
}
  • 36000 will return ₹36T
  • 36000000 will return ₹3.6Cr
  • 36000000000 will return ₹3.6TCr

Thanks to this StackOverflow answer, .replace() is easiest to implement.

let amountInINR = (amount) =>
{
    return new Intl.NumberFormat("en-IN", {
      style: "currency",
      currency: "INR",
      notation: "compact",
      compactDisplay: "long",      
    }).format(amount).replace('T', 'K').replace('L', ' lakhs').replace('Cr', ' Crores');
}
]]>