I want a simpler way to assign icons to my jquery ui buttons

JQuery UI has a nice widget for the buttons, problem is, imoh, that when I want to assign an icon for a button I have to do it for each button separatly.

Here is the sample from the jquery ui website :

<!doctype html>

<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>jQuery UI Button - Icons</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css" />
 <script>
 $(function() {
 $( "button:first" ).button({
 icons: {
 primary: "ui-icon-locked"
 },
 text: false
 }).next().button({
 icons: {
 primary: "ui-icon-locked"
 }
 }).next().button({
 icons: {
 primary: "ui-icon-gear",
 secondary: "ui-icon-triangle-1-s"
 }
 }).next().button({
 icons: {
 primary: "ui-icon-gear",
 secondary: "ui-icon-triangle-1-s"
 },
 text: false
 });
 });
 </script>
</head>
<body>

<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>

</body>
</html>

jquerysample

It works but I think it’s not the easiest way, I would prefer to configure the html tag with a property to say what is the icon I want.

So my solution is to use the data attribute of the element on which we want the button widget to be applied


<a href="#" class="button" data-icon="ui-icon-pencil" id="myid">my text button</a>

and in the document ready of the page

 $(document).ready(function () {

 $(".button").button({
 create: function (event, ui) {
 var icon = $(this).data("icon");
 if (HasValue(icon)) {
 $(this).button("option", "icons", { primary: icon });
 }
 }
 });
});

Basicly, when a button is created, I check if I have a data-icon property setted, and if so I use it to set the primary icon property of the button.

textbutton

I’m working with ASP.NET, so if I use WebForms I put that little piece of code in my master page, and if I’m workgin with MVC, I put the code in the _layout.cshtml file.
This way I don’t have to worry about setting the icon for each button.

But where are the icons defined ?

The example I used sooner (ui-icon-pencil) is a class of the icon set of a jquery mobile theme (you can see what’s available on the themeroller page).

If I want to define a custom icon, I do it this way

in the CSS:

.ui-icon.ui-icon-xlsx
{
 background: transparent url('images/xlsx.png') no-repeat;
}

and in the html:

<a href="#" class="button" data-icon="ui-icon-pdf">XLSX</a>

xlsxbbbb

Incoming search terms:

  • jquery ui button text after custom icon
  • jquery icons
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1839 Mqf8WGIX7s3qD7uLvutu9gxie-OQDCa2ySTINzxj-w6aCXQGfGCWEjEIbmCktHLl d596d05459a5498b90ed63678a85b223af586124&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1837 sXzSMm0piBaFa0h2fbR563ejczMlrKDL1oPxTT_O6dOncfmOyf0LBPhGNXLcw8n9 df0ee9b1e96c3a9ef3b954fa54e9438162e88b36&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1836 oaSVkdZkA6LJeq_nfXgwmY4Xb5MIxm3ZjH-vgammjutA6_Juelx3WEX9lDcPUL-4 4b3e6d12c0d23d3fb59ff29d4adbfa768ccdff51&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1827 T2kAQ2K_vzbrtvOQ_MYpJYKwHbLKQdqSDlc1xOuw0bDnKofn3-g7fIFrw5J0_fqI 6dd2d5a7913fbc9a904f7f6327264899006b5ec9&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1825 iYptg4w29Vufvl69omrtpMsn_p1Ft2Gi9i6qzd8rbbEFK2uoWIyTKfCedBSepN5J f0a97f4da9ac6ab4379bd27cc8f1ee177b72db8b&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • button(option icons not working
  • button(option icons
  • assign ui

MVC and Entity Framework : Unable to retrieve the metadata for the model

Let’s say you are developing an MVC application and you want to add a generated controller with the associated views.

You do this:

  1. Setting the controller’s name
  2. Choosing the template: mvc controller with read/write actions and views, using Entity Framework
  3. Choosing the model class
  4. Choosing the data context
  5. Clicking “Add”

image001

It’s possible that you get this error:

image002

The solution is quite simple:

Just go in the web.config file and comment the connection string

image004

Then try again

image005

It works!

Don’t forget to uncomment your connection string and you are done.

Incoming search terms:

  • unable to retrieve metadata for model class
  • MVCandEntityFramework:Unabletoretrievethemetadataforthemodel
  • unable to retrieve metadata for
  • unable to retrieve metadata for model
  • unable to retrieve metadata for mvc
  • unable to retrieve metadata
  • entity framework unable to retrieve metadata
  • asp net mvc unable to retrieve metadata
  • mvc unable to retrieve metadata
  • yhs-fullyhosted_003