2

I'm trying to add the selectmenu jqueryui plugin to my page. I have gone to https://github.com/fnagel/jquery-ui and copied the file jquery.ui.selectmenu.js from the ui folder. I have then included a link to this javascript from my page. I have a fresh install of jquery and jqueryui installed and other functionality is ok but when I add a $('select').selectmenu(); to my page I end up with a horrible mess. All of the new selectmenus are appended to the bottom of the page instead of replacing the selects.

Is there a step I've missed?

The following is the html from the page showing the files I have linked to. My understanding is that the custom.css and custom.min.js files should have all of the scripts and stylesheets I need in them. Is this wrong?

<link href="/stylesheets/jquery-ui-1.8.6.custom.css?1289473366" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/jquery-1.4.2.min.js?1288662624" type="text/javascript"></script>
<script src="/javascripts/jquery-ui-1.8.6.custom.min.js?1289401432" type="text/javascript"></script>
<script src="/javascripts/jquery.ui.selectmenu.js?1289469657" type="text/javascript"></script>

A datepicker item I have on my page is displayed with the appropriate css applied.

brad
  • 9,573
  • 12
  • 62
  • 89

3 Answers3

2

From what i can see, you are using a fork jQuery UI version of selectmenu, and you need appropriate styles in order to get the expected results as @brad noticed in the first place.

Adding only

jquery-ui-1.8.6.custom.css

as a reference will not solve your specific selectmenu requirements, you need to add another css reference that will include proper styling rules for the selectmenu elements.

ljubomir
  • 1,495
  • 1
  • 21
  • 40
  • i was referring to @Simon, not @brad, sorry. – ljubomir Nov 11 '10 at 11:55
  • 1
    Aah, that's getting very close to the solution. I have now included the jquery.ui.selectmenu.css file from the themes/base directory of the selectmenu fork. This improves things but there are still major problems with the display of the selects. Is there another file I need to include? Do I need to make a specific css file to match the theme I have used? – brad Nov 11 '10 at 23:23
  • i believe you will need to reference additional css files The point is that jquery UI stylesheets are organized in a such a way that you have to include some basic styling rules that apply to all UI plugins and plugin-specific ones. This way you can assure the consistency of your user interface even when combining different plugins in one page. – ljubomir Nov 19 '10 at 14:14
1

There is a small issue in the jquery.ui.selectmenu.js file.

One div is appended at the end of the body instead of being inserted after the element of the select. So if you have only one select it works fine. If you want to add several selects then you need to change the plugin from:

...
this.listWrap = $( "<div />", {
        'class': self.widgetBaseClass + '-menu'
    }).append( this.list ).appendTo( o.appendTo );
...

to:

...
this.listWrap = $( "<div />", {
        'class': self.widgetBaseClass + '-menu'
    }).append( this.list ).insertAfter( this.element );
....
Francois
  • 11
  • 1
1

The fact that selectmenu() does not trigger an error shows, that the plugin is loaded correctly. The messed up display could be caused by missing css files. Have you included all necessary css files from the themes folder or jquery ui?

Simon
  • 3,509
  • 18
  • 21
  • I think I have included everything I need. I've expanded the question with some info about what I have included. Am I missing something? – brad Nov 11 '10 at 11:39