Access properties from a function inside Alpine JS

Question

I try to use some of my jQuery plugins within Alpine (of course Alpine should replace jQuery in long-term). This autocomplete plugin theoretically works as expected, but I can't set the targetCustomerId from within the onSelect(). How can I access and change the values of my object properties from inside the autocomplete functions?

x-data="
        postForm($el.id, 'contracts/add', {
            targetCustomerId: '<?=$customer->CUSTOMERID;?>',

            init() {
                customerInput = $($refs.autocompleteInput).autocomplete({
                    type: 'POST',
                    serviceUrl: 'api/getCustomers',
                    onSearchStart: function() {
                        $(this).addClass('input-loader')
                    },
                    onSearchComplete: function() {
                        $(this).removeClass('input-loader')
                    },
                    onSearchError: function() {
                        $(this).removeClass('input-loader')
                    },
                    onSelect: function (suggestion) {
                        this.targetCustomerId = suggestion.value;
                    }
                });
            }
        })
    "

The postForm() is simplified just something like this:

function postForm(formId, url, objSettings) {
    var defaults = {
        form: document.getElementById(formId),
        formData: '',
        message: '',
        isLoading: false
    }

    return {...defaults, ...objSettings};
}

Could you also share the definition of postForm function and some form code? Do you try to use targetCustomerId as an Alpine.js variable? — Dauros
– Dauros, Commented Feb 2, 2022 at 7:12
@Dauros the postForm() is unneccessary for this example. it just does some basic form preparation and "return {...defaultsSettings, ...customSettings};", where customSettings is the third parameter of postForm(). I want to use/set targetCustomerId as an Alpine.js variable. — visioncode
– visioncode, Commented Feb 2, 2022 at 7:37

Dauros · Accepted Answer · 2022-02-02 08:45:49Z

2

According to https://github.com/devbridge/jQuery-Autocomplete's documentation, inside the onSelect method, the this variable refers the input element so we cannot access Alpine.js context like this, we have to use e.g. $data magic.

Assuming the response data looks like this:

{
    "suggestions": [
        { "value": "Customer 1", "data": 1 },
        { "value": "Customer 2", "data": 2 }
    ]
}

So the data refers to CustomerId not the value field, the modified onSelect method:

onSelect: function (suggestion) {
    $data.targetCustomerId = suggestion.data;
}

Here $data refers to Alpine.js data object, and suggestion is the clicked autocomplete item.

answered Feb 2, 2022 at 8:45

Dauros

10.7k2 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

visioncode Over a year ago

thanks a lot. $data was exactly what I was looking for :)

Collectives™ on Stack Overflow

Access properties from a function inside Alpine JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related