I'm trying to render sliders instead of select components.
Each page has several select components marked with class='jqselect' and all of them will have decreasing year values (some years may be missing).
Eg. a select may have values [2010, 2009, 2006, 2005, 2004].
I have tried binding it both following the examples in the jQuery UI doc (but ignoring the missing years) and using selectToUISlider by filamentgroup (http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support//). None of them work.
Here is what I've done so far:
Binding selects with following slider container divs:
$('#content div.jqslider').slider({
animate: true,
min: $(this).prev().children().last().val(),
max: $(this).prev().children().first().val(),
slide: function(event, ui) {
var select = $(this).prev();
select.val($(this).slider('option', 'value'));
console.log($(this).slider('option', 'value')); //debug
}
});
This renders the slider, but console logs values from 0 to 100 and selects obviously does not change with the event.
Using selectToUISlider:
$('#content select.jqselect').selectToUISlider();
This does not even render the slider, throwing an error 'b is undefined' in jquery-min.js (line 30, v1.4.2). If I pass the identifier of only one of the sliders, it is rendered but very buggy.
Please, I'm stucked in the by two days and any help is much appreciated.
Regards,
Arthur
Thanks for those who have visited.
After 2 days trying I could have it working using selectToUISlider.
Simple stuff, but got me plenty of work and trial/errors.
selects = $('#content select.jqselect');
$.each(selects, function(key, value) {
$('#' + $(selects[key]).attr('id')).selectToUISlider().hide();
});
If anyone know of a better of more optimized way of doing this, please comment, and you will be very welcome.
Regards.
Related
Consider the following toy example: jsfiddle
chart: {
events: {
render: myfunc
}
},
...
function myfunc() {
var chart = this;
chart.series.forEach(function(s) {
s.setState('inactive', true);
});
chart.series[0].setState('hover');
}
The intended behavior is to set the state of the first series as hover while setting all other series as inactive after load and redraw events.
The code works as intended after load
However, it doesn't work after redraw (via the select box). After selecting an option in the box, the series are rendered as normal instead of as inactive UNLESS any series had been previously hovered. That is, the code works if you interact with any series AND THEN select an option in the box, but it doesn't work if you select an option in the box immediately after the loading without interacting on the series.
Surprisingly, after some inspection in the console, I noted that in any case the intended states are properly passed to the series object. So, why the states are not properly rendered?
*NOTE: In my actual application the hovered series is not necessarily the first one, but it varies depending on the output of other function. I'm aware that "myfunc" could be simplified in the current example, but for general purposes please suggest an answer keeping the basic structure if possible.
This seems to be related to this issue from HighChart's GitHub. In your case, HighCharts is correctly updating the series' state. However, while rendering it fails to set the proper opacity value associated with the 'inactive' state. The workaround is to explicitly set the opacity of the series to the same value it should have in the 'inactive' state.
// F U N C T I O N S E T S T A T E
function myfunc() {
var chart = this;
chart.series.forEach(function(s) {
//explicit opacity
s.opacity = 0.2;
s.setState('inactive', true);
});
chart.series[0].setState('hover');
}
Thank you for sharing this issue, it seems that it is a regression after the last release.
In the previous version it used to work fine: https://jsfiddle.net/BlackLabel/Lbpvdwam/
<script src="https://code.highcharts.com/8.1.0/highcharts.js"></script>
<script src="https://code.highcharts.com/8.1.0/highcharts-more.js"></script>
I reported it on Highcharts Github issue channel where you can follow this thread: https://github.com/highcharts/highcharts/issues/13719
If you don't need any new features/bugfixes use the previous version as a temporary workaround.
I have been trying to implement the autocomplete and have come across a problem that has stumped me. The first time I call .autocomplete it all works fine and I have no problems. If, however, I call it after I have removed some (unrelated) elements from the DOM and added a new section to the DOM then autocomplete does nothing and reports no errors.
Code:-
$.ajax({
type : 'get',
dataType : 'json',
url : '/finance/occupations',
cache:true,
success:function(data){
occupationList = data;
$('.js-occupation').autocomplete({
source: occupationList,
messages: {
noResults: '',
results: function(){}
},
minLength : 2,
select:function(event, ui){
$('.js-occupationId').val(ui.item.id);
}
});
}
});
The background to this page is that it contains multiple sections that are manipulated as the user moves through them. Hide and show works fine and does not impact on the autocomplete. However, if I do the following:-
var section = $('.js-addressForm:last').clone();
clearForm(section);
$('div.addressDetails').append(section);
$('.js-addressForm:first').remove();
Which gives the user the bility to add multiple addresses on the previous section then the autocomplete stops working.
Any suggestions or pointers on something obvious I am missing?
I have tried to put the initialisation of the autocomplete on an event when the element gets focus and it still does not work.
You have to create the autocomplete after all other underlying objects. If you F12, you will see that the list is "visible", however it is below and hidden by all instances created after it.
If you created a div with inputs (one input being the autocomplete), then you create the automplete then the dialog instances, the autocomplete will never show. If you create the dialog then the autocomplete, no problem. The problem is the z-order
I have faced the same issue. For now to fix this, i'm creating widget on the input once input is in focus. It will help you solve the issue.
You can look for the help on
making sure some event bing only when needed
Sample code will look like this
$( "#target" ).focus(function() {
//I don't care if you manipulated the DOM or not. I'll be cautious. ;)
(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
})();
// use a flag variable if you want
});
This solved my problem. Hope its the solution you were looking f
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Sortable and droppable knockout list
I am using knockout to bind a UL. I am wanting to gives users the ability to drag and drop a LI and for my viewmodel to update with the reorder.
Drag and drop is working and I have the correct event working within my jquery but I am not sure how to make the update.
I have had a hunt around the documentation but cant find anything.
I've created a fiddle to make explaining what I am doing a little easier
Js Fiddle here
Any suggestions would be awesome!
Updated the jsfiddle link
I've never worked with Knockout and I don't have time to understand its intricacies right now, so this isn't a complete solution, but here's something to get you started. See below for links to some pages I found while searching that may help you complete the solution.
This is the part that I changed from your original fiddle:
var view_model = new ViewModel(initialData);
ko.applyBindings(view_model);
$(function() {
$( "#sortable" ).sortable({
revert: true,
stop: function(event, ui) { console.log("stop event")},
start : function ( event, ui ) {
ui.item.data( 'previous_index', ui.item.index() );
},
// start
update : function ( event, ui ) {
var question = view_model.questions.splice(
ui.item.data( 'previous_index' ), 1
)[0];
view_model.questions.splice( ui.item.index(), 0, question );
ui.item.removeData( 'previous_index' );
}
// update
});
});
References:
jQuery UI Sortable, how to determine current location and new location in update event?
get the start position of an item using the jquery ui sortable plugin
jQuery Sortable() with original position placeholder?
knockout + jqueryui draggable/droppable follow-up
Ryan Niemeyer has authored a Knockout plug-in for this purpose:
https://github.com/rniemeyer/knockout-sortable
Here is an updated blog entry:
http://www.knockmeout.net/2012/02/revisiting-dragging-dropping-and.html
wasted my day while searching how to get selected options values in JQuery UI widget by Michael Aufreiter. Here's the link to his demo site and github: http://quasipartikel.at/multiselect/
As a result I just need value fields of selected options without POST/GET sendings to PHP script.
I tried many methods and resultless.
Need your help and ideas
*Found many topics about jquery ui multiselect but useless because of Aufreiter :s *
That should work. Tested with Chrome console
$("#countries").val();
I went to the site you've got listed above, and was able to run this in my chrome console:
$('.ui-multiselect .selected li').each(function(idx,el){ console.log(el.title); });
It seems like the values you want are stored in the title attributes of the list items within the div.selected element.
Edit:
Doh! Well of course you want the values. Sorry mate. Completely missed that. The real goods are stored in the jQuery data() objects. In this case, the key you want is 'optionLink'. It maintains a reference to an option element. Each list item in the '.selected' div used the jQuery.data() method to add the underlying option to it.
So, you need to get the selected list items, iterate through, grab the 'optionLink' from the data jQuery data store, and then get the value.
The following code works on the example page:
$('.ui-multiselect .selected li').each(function(idx,el){
console.log(el);
var link = $(el).data('optionLink');
// link now points to a jQuery wrapped <option> tag
// I do a test on link first. not sure why, but one of them was undefined.
// however, I got all four values. So I'm not sure what the first <li>
// is. I'm thinking it's the header...
if(link){
// here's your value. add it to an array, or whatever you need to do.
console.log(link.val());
}
});
This is the first I've seen of the multiselect. It's slick. But I sympathize with your frustration trying to get something out. A 'getSelectedOptions()' method would be nice.
Cheers
Try accessing the selected values on the close event.
e.g.
$("#dropdown").multiselect({
header: false,
selectedList : 1,
height: "auto",
}).multiselectfilter().bind("multiselectclose", function(event, ui) {
var value = $("#dropdown").val();
});
Hope that helps.
Best solution
$('#select').multiselect({
selectAllValue: 'multiselect-all',
enableCaseInsensitiveFiltering: true,
enableFiltering: true,
height: "auto",
close: function() {
debugger;
var values = new Array();
$(this).multiselect("getChecked").each(function(index, item) {
values.push($(item).val());
});
$("input[id*=SelectedValues]").val(values.join(","));
}
});
You can try this:
$('#ListBoxId').multiselect({
isOpen: true,
keepOpen: true,
filter: true
});
I'm working with the 'Connect list trough tabs' demo. I modified the code a little bit. I added the 'foo' class to the tabs-1 and tabs-2 elements.
I also added the following script:
$(".foo ul").sortable({
stop: function (event, ui) {
var tabId = $(this).attr('id');
var elementIndex = ui.item.index();
alert('tab id: ' + tabId + ' | element index: ' + elementIndex);
}});
It works super fine when I change the sort order of elements inside same tab, but I have the problem when I drop the element from the first tab to the second tab (or vice versa), because the element is firstly placed on the first position in tab1 (tab id = sortable1, element index = 0), and after that it is dropped to the second tab on the last position. The problem is because the sortable event is not fired for the second time.
I'm missing something but don't know what :)
Any help would be greatly appreciated.
Thank you!
EDIT:
Demo can be found on the following link: http://jqueryui.com/demos/sortable/#connect-lists-through-tabs
Did you ever find an answer to this? Because I'm currently having the same problem - trying a range of ways around it, but so far to no success.
EDIT
Scratch that, just found what I think is the most efficient way to resolve. Bind the event "DOMNodeInserted" to the <ul> list class you're using, and you can test the list item by searching its current DOM position:
$(".connectedSortable").bind("DOMNodeInserted", function() {
$('#tabs').find('li#staff-'+currentStaffId).each(function() {
listDeptID = $(this).parent().parent().attr('id');
listDeptID = listDeptID.split('-');
listDeptID = listDeptID[1];
....
In this example of mine, I have my list items with the id of staff-x with the id of that staff member, so the find returns one array element, and runs quite efficiently.
HTH
Jester.