Develop Reference

Could not enter date manually using jqxDateTimeInput

We are using jqxWidgets as a part of UI in our project.
To display the date we are jqxDateTimeInput widget.
The problem here is we could not manually input the date without using calendar icon. But in the demo shown in jqxwidget website in the link below the date can be edited manually.
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatetimeinput/index.htm#demos/jqxdatetimeinput/defaultfunctionality.htm
Does anyone what should be done to make the date field to be edited manually?
Is there any license restriction on this?
We are yet to get the license and now we are using trial version.
- JS extract:
$("#fromDate").jqxDateTimeInput({
width : 200,
height : 25,
formatString : "dd/MMM/yyyy",
theme: theme
});

Same problem, adding globalize.js helped

I had the same problem here. I spend a lot of hours to fix it, but I got it! I had 2 calls of jQuery: one in the main file, with 1.9.1 version and another in my grid file, with 1.10.2 version. After removing the call of 1.9.1 version, I solved the problem. Check your jQuery calls and try again.

CKeditor radio vertical

I am trying to make the radio button vertical using CKEditor's 4 api.
I saw this ticket from the official website, but in my version of CKEditor I don't have the Dialogui folder since it's an optimized version. I have then dowloaded a source version form the builder but when i use this version my custom plugins aren't working anymore. I get those kind of error for a piece of code which I know is correct.
TypeError: CKEDITOR.dialogCommand is not a constructor
editor.addCommand( 'lien' , new CKEDITOR.dialogCommand( 'lienDialog',{ allowedContent: 'a[title,!href,id,onclick,target]'
} ) );
so my question is how can I make my radio buttons vertical using the optimized version of CKEditor ?

ok well I found in the optimized code the line to change to make it work : it's at line 434 more or less depend of version I think i just change this
new CKEDITOR.ui.dialog.hbox(b,e,d,h);
by this
if(a.labelLayout=='vertical')new CKEDITOR.ui.dialog.vbox(b,e,d,h);else new CKEDITOR.ui.dialog.hbox(b,e,d,h);
hope it could help someone.

Filter Builder in Javascript

Anyone knows a javascript alternative to something like:
http://demos.devexpress.com/ASPxGridViewDemos/Filtering/FilterBuilder.aspx
-> click on the condition in the footer of the grid to see the filter
Can be a jquery plugin, jqGrid plugin or anything.
Any suggestion appreciated, thanks.

There is an open source project in Google Code, which meets your requirement. Checkout the demo here:
http://expbuilder.googlecode.com/hg/src/cb/condition-builder.html
Edit: Google Code is no longer active but if you're really interested in trying this old answer, you can download the source code here: https://code.google.com/archive/p/expbuilder/source/default/source

I checked Paramesh solution and found it good enough for me.
However while integrating with project, I found js is rather lacking more modern jQuery features, as well as it can be simplified. So I did.
My alternative solution:
https://github.com/Drachenfels/sql-like-query-builder-for-js
With demo:
https://dl.dropboxusercontent.com/u/196245/condition-builder/condition-builder.html
Maybe someone will find it useful some day.
Feel free to copy/paste/change/suggest fixes/suggest features. ;)

DevExtreme recently released js Filter Builder widget, and it works in different approaches and jQuery also supported. You can see Filter Builder Demo

Good jQuery Autocomplete that is not part of jQuery UI?

Is there a good alternative to jQuery UI autocomplete?
I couldn't find one on the internet. jQuery UI is far too big for just using the autocomplete, and I don't want to roll yet another autocomplete on my own.
Answer: jQuery UI custom build for just autocomplete is 23,052 bytes. SO uses the original Zaefferer version that was adapted into jQuery UI autocomplete. I guess if it's good enough for SO, it's good enough for me, forked it from agarzola on GitHub.

A Google search for 'jquery autocomplete' produced this DevBridge one (and all the others):
http://www.devbridge.com/projects/autocomplete/jquery/
This is also the most highly upvoted non-accepted answer in the possible duplicate of this question.

