Buttonset and javascript error

Question

In my console I have this javascript error when the page is loaded:

TypeError: $(...).buttonset is not a function closeVariantForm onclick

Is it possible to know where the problem is?

<p id="vstatus"><label for="variants_status">' . $this->app->getDef('text_status') . '</label>   On ' .  HTML::radioField('variants_status', 1) . '   Off ' .  HTML::radioField('variants_status', 0) . '</p>

<script>
$(function() {
    $('#vstatus').buttonset();
});


function closeVariantForm() {
    $('#variantForm').hide();

    // reset fields
    $('#availableVariantsList').find(':checkbox:checked, :radio:checked').attr('checked', false);
    $('#availableVariantsList').find(':checkbox[id^=vg]').attr('disabled', true);

    $('#vstatus').buttonset('refresh');

    $('#variants_default').removeAttr('checked disabled');

    $('#variantListing').show();
    $('#formButtons').animate({'opacity': '1'}, 'fast').children().removeAttr('disabled');
    $('#sectionMenuContainer').animate({'opacity': '1'}, 'fast').children().removeAttr('disabled');
}
</script>

.buttonset() is not a native jQuery function, but rather one from jQuery UI. Have you remembered to import jQuery UI? — Obsidian Age
– Obsidian Age, Commented Jan 30, 2018 at 2:55
You don't. If you want to use jQuery UI functionality, you import jQuery UI. — Obsidian Age
– Obsidian Age, Commented Jan 30, 2018 at 2:58
It's literally one line of code that you import, like you import jQuery: https://code.jquery.com/ui/1.12.1/jquery-ui.min.js. Just import that after you import jQuery. — Obsidian Age
– Obsidian Age, Commented Jan 30, 2018 at 3:09
jQuery UI is only 248 kilobytes. You could perhaps look at the documentation for buttonset, and build your own equivalent. But considering jQuery UI is maintained by a professional team whose job is to make jQuery UI as compatible and easy to use as possible, you'd be far better off simply importing jQuery UI (or not using buttonset at all). — Obsidian Age
– Obsidian Age, Commented Jan 30, 2018 at 3:31

monners · Accepted Answer · 2018-01-30 02:58:15Z

0

The error is at $('#vstatus').buttonset(); You're calling a method that doesn't exist on vanilla jQuery. Looks like you're trying to use a method on the jquery-ui extension. Are you including this extension in the page?

If you're loading the jquery-ui library, you'll need to make sure that this dependency is loaded before attempting to use any of the methods that this decorates jquery with, otherwise you'll get Type Errors, like this one.

answered Jan 30, 2018 at 2:58

monners

5,3422 gold badges31 silver badges47 bronze badges

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

2 Comments

Manu Over a year ago

I use jquery and boostrap4, not ui jquery, is possible to translate this point ?

monners Over a year ago

If you're asking how to include this lib, you can read the docs

Callat · Accepted Answer · 2018-01-30 20:46:01Z

From looking at the discussion in this post it looks to me like you need to install jQuery-ui. You have three ways of doing this that I was able to find quickly

1) CDN

Include the following line in your php file: <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> Here's the link for where that is : link to jQuery-UI cdn

2) Download and link

Download the library, unzip it and link it to your php file in a similar fashion to how you linked jQuery and bootstrap.

3) Install for ES6/7

I highly doubt that you're using these but in case you are you will need to make use of import to bring it into your project. There is a related post on that here: How to import jQuery UI using ES6/ES7 syntax?

NOTE Make sure to include jQuery BEFORE you include jQuery UI, it has a dependency on jQuery.

Collectives™ on Stack Overflow

Buttonset and javascript error

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related