-1

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>
dferenc
  • 7,918
  • 12
  • 41
  • 49
Manu
  • 9
  • 2
    `.buttonset()` is not a native jQuery function, but rather one from jQuery UI. Have you remembered to import jQuery UI? – Obsidian Age Jan 30 '18 at 02:55
  • @ObsidianAge, ok, how to have the equivalent for jquery ? – Manu Jan 30 '18 at 02:57
  • 2
    You don't. If you want to use jQuery UI functionality, you import jQuery UI. – Obsidian Age Jan 30 '18 at 02:58
  • @ObsidianAge: I use jquery and boostrap4, not ui jquery, is possible to translate this point ? – Manu Jan 30 '18 at 03:02
  • 2
    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 Jan 30 '18 at 03:09
  • @ObsidianAge: No I don't want include ui jquery that's why I would know if there is an equivalent code – Manu Jan 30 '18 at 03:20
  • 1
    jQuery UI is only 248 kilobytes. You could perhaps look at the [**documentation**](https://api.jqueryui.com/buttonset/) 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 Jan 30 '18 at 03:31
  • Code Snippet? Testable example? – Callat Jan 30 '18 at 20:12

2 Answers2

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.

monners
  • 5,174
  • 2
  • 28
  • 47
-1

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.

Callat
  • 2,928
  • 5
  • 30
  • 47