You can download a customized version of jQuery UI with just the components you need from http://jqueryui.com/download. Click Deselect all components then click the checkbox next to Autocomplete. The resulting minified js file is 20 KB uncompressed.

The jQuery official plugin :
http://docs.jquery.com/Plugins/autocomplete
Select2 jQuery plugin that turn select into autocomplete input+list :
http://ivaynberg.github.io/select2/
Chosen jQuery plugin, same thing but from a different author :
http://harvesthq.github.io/chosen/
Jörn Zaefferer jQuery plugin :
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
Yahoo YUI :
http://developer.yahoo.com/yui/autocomplete/
Selectize.js (jQuery-based) :
https://selectize.github.io/selectize.js/
Twitter Typeahead :
https://twitter.github.io/typeahead.js/

See https://github.com/agarzola/jQueryAutocompletePlugin/blob/master/jquery.autocomplete.js

You can download a custom version of jQuery UI that only includes the autocomplete module:
http://jqueryui.com/download

3 year old question this but since it comes 2nd on Google results for "best jquery-ui autocomplete alternative" I believe it's worth placing a link here for twitter's Typeahead implementation: http://twitter.github.io/typeahead.js/
Slightly annoying that you might need the Hogan templating engine to make it work (adding a few more kb's to the load), but if you invest the time to read the docs it will be worth it.
I replaced my "location lookup" jquery UI implementation after 30 mins of perusing the docs with the (simplified) code structure below:
$('.location_text_field').typeahead({
name : 'locations',
remote : {
url : "/get_locations.php",
filter : function (response) {
return response.locations;
}
},
template : '<p>{{{label}}}</p>',
engine : Hogan
}).on({
// When the user selects a location do something clever
'typeahead:selected' : function (e, datum) {
// Doing something clever here....
},
// Reset the cleverness above if the user changed
// the text of the field manually on his own
'keyup' : function () {
// Reset cleverness
}
});
... and it works like a charm.

I was just looking for an alternative myself and found this
https://github.com/onigoetz/jquery.autocomplete
It uses jQuery, but not jQuery UI. It is size conscious, and it compatible with jQuery UI. Its "forked from agarzola/jQueryAutocompletePlugin" on github.
It may not have the backing of the well known jQuery UI implementation, but I tested it, and right now it seems to be everything advertised.

Is possible to have more granular control over jQuery UI Dialog Widget's show/hide method?

Currently it seems that I can only use effects in their most basic form when using the Dialog widget. For example, the following will use the drop effect for both showing and hiding the dialog box:
$('#dialog').dialog({show:'drop', hide:'drop'});
However, the default for the drop method always drops to the left. What I really want is for it to drop to the right. Something like this:
$('#dialog').dialog({
show:{effect:'drop', direction:'right'},
hide:{effect:'drop', direction:'right'}
});
Is this possible?
I'm currently using 1.6rc6. I've also tried it 1.5.3 (stable) without any luck.
After digging into the source a bit, I don't think this is supported in both version 1.5.3 and 1.6rc*. It'll probably require a change to the API before the functionality above can be supported. Steerpike has found a version that probably should be in the mainline. If anyone knows otherwise, do correct me.

Actually, you can use any of the jQuery UI effects; e.g. pulsate:
$("#dialog").dialog({ show: "pulsate" });
There are plenty to be found here: http://docs.jquery.com/UI/Effects/
Note that there is a dependency on effects.core.js.
I tried passing an option (like you did) into 'show', it didn't work. I also tried to make 'show' a function, no luck avail.
What works however is:
$("a").click(function() {
$("#dialog").hide("drop", { direction: "right" }, 1000);
});

This is currently not Possible with 1.6 and 1.7.1.

You may find this link of dialog box examples useful. In particular the second one from the right. I'm not sure if it's using the standard dialogue plugin, but you should be able to figure it out from the examples they use.