I've been using this knockout binding from this jsfiddle (from this initial SO question) for a while and it has been working.
After upgrading to jQuery 1.8.3 and jQuery UI 1.9.2 (jsfiddle), when typing text into the input, after the items list is populated (but not selected!), the input textbox is cleared and you have to restart typing from the beginning. That's annoying as you won't be able to complete your text input because you always have to start from scratch.
If the jqAutoSourceInputValue and the jqAutoSourceValue have the same property name, it works, but then either the id or the input value after the selection are not the desired one.
Looks like the issue is coming from the fact that the binding's update function has a dependency on the observableArray that is being updated. I am not quite sure what has changed in jQuery UI to make the actual behavior change from before, but one fix is to update to Knockout 2.2.1 and access the observableArray via the peek function to avoid a dependency. Something like:
var source = (ko.isObservable(allBindings.jqAutoSource) ? allBindings.jqAutoSource.peek() : allBindings.jqAutoSource) || [];
Updated fiddle: http://jsfiddle.net/rniemeyer/xXuq6/
If you can't update to KO 2.2.1, then there are some other ways to do it as well. Let me know.
Related
I'm encountering an issue using the YADCF date filter for DataTables with the Bootstrap-Datetimepicker styling option. The issue is that the Months/Years/ are overflowing from the dropdown container. The weird part is that the actual date selection looks fine. I've included some screenshots below.
This is what the month selection looks like, the year selection looks the same way.
However, the date selection looks normal, like this:
I have other date picker drop downs throughout my app that look normal:
Initializing the date filter field as so:
yadcf.init(tableElement.DataTable(), [
{ column_number : 11,
filter_type: "range_date",
datepicker_type: 'bootstrap-datetimepicker',
date_format: 'YYYY-MM-DD',
filter_container_id: 'yadcfDateDiv'
}]);
I just can't seem to figure out what styling property is needed to resolve this. I've tried adjusting the padding/margins (as suggested in other posts I've found) of the months and such but it just makes them closer together, not below each other like the last screenshot. If anyone has any ideas it would be greatly appreciated.
Versions
YADCF: 0.9.4
DataTables: 1.10.16
Eonasdan/bootstrap-datetimepicker 4.7.14
After digging through the Eonasdan/bootstrap-datetimepicker documentation, I discovered that the DateTimePicker plugin has a WidgetParent option that can be used to set the parent element in which the widget will reside.
Since I am initializing the DateTimePicker plugin through YADCF and passing in a custom filter_container_id, I found that if I also passed that same element to the WidgetParent property it will display as intended.
I have added the following code to my DataTable initialization function for the page which has resolved this issue:
$('input[id^="#yadcf-filter--orders-datatable"]').data("DateTimePicker").options({
"widgetParent": '#yadcfDateDiv'
});
It selects both of the input fields that are generated by the YADCF plugin which the DateTimePicker objects are bound to and sets the appropriate parent element.
Hopefully this helps some future Googler.
I am calling a AJAX web service, In the success callback function, I am adding options to a Dropdownlist dynamically. We are using JQuery Mobile in this application.
$("#mylist").append(
$('<option id="myoption' + index + '"></option>').val(myobject.id).html(myobject.description)
);
});
$('#mylist').trigger('change');
But, these options are not getting displayed immediately. Only when i click on any of other static options, Dynamic Options are getting visible.
I saw in few threads, suggesting to use trigger() or refreshmenu. But none of them are working. Is it due to callback function I am using?
Thank you ezanker,
.selectmenu('refresh',true) is working. In my case, I was referring JQuery JS file twice. Once in higher version and second in lower version. It took lower version. In the lower version, selectmenu is not supported.
As soon as I remove the second incorrect JS reference, it worked.
I'm migrating an app from rails to volt which uses some jquery plugins.
As example, one of them is http://ionden.com/a/plugins/ion.rangeSlider/en.html
I'm using opal-jquery inside action_ready to call the plugin, and visually it works. However internally it hides the original input and uses .val() to set the value for that input once the slider gets moved by the user. The problem is that even that the input is declared with a reactive field as its value, once jquery changes its value, the variable stays the same instead of syncing with the input value
this problem could be reproduced by creating a input like
<input type="text" value={{_value}} id="example"/> <p>{{_value}}</p>
and in the console do something like
$('#example').val('only the visual will change')
the same thing would apply for other plugins like jquery.ui sortable in which the callback would populate a field from the model with a index value.
is there a way to make legacy plugins that change values work with voltrb?
Select boxes converted to Select2, do not automatically integrate with unobtrusive validation mechanism in ASP.NET MVC framework.
For example, on a form which contains a regular select box (marked as required in model definition), submitting the form while no options have been selected in the select box, will cause the border and background of the select box to take a reddish color, and by using #Html.ValidationMessageFor, error messages, if any, can be displayed beside the box. However if the select box is converted to a Select2 component, then none of the mentioned features work any more. Even the validation error message will not show up.
It seems that the reason for even the validation error message not showing, is because Select2 changes the display CSS property of the original select box to none (display:none), and I guess the unobtrusive validation script does not bother generating error messages for invisible fields.
Any ideas / solutions?
This issue isn't really specific to Select2, but rather to the jQuery unobtrusive validator.
You can turn on validation for hidden fields as highlighted in this answer.
$.validator.setDefaults({
ignore: ''
});
As the comments noted, it didn't work inside an anonymous callback function within $(document).ready(). I had to put it at the top level.
I've run into similar issues with the select2 plugin. I don't know exactly which features you're using specifically, but in my experience, when you set an element as a select2 in the document.ready event, the plugin will change some of the element's attributes on the fly (inspect one of the elements after your page has finished loading - oftentimes you'll see the id and class properties are different than what you're seeing when you view source).
It's difficult to offer more without actually seeing the code, but here's a few ideas to get you started:
First off, obviously make sure you have the a link to your select2.css stylesheet in the header.
Then, since you're talking about form submissions, I'd recommend you examine whether or not you're getting a full postback or submitting via AJAX (if you're using jQueryMobile, you're using AJAX unless you override it in the jquerymobile.js file or set a data-ajax="false" in your form attributes). You can just look at the value returned by Request.IsAjaxRequest() for this. Obviously if you're submitting via ajax, you won't hit the document.ready event and the select2 won't initialize properly and you'd need to figure out a way around that. Try refreshing the page after the submit and see if it renders the select2 component.
Then I'd suggest examining the elements and see if they're not behaving like you'd expect because you're actually trying to work with classes that the plugin has reassigned at runtime. You can either just adjust your logic, or you can dig into the select2 code itself and change the behavior - it's actually fairly well-documented what the code is doing, and if you hop on the Google group for select2, Igor is usually pretty quick to follow up with questions.
like this
$('select').on('select2:select', function (evt){
$(this).blur();
});
$('body').on('change', 'select.m-select2', function () {
$(this).blur();
})
http://jsfiddle.net/AYPze/9/
In this example I have two similar divs with the same goal. Bind the selected date from the datetimepicker and save it to the object binded by knockout js.
The problem with the first div is that the datetimepicker won't show up because i use the knockout "with" binding.
The second div uses the normal knockout js binding syntax, which works fine with the datetimepicker.
I experienced this behavior also with the jquery-ui Accordion
My Questions:
Is this a bug in knockout or jquery-ui?
Is there a work around, so I can use the "with" binding?
Your problem is related to the with binding, but not in the way you think.
The problem you have is that the with binding in this case will remove the jQuery datepicker from the DOM element and that is why you don't see the datepicker for the first textbox.
The main problem here is that you are breaking a very important rule when working with Knockout and the DOM. You shouldn't access the DOM directly with jQuery like you are doing now. You have to use a bindingHandler to bridge the gap between your data model and the DOM model.
The Binding Handlers seem complex at first, but they are pretty handy once you get to know them.
Here is an updated version of your fiddle with a working datepicker: http://jsfiddle.net/AYPze/10/