I see a lot of google posts on this but all seems to be talking about how this is in progress. Does anyone know of a working version of jeditable and autocomplete functionality working together so i can click on text and get a textbox and have autocomplete functionality working against that textbox
EDIT:
I am opening a bounty, as it still seems like none of these solutions replicate Stack overflow tags + jeditable where i can use jeditable to get a editable texbox after clicking on text and then be able to enter a comma separated list that autocomplete each entry as i type (similar to entering tags in stack overflow).
Take a look at this
JQuery Based Inplace Editing + AutoComplete
Usage
$('#edit').editable( 'echo.php', // POST URL to send edited content
{ indicator : , // options for jeditable
event: 'click' // check jeditable.js for more options
},
{ url: "search.php", //url form where autocomplete options will be extracted
minChars: 1, // check autocomplete.js for more options
formatItem:formatItem,
selectOnly: 1,
inputSeparator:';' // a new option of inputSeparator was introduced.
}
);
You can use ',' as input separator.
This is exactly what Jeditable custom inputs are for. Check quick and dirty
working demo (start typing something starting with letter a).
Demo was done in 5 lines of code. It uses Jörn Zaefferer's Autocomple plugin for autocompletion:
$.editable.addInputType('autocomplete', {
element : $.editable.types.text.element,
plugin : function(settings, original) {
$('input', this).autocomplete(settings.autocomplete.data);
}
});
Then you can call Jeditable with something like:
$(".autocomplete").editable("http://www.example.com/save.php";, {
type : "autocomplete",
tooltip : "Click to edit...",
onblur : "submit",
autocomplete : {
multiple : true,
data : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]
}
});
I had the need for the same functionality with jeditable and autocomplete from bassistance, for a list of emails separated by a comma. So, I changed the demo from Mika Tuupola and had it working like this:
$.editable.addInputType('autocomplete', {
element: $.editable.types.text.element,
plugin: function(settings, original) {
$('input', this).autocomplete(settings.autocomplete.urlOrData,
settings.autocomplete.options);
}
});
And when you call jEditable you need to add the following:
$('.autocomplete').editable('http://www.example.com/save', {
type: 'autocomplete',
autocomplete: {
urlOrData: ["Aberdeen", "Ada", "Adamsville"] , // can also be url: 'http://www.example.com/autocomplete',
options: {
multiple: true
}
}
});
The basic thing to understand here is that when you call $('input', this).autocomplete(...) you are actually applying the autocomplete plugin functionality to the editable input, and that's where you must pass the autocomplete options, via the settings object, which is the same as the settings you pass to jeditable.
Editable: jQuery jeditable I've used it recently in my project (as such and with slight modification to work with page methods)
AutoComplete: bassistance
Combining it with jQuery UI isn't much different to Mika's example above. This works for me
$.editable.addInputType('autocomplete', {
element : $.editable.types.text.element,
plugin : function(settings, original) {
$('input', this).autocomplete(settings.autocomplete);
}
});
$(".autocomplete").editable("http://www.example.com/save.php", {
type : "autocomplete",
tooltip : "Click to edit...",
onblur : "submit",
autocomplete : {
minLength : 2,
source : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]
}
});
Complete working integration of dataTable, dataTables editable (legacy), jEditable, autocomplete jQuery plugins with AJAX source and results updated at bottom on page(i.e. appended to body of html) is solved by:
$.editable.addInputType('autocomplete', {
element: $.editable.types.text.element,
plugin: function(settings, original) {
var $row = $(this).closest('tr').prop('id');
settings.autocomplete.appendTo = "#results-"+$row;
$('input', this).autocomplete(settings.autocomplete);
}
});
Datatable legacy editable code:
{
tooltip: 'Click to update Owner',
type: 'autocomplete',
autocomplete: {
serviceUrl: './search/users/by/name',
minChars: 5,
paramName: 'username',
dataType: 'json'
},
cancel : 'Cancel',
submit : 'Submit',
}
TD in table have:
<td id="results-${obj.taskId}">
Related
I am creating a JsTree which has an input box Node. I want to enable auto-complete for this input box. The application is in angular4, but the file i am using for creating the jstree is a .js file.
inst.create_node(obj, {
li_attr : {
'class' : 'child-menu listener-menu'
},
a_attr:{
'ondragover' : 'allowDropSR(event,"widgets")',
'ondrop' : 'dropSR(event,"widgets")'
},
text : "<span>Enter Country here</span>"
},
"last", function(new_node) {
new_node.data = {
file : true,
stopDrilldown : true,
hasParent : true
};
setTimeout(function () {
inst.edit(new_node);
$('.jstree-rename-input').attr();
},0);
});
$('.widget-list-tab a').tab('show');
$('.jstree-clicked').next('ul').find('li:last').find('a').focus();
},
Best approach would have been to write your own jsTree plugin. You can possibly hook the keydown event of jsTree for edit box to populate your list of items as a autocomplete suggestion and using jQuery UI autocomplete feature.
.bind("keydown.jstree", function(e) {
if(e.target.tagName && e.target.tagName.toLowerCase() === "input"
&& e.target.className.toLowerCase() === "jstree-rename-input" ) {
$(".jstree-rename-input").autocomplete({
// AJAX can be used for list here
source: countries
});
}
});
countries: is the list suggestion.
You can see in more details at https://everyething.com/jsTree-with-AutoComplete-Box
I'm trying to create a select dialog that supports optgroup. The built in 'select' dialog doesn't handle that so I'm using the 'html' type dialog. It's working fine, but I'd like to put the focus on that select box when the dialog opens.
I've tried various things, but I can't get it to work. I'm wondering if I need to override getInputElement() and have it return the select element so I can call focus() on it, but I have no idea how to do that.
I also tried selecting the element with jQuery and using its focus() method, but that doesn't work.
I found that I can define a focus() function on the dialog element and in there make the appropriate call to the jQuery .focus().
CKEDITOR.dialog.add( 'myDialog', function( editor ) {
"use strict";
return {
title: 'Custom Dialog',
contents: [
{
id: 'tab-basic',
elements: [
{
type: 'html',
id: 'mealplan_select',
html: '<select id="my-select"></select>',
focus: function() {
$('#my-select').focus();
},
onShow: function() {
// focus this element
this.getInputElement().focus();
}
}
]
}
]
};
});
When I'm trying to paste into the empty area within the webix datatable, nothing happens and onPaste event doesn't occur.
Basically, I want to add a new item through onPaste even when existing data items aren't selected. But whether it's possible?
Something like the 'insert' operation in a list, but in my use-case the datatable can be empty after init (in the following sample I've added an item to make clipboard work). Here it is:
http://webix.com/snippet/9ae6635b
webix.ui({
id:'grid',
view:'datatable',
select:true,
clipboard:'custom',
editable:true,
columns:[
{ id:'id' },
{ id:'name', fillspace:true, editor:"text" },
{ id:'details' }
],
data: [
{ }
],
on:{
onPaste: function(text){
this.add({ id:webix.uid(), name:text })
}
}
});
Any suggestions are appreciated.
I found that 'clipbuffer' has focus only when datatable has the selection. Most probably it is required for data editing, detecting position or whatever. Anyway, the 'clipbuffer' can be focused manually:
var clipEvent = webix.event($$("grid").getNode(), "click", function(){
webix.clipbuffer.focus();
});
Sample: http://webix.com/snippet/aa441e70
Add the jQuery TextareaResizer jquery.textarearesizer.js library that StackOverflow uses to a textarea form field that us used by the jQuery edit in place library X-Editable
I have a simple working demo of the Textarearesizer.js plugin here http://codepen.io/jasondavis/pen/KpWybW which adds a Drag Hanlde to a textarea field and lets you click and drag to resise it.
I then try to add that same JavaScript code to make it work on a Textarea field generated from X-Editable here on this JSFiddle: http://jsfiddle.net/jasondavis/xBB5x/8558/
X-Editable JavaScript:
$('#description').editable({
type: 'textarea',
url: '/post',
pk: 1,
inputclass: 'task_description resizable',
highlight: '#F1FFE7',
mode: 'inline', // inline | popup
placement: 'top',
title: 'Enter Task Description',
validate: function(value) {
if ($.trim(value) === '') {
return 'Task Description is Required';
}
},
params: function(params) {
//Addition params in addition to the default: pk, name, value
params.userId = 1;
params.projectId = projectTaskModal.cache.projectId;
params.taskId = projectTaskModal.cache.taskId;
return params;
},
success: function(response, newValue) {
if (!response.success) return response.msg;
}
});
Textarea Resizer JavaScript:
/* jQuery textarea resizer plugin usage for Textarea */
$(document).ready(function() {
$('textarea.resizable:not(.processed)').TextAreaResizer();
});
I don't get any error messages however the Textarea field does not run the resizer code.
On the JSFiddle demo http://jsfiddle.net/jasondavis/xBB5x/8558/ when you click teh Text, the Textarea is revealed.
I think it may have something to do with the Textarea not being visible when the $('textarea.resizable:not(.processed)').TextAreaResizer(); code is ran since X-Editable does not show the Textarea until after you click on the text.
I also tried to do this:
$('#description').on('init', function(e, editable) {
$('textarea.resizable:not(.processed)').TextAreaResizer();
});
which runs my callback code when the editable field is initialized
I got it figured out. MY Textarea generated by X-Editable was not being generated in the DOM until after my call to the TextareaReizer plugin.
The solution was to use this Event that is ran after the form textarea is shown in the DOM...
$('#description').on('shown', function(e, editable) {
$('textarea.resizable:not(.processed)').TextAreaResizer();
});
Final solution demo working here http://jsfiddle.net/jasondavis/xBB5x/8559/
How can I add custom HTML instead of regular button in TinyMCE 4 inside the split button drop menu?
ed.addButton('demo_button', {
title: 'Demo Button',
type: 'splitbutton',
onclick: function() {
},
menu: [
{
text : 'Some Regular Button', onclick : function() {
}
},
{
//How to add some custom html for combo box here for example?
}
]
});
In previous version (TinyMCE 3) I was able to use this:
var c = cm.createSplitButton('demo_button', {
title : 'Demo Button',
onclick : function() {
}
});
c.onRenderMenu.add(function(c, m) {
m.onShowMenu.add(function(c,m){
var $menu = jQuery('#menu_'+c.id+'_co').find('tbody:first');
if($menu.data('added')) return;
$menu.append('SOME HTML HERE');
$menu.data('added',true);
});
});
So basically my question is how to migrate this piece of code to TinyMCE 4?
Cheers
If you were using TinyMCE 3.0 are now migrating to TinyMCE 4+, may be you can first try using their compat3x plugin, which will allow you to transition most of your old plugins without modifications as per their documentation available here:
TinyMCE compat3x plugin
Like you did with the v3, you have to edit the dom after TinyMCE rendering.
To catch rendering process, use init_instance_callback
See : http://www.tinymce.com/wiki.php/Configuration%3ainit_instance_callback
And this SO answer : https://stackoverflow.com/a/24557748/911718