Im using http://www.dynatable.com/ and there is a search input for filtering data. The problem is it works on hitting enter/losing focus etc and I want to use it on every letter change.
You can change dynatable to accomodate your needs. At line 1215 of jquery.dynatable.js(version 0.3.1), the search is performed on enter keypress. You may change this to keyup without waiting for enter key press.
Default Code:
$search
.bind(settings.inputs.queryEvent, function() {
obj.queries.runSearch($(this).val());
})
.bind('keyup', function(e) {
if (e.which == 13) {
obj.queries.runSearch($(this).val());
e.preventDefault();
}
});
Modified code:
$search
.bind(settings.inputs.queryEvent, function() {
obj.queries.runSearch($(this).val());
})
.bind('keyup', function(e) {
obj.queries.runSearch($(this).val());
e.preventDefault();
});
The following change to the jquery.dynatable.js code will do what you want, and will also update the results when the search input box is cleared with the "x" if you are using one. The reason the clear will also work is the event being used is "input" instead of "keyup" or "change", for reasons detailed in the documentation.
Unlike the input event, the change event is not necessarily fired for
each change to an element's value.
Original code
$search
.bind(settings.inputs.queryEvent, function() {
obj.queries.runSearch($(this).val());
})
.bind('kepress', function(e) {
if (e.which == 13) {
obj.queries.runSearch($(this).val());
e.preventDefault();
}
});
Modified code
$search
.bind(settings.inputs.queryEvent, function() {
obj.queries.runSearch($(this).val());
})
.bind('input', function(e) {
obj.queries.runSearch($(this).val());
e.preventDefault();
});
Note: Based off answer from nexuscreator. Very good answer, helped alot thank you.
worked for me :)
$search
.bind(settings.inputs.queryEvent, function() {
obj.queries.runSearch($(this).val());
})
.bind('keyup', function(e) {
obj.queries.runSearch($(this).val());
e.preventDefault();
});
Related
We currently have two HTML textareas 'tinput'(primary) and 'toutput' (secondary) where we mimic the input in the primary to be reflected in the secondary as if someone is really typing in the secondary. The idea is to trigger an 'autocomplete' (over ajax) on the secondary. We have this working but not optimally.
We have attached a JQuery UI 'Autocomplete' (JQAC) to the secondary with a minLength:3 set. You may know that, normally, after 3 characters have been entered, JQAC 'buffers' the char entries thereon after and doesn't make an ajax call for every char that has been entered. Which is ideal.
However, with our secondary mimicking we have subverted this behavior, unfortunately, where after the 3rd char entry a JQAC ajax call is being made for every char after-- which is not optimal. We know why but don't know how to get around it. We believe we've subverted this because we are calling
$('#tinput').autocomplete('search',$('#tinput').val())
in the secondary's key handle, which by JQAC's documentation forces an ajax call.
To summarize, we need the secondary, that has JQAC attached to it, to behave as if someone were really typing into it and the JQAC behaving normally.
Here is JS for what we have as our char input mimic handling(we've changed variable names for this post so please ignore typos):
$("#tinput").on('input', function (e) {
$("#toutput").val($("#tinput").text());
var newEvent = jQuery.Event("keypress");
newEvent.which = e.which; // # Some key code value
$("#toutput").trigger(newEvent);
});
$("#toutput").keypress(function(e) {
$("#toutput").autocomplete('search',$("#toutput").val());
});
$( "#tinput" ).autocomplete({
appendTo: "#modalparent",
source: function( request, response ) {
$.ajax({
url: "https://xxxxxx",
type: "POST",
dataType: "json",
data: JSON.stringify({ "ourterm": request.term}),
success: function( data ) {
response( $.map( data.data.suggestions, function( item ) {
return {
label: item,
value: item
};
}));
}
});
},
minLength: 3,
select: function( event, ui ) {
// console.log( ui.item ?
// "Selected: " + ui.item.label :
// "Nothing selected, input was " + this.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
Any thoughts would be appreciated. Thanks!
We have found an elegant solution. It was a minor modification to our original.
change the trigger event by the primary to 'input' instead of the original 'keypress'.
remove the handler for the secondary.
here is the updated JS:
$("#tinput").on('input', function (e) {
$("#toutput").val($("#tinput").text());
var newEvent = jQuery.Event("input");
newEvent.which = e.which; // # Some key code value
$("#toutput").trigger(newEvent);
});
and delete:
//$("#toutput").keypress(function(e) {
// $("#toutput").autocomplete('search',$("#toutput").val());
// });
DONE.
I would like this to log out the value of the input:
HTML:
<input id="spinner" />
JS:
$(function() {
$("#spinner").spinner({
change: function(event, ui) {
console.log(ui.value)
}
});
});
Fiddle: http://jsfiddle.net/u9T5s/
jsFiddle Demo
I am not sure what the appropriate hook is as far as the jquery ui API goes, but here is a simple way to do this as well:
$(function() {
$("#spinner").spinner();
$('.ui-spinner-up').click(function(){
console.log("Increased to "+$('#spinner').val());
});
$('.ui-spinner-down').click(function(){
console.log("Decreased to "+$('#spinner').val());
});
});
This this:
http://jsfiddle.net/u9T5s/1/
$(function() {
$("#spinner").spinner({
change: function(event, ui) {
console.log(this.value)
}
});
});
Use this.value instead of ui.value. This will take the current object to which the change function is attached.
Answer to comment: you implement different function one is change and one is spin.
Also change will execute one on blur after a real change happened an spin executes once up/down click is fired.
spin: function( event, ui ) {
if ( ui.value > 10 ) {
$( this ).spinner( "value", -10 );
return false;
} else if ( ui.value < -10 ) {
$( this ).spinner( "value", 10 );
return false;
}
}
I'm just exploring the Validate plug-in for JQuery. During implementing in my webapp made with JQueryMobile I stumbled over the fact that validating such an element is not so simple like usual input-elements.
So the Question is: How to enable validation for select?
The trick consists out of two parts:
Validate is by default ignoring :hidden. But that's what JQM does with an <select>: hide it and placing a div-span-wrapper on top. Solution is to redefine the ignore-selector:
{ignore: ":hidden:not(select)"}
To inform the user about the invalid field you have to show the error right on the wrapper:
$(error.element).closest('.ui-select').attr("title", error.message).addClass("invalidInput")
And now in an working example:
$.validator.setDefaults({
debug: true,
ignore: ":hidden:not(select)",
submitHandler: function() { alert("submitted!"); },
showErrors: function(map, list) {
$(this.currentElements).each(function() {
if(this.nodeName == "SELECT") {
$(this).closest('.ui-select').removeAttr("title").removeClass("invalidInput");
return true;
}
$(this).removeAttr("title").removeClass("invalidInput");
});
$.each(list, function(index, error) {
if(error.element.nodeName == "SELECT") {
$(error.element).closest('.ui-select').attr("title", error.message).addClass("invalidInput");
return true;
}
$(error.element).attr("title", error.message).addClass("invalidInput");
});
}
});
$('div[data-role="page"]').bind('pageinit', function(event) {
var rules = {};
$('input:not(:button)').each(function() {
rules[this.name] = {required:true};
});
$('#fzgherst').each(function() {
// revalidates the select when changed, other elements gets revalidatet onblur
$(this).on('change', function() {$(this).valid();});
rules[this.name] = {required:true};
});
$("form").validate({
rules: rules
});
});
That's all folks!
My jQuery datepicker only closes when picking a date, but I want it to close when the user clicks away from or on the close button. However, even with the showButtonPanel option set to true, the close button does not appear but the 'Today' button does.
I think it may have something to with having a custom onSelect action instead of the default but can't figure out how to close it myself. Tried using $.datepicker('hide') and ('destroy') but no difference.
$(document).ready(function() {
$.datepicker.setDefaults({firstDay: 1, dateFormat: 'dd/mm/yy', showAnim: 'fade'});
});
$(document).delegate('.editEndDate', 'click', function() {
$('.formattedEndDate').datepicker({
defaultDate: $('.formattedEndDate').attr('id'),
onSelect: function(dateText, inst) {
var date = dateText;
var data = 'project=' + projectId + '&date=' + date + '&dateToChange=end';
$.ajax({
type: 'POST',
url: 'helpers/change-project-date.php',
data: data + '&ajax=1',
success: function(response){
getNotification(response);
$('.formattedEndDate').fadeOut(function() {
$(this).load(location.href+ ' .formattedEndDate', function() {
$(this).fadeIn('slow');
});
});
},
error: function(response){
getNotification(response);
},
complete: function(response){
$('.formattedEndDate').datepicker('hide');
}
});
}
});
return false;
});
It may be something simple but I just can't see it. Thanks in advance.
I may have found a solution to my own problem...
$('.ui-datepicker').live('mouseleave', function() {
$('.ui-datepicker').fadeOut(function() {
$('.formattedStartDate').attr('class', 'formattedStartDate');
$(this).remove();
});
});
This works for me, hopefully it'll work for others too.
Everything blew up when I tried to use live. So I had to use on. I also added in input focus hide. So if you happen to focus on a different field the calendar isn't just hanging around. I also just did hide, but you should be able to switch it for fade if that is what you are wanting.
$('.bootstrap-datetimepicker-widget').on('mouseleave', function () {
$(this).hide();
})
$('input').on('focus', function () {
$('.bootstrap-datetimepicker-widget').hide();
});
I am trying to get the ckeditor working. Obviously it doesn't make use of the textarea so on submit the form doesn't submit the text in the editor. Beceause I make use of polymorphic associations etc. I can't make a onsubmit function to get the value of the textarea (when the form is submitted) .
So I found this question: Using jQuery to grab the content from CKEditor's iframe
with some very good answers. The answers posted there keep the textarea up to date. That is very nice and just what I need! Unfortunately I can't get it to work.
Does somebody know why (for example) this doesn't work?
I have a textarea (rails but it just translates to a normal textarea):
<%= f.text_area :body, :id => 'ckeditor', :rows => 3 %>
And the following js:
if(CKEDITOR.instances.ckeditor ) {
CKEDITOR.remove(CKEDITOR.instances.ckeditor);
}
CKEDITOR.replace( 'ckeditor',
{
skin : 'kama',
toolbar :[['Styles', 'Format', '-', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', 'Link']]});
CKEDITOR.instances["ckeditor"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);
//and paste event
this.document.on("paste", CK_jQ);
}
function CK_jQ()
{
CKEDITOR.instances.ckeditor.updateElement();
}
I get the following "error" in my firebug.
missing ) after argument list
[Break on this error] function CK_jQ()\n
Before submit do:
for(var instanceName in CKEDITOR.instances)
CKEDITOR.instances[instanceName].updateElement();
have you figured it out?
I'm using CKEditor version 3.6.1 with jQuery form submit handler. On submit the textarea is empty, which to me is not correct. However there is an easy workaround which you can use, presuming all your CKEditor textareas have the css class ckeditor.
$('textarea.ckeditor').each(function () {
var $textarea = $(this);
$textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
});
Execute the above before you do your submit handling ie. form validation.
Thanks #JohnDel for the info, and i use onchange to make it update every change.
CKEDITOR.on('instanceReady', function(){
$.each( CKEDITOR.instances, function(instance) {
CKEDITOR.instances[instance].on("change", function(e) {
for ( instance in CKEDITOR.instances )
CKEDITOR.instances[instance].updateElement();
});
});
});
Combination of all of the above answers into one.
Create a new custom.js file and add this:
CKEDITOR.on('instanceReady', function(){
$.each( CKEDITOR.instances, function(instance) {
CKEDITOR.instances[instance].on("instanceReady", function() {
this.document.on("keyup", CK_jQ);
this.document.on("paste", CK_jQ);
this.document.on("keypress", CK_jQ);
this.document.on("blur", CK_jQ);
this.document.on("change", CK_jQ);
});
});
});
function CK_jQ() {
for ( var instance in CKEDITOR.instances ) { CKEDITOR.instances[instance].updateElement(); }
}
You don't have to worry about the name of the textarea, just add a class ckeditor in the textarea, the above and you are done.
ADD Function JavaScript for Update
function CKupdate() {
for (instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
}
It's work. Cool
Just Add
CKEDITOR.instances.textAreaClientId.on('blur', function(){CKEDITOR.instances. textAreaClientId.updateElement();});
where textAreaClientId is your instance name
Regards
CKEDITOR.instances["ckeditor"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);
//and paste event
this.document.on("paste", CK_jQ);
})
I just increase that to the response of T.J. and worked for me:
$("form").on("submit", function(e){
$('textarea.ckeditor').each(function () {
var $textarea = $(this);
$textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
});
});
On load:
$(function () {
setTimeout(function () {
function CK_jQ(instance) {
return function () {
CKEDITOR.instances[instance].updateElement();
};
}
$.each(CKEDITOR.instances, function (instance) {
CKEDITOR.instances[instance].on("keyup", CK_jQ(instance));
CKEDITOR.instances[instance].on("paste", CK_jQ(instance));
CKEDITOR.instances[instance].on("keypress", CK_jQ(instance));
CKEDITOR.instances[instance].on("blur", CK_jQ(instance));
CKEDITOR.instances[instance].on("change", CK_jQ(instance));
});
}, 0 /* 0 => To run after all */);
});
There have been some API changes with the latest versions of CKEditor, so here's an answer for CKEditor 5:
let ckeditor;
// Create a CKEditor, and store its handle someplace that you may
// access later. In this example, we'll use the `ckeditor` variable:
ClassicEditor
.create(document.querySelector("textarea"), {})
.then(editor => { ckeditor = editor; });
// When your form submits, use the `updateSourceElement` method
// on the editor's handle:
document.querySelector("form").addEventListener("submit", function() {
ckeditor.updateSourceElement();
});
To my knowledge, CKEditor does this automatically when you submit a form, so this particular example shouldn't actually do anything. But it is useful when you need the content of the textarea to udpate without submitting the form that contains it.
All above answer are focusing on how to fix this error but I want to take the answer on what cause me this error
I had a
<textarea class="ckeditor" rows="6" name="Cms[description]"></textarea>
changed to
<textarea class="ckedit" rows="6" name="Cms[description]"></textarea>
I changed class attribute value to anything other than ckeditor and boom error gone.
Hope that help