Programmatically adding jQuery UI Sliders causing problems

Question

I'm currently adding a div to use as a slider programmatically, but when I apply the slider to it, everything appears but I can't drag the handle nor do any of the hover states work correctly.

var container = $('<div class="container"></div>');
var slider_div = $('<div class="position_slider"></div>');

$(slider_div).slider();

container.append(slider_div);
$placeholder = $("#"+player_id);
$placeholder.append(container);

I've tried all number of combinations of adding the slider div to no avail, and I'm just wondering if there's something I don't know about that I've missed. Physically adding a <div class="position_slider"> to the page gets the slider working, but that's not an option.

Your container and slider_div are referencing actual tags in your page, not HTML fragments that you want to insert in the page. Is that what you meant to do? If so, what does the append add for you? — Lazarus
– Lazarus, Commented Mar 9, 2010 at 15:39
The append works perfectly and the slider get's built - I can see all the little ui classes on the div and the handle is there, you just can't drag it. When you click it the slider doesn't update with ui-active etc. either. — Wil
– Wil, Commented Mar 9, 2010 at 15:56

Wil · Accepted Answer · 2010-03-12 09:29:48Z

1

The problem was to do with jquery.flash altering the container DIV after the slider had been instantiated. I simply changed the order from build slider, append to container, insert flash to build slider, insert flash, append slider.

If you're having trouble whereby you can see the slider and all the ui components, but you can't operate it, try just removing all other jquery from the page apart from that which you need to accomplish the slider, then add it all back in one by one until you discover the gremlin.

answered Mar 12, 2010 at 9:29

Wil

5,0773 gold badges25 silver badges30 bronze badges

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

Comments

Lazarus · Accepted Answer · 2010-03-09 15:44:21Z

0

I think this will clear up what this should look like:

var container = '<div class="container"></div>';
var slider_div = '<div class="position_slider"></div>';

$("#"+player_id).append(container);
$(".container").append(slider_div);
$(".position_slider").slider();

I realise that you might want to create many sliders per page, hence the programmatic access, and for that I'd change the class references to ID references and use some kind of counter to create incremental IDs for the controls. I'll leave the actual implementation as an exercise for you.

answered Mar 9, 2010 at 15:44

Lazarus

43.2k4 gold badges47 silver badges54 bronze badges

5 Comments

Wil Over a year ago

Yea, you'll have to excuse the messyness, like I say I've been tinkering a lot so it's all a bit out of place. There's also actually a lot more going on in the container, I've just removed it for this example. So you're saying the sliders should all have unique IDs to work properly?

Lazarus Over a year ago

I think we'd have to see more of the code to be able to know for definite but I try to reserve classes for common visual adornments rather than use as control references. For me controls have specific purposes and as such need specific IDs.

Wil Over a year ago

The controls are all working fine, they're identified by their parent. It's this slider that's causing me headaches. I'll get a simpler example together and post it up.

Wil Over a year ago

Solved it - the problem was with another plugin, it was causing mischief, plugin removed - slider working. Good times. Thanks for the help Lazarus.

Lazarus Over a year ago

@Wil, post the details of your answer as an answer to this question and accept it to close the loop and help those looking for a similar answer in the future.

Aesthete · Accepted Answer · 2012-09-13 01:42:04Z

0

For anyone else who made have found this page, I encountered a similar problem.

This produces a slider that looks fine but does not operate.

var mySlider = $("<div/>").slider();
$(mySlider).clone().appendTo(SomeDiv);

Registering the new slider with slider() fixed the issue.

var mySlider = $("<div/>").slider();
$(mySlider).clone().slider().appendTo(SomeDiv);

answered Sep 13, 2012 at 1:42

Aesthete

18.9k6 gold badges38 silver badges46 bronze badges

Collectives™ on Stack Overflow

Programmatically adding jQuery UI Sliders causing problems

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related