CODEWITHSUNDEEP
jquery-ui
15 Volts
15 Volts

Reputation: 2077

Secondary button icon not showing in JQueryUI

I am learning a JQuery tutorial where I am intended to display a JQuery button with primary and secondary icons. The instructor's button looks like this:

enter image description here

The same code for me displays a button like this:

enter image description here

My code:

<!Doctype HTML>

<html>
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    </head>

    <body>
        <button id="button1">Button 1</button>

        <script>
            $('#button1').button({
                icons: {
                    primary: 'ui-icon-mail-closed',
                    secondary: 'ui-icon-caret-1-e'
                }
            })
        </script>
    </body>
</html>

Now when I comment out the primary: '...' option, I can see the secondary button, but not both. Has JQueryUI changed? How can I show 2 icons on the button like the instructor's?

Upvotes: 0

Views: 467

Answers (1)

Twisty
Twisty

Reputation: 30899

Note: The button widget was rewritten in 1.12. Some options changed, you can find documentation for the old options in the 1.11 button docs. This widget used to bundle support for inputs of type radio and checkbox, this is now deprecated, use the checkboxradio widget instead. It also used to bundle the buttonset widget, this is also deprecated, use the controlgroup widget instead.

So the Quick Fix is to use older Library: 1.11.4. Example:

$(function() {
  $('#button1').button({
    icons: {
      primary: 'ui-icon-mail-closed',
      secondary: 'ui-icon-caret-1-e'
    }
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="button1">Button 1</button>

This works.

The other method would be to add the element manually or use Controlgroup.

Upvotes: 2

Related Questions