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
Within my model I have an object array with observable elements. I have a subscribe on one of these elements (a dropdown list) in order to fill in the next dropdown (cascading dropdowns). I now need to get the description of the selected value in these dropdowns. How would I pull that value from the dropdown list? I am trying to avoid running a query against the server if possible.
In the past I have done self.deptName($('#AssignedDepartment option:selected').text()); but now this dropdown isn't unique. I could have many to choose from. I am using uniqueName: true on each of the fields. How, within the subscribe, do I determine which dropdown changed?
Here is what my subscribe looks like:
// Build the hours types when the request type is selected
self.RequestType.subscribe(function (newValue) {
FindRequestType(newValue, function (record) {
// Do stuff
});
});
Here is the HTML for the dropdown:
<select class="required span12" data-bind="leaveTypeDropDown: RequestType, uniqueName: true"></select>
Here is the bindingHandler:
ko.bindingHandlers.leaveTypeDropDown = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// If we don't have the leave request dropdown data, pull it.
if (jsonRequestType === "") {
$.ajax({
'async': false,
'url': '/api/payroll/LeaveRequestTypes/',
'dataType': 'text json',
'type': 'GET',
'success': function (json) {
jsonRequestType = json;
jsonRequestTypeRecieved = true;
}
});
}
// Fill the drop down list.
LoadRequestType(element);
// register event handler where bound observable will be changed
ko.utils.registerEventHandler(element, 'change', function () {
var observable = valueAccessor();
observable(element.value);
});
// Select the value from the previous record if there is one.
if (selectedRequestType !== null) {
element.value = selectedRequestType;
ko.utils.triggerEvent(element, 'change');
selectedRequestType = null;
}
}
};
Update 1: Since there is confusion. If I select the value "VAC" with the text of "Vacation" in my dropdown list. How do I get the text "Vacation" into my model?
Update 2: Here is a jsFiddle with my (mostly) working code as listed above. http://jsfiddle.net/MikeWills/cykuqxto/6/ For some reason, on load my drop downs don't work, but add another day and you'll see my working dropdowns.
We have to clean up your approach a little bit. First, let's make all the observables we need on your model and populate the first drop down choices with your ajax call:
var viewModel = {
firstDropDownOptions: ko.observableArray(),
firstDropDownChoice: ko.observable()
};
$.ajax(...).done(function (data) {
// process data and assign
// for the binding below to work, processedData has to have items like this:
// {textProperty: 'some text', otherProperty: ...}
// as you said in a comment, you have option groups so I'm going to assume
// processedData looks like this overall:
// [{group: 'one', options: [{text: 'Vacation', value: 'VAC'}, ...]}, ...]
viewModel.firstDropDownOptions(processedData);
});
Then let's bind that observable to your drop down using the options binding:
<select data-bind="foreach: firstDropDownOptions, value: firstDropDownChoice">
<optgroup data-bind="attr: {label: label}, foreach: options">
<option data-bind="text: text, option: $data"></option>
</optgroup>
</select>
This is using the custom binding from KnockoutJS - Binding value of select with optgroup and javascript objects:
ko.bindingHandlers.option = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
ko.selectExtensions.writeValue(element, value); // note this is magic
}
};
Finally, let's subscribe to the observable that monitors changes to this first drop down:
viewModel.firstDropDownChoice.subscribe(function (newChoice) {
// in this function, newChoice is the option selected in the first drop down,
// but not just the value, the whole object, so you can do:
console.log(newChoice, newChoice.text);
});
I have a jqgrid with the add dialog enabled for adding new rows. The way I would like it to work is that the user will select from a list of drop down items and the item chosen will cause a second drop-down to be populated with data based on the first item.
For example, if my grid had two columns, one for country and one for state, when the user clicked the add button, the country input would be a drop-down, dynamically populated with countries by an ajax call. Then, when the user selects a country, the state drop-down is populated based on the country selected.
Currently I am doing something like the following:
beforeProcessing: function () {
var allcountries = ajaxcall();
$('#clientReportsGrid').setColProp('Countries', { editoptions: { value: allcountries, class: 'edit-select' }, editrules: { required: true, edithidden: true} });
},
loadComplete: function () {
$('#Countries').change(function () {
// States will be populated here
alert("changed");
});
}
The first part in beforeProcessing works fine and the countries drop-down is populated as expected. However, the event in loadComplete does not get attached to the select input with id the 'Countries' and the alert never occurs. It seems that the select object has not yet been created with loadComplete fires, but if that is the case I'm not sure where to place the logic where the states will be populated.
Any ideas?
jqGrid has no direct support of depended selects, but in the answer you will find the implementation of the scenario. The most problem is that the code is not small, but it's quickly to analyse a working code as to write your own one.
I ended up doing something like the following, its a bit redundant but it works and isn't too code heavy:
First, in the beforeProcessing callback, I populate both the countries and states drop-downs with their initial values:
beforeProcessing: function () {
var allcountries = ajaxCallToFetchCounties();
$('#clientReportsGrid').setColProp('Countries', { editoptions: { value: allcountries, class: 'edit-select' }, editrules: { required: true, edithidden: true} });
var states = ajaxCallToFetchStates();
$('#clientReportsGrid').setColProp('States', { editoptions: { value: states , class: 'edit-select' }, editrules: { required: true, edithidden: true} });
}
Then in the pager's add option, I used the beforeShowForm callback to attach a method to the change event of the countries select input, and within that method I fetch the states based on the current country and repopulate the select control:
beforeShowForm: function (form) {
$("#Countries").unbind("change").bind("change", function () {
var states = ajaxCallToFetchStates();
//Manually clear and re-populate the states select box here with the new list of states.
});
$('#tr_AccountCode', form).show();
}
I have the following script which works with a 1 dimensional array. Is it possible to get this to work with a 2 dimensional array? Then whichever item is selected, by clicking on a second button on the page, should display the id of whichever item is selected.
This is the script with the 1 dimensional array:
var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
$("#txtAllowSearch").autocomplete({
source: $local_source
});
This is the script for the button to check the id, which is incomplete:
$('#button').click(function() {
// alert($("#txtAllowSearch").someone_get_id_of_selected_item);
});
You need to use the ui.item.label (the text) and ui.item.value (the id) properties
$('#selector').autocomplete({
source: url,
select: function (event, ui) {
$("#txtAllowSearch").val(ui.item.label); // display the selected text
$("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input
}
});
$('#button').click(function() {
alert($("#txtAllowSearchID").val()); // get the id from the hidden input
});
[Edit] You also asked how to create the multi-dimensional array...
You should be able create the array like so:
var $local_source = [[0,"c++"], [1,"java"], [2,"php"], [3,"coldfusion"],
[4,"javascript"], [5,"asp"], [6,"ruby"]];
Read more about how to work with multi-dimensional arrays here: http://www.javascriptkit.com/javatutors/literal-notation2.shtml
From the Overview tab of jQuery autocomplete plugin:
The local data can be a simple Array
of Strings, or it contains Objects for
each item in the array, with either a
label or value property or both. The
label property is displayed in the
suggestion menu. The value will be
inserted into the input element after
the user selected something from the
menu. If just one property is
specified, it will be used for both,
eg. if you provide only
value-properties, the value will also
be used as the label.
So your "two-dimensional" array could look like:
var $local_source = [{
value: 1,
label: "c++"
}, {
value: 2,
label: "java"
}, {
value: 3,
label: "php"
}, {
value: 4,
label: "coldfusion"
}, {
value: 5,
label: "javascript"
}, {
value: 6,
label: "asp"
}, {
value: 7,
label: "ruby"
}];
You can access the label and value properties inside focus and select event through the ui argument using ui.item.label and ui.item.value.
Edit
Seems like you have to "cancel" the focus and select events so that it does not place the id numbers inside the text boxes. While doing so you can copy the value in a hidden variable instead. Here is an example.
My code only worked when I added 'return false' to the select function. Without this, the input was set with the right value inside the select function and then it was set to the id value after the select function was over. The return false solved this problem.
$('#sistema_select').autocomplete({
minLength: 3,
source: <?php echo $lista_sistemas;?> ,
select: function (event, ui) {
$('#sistema_select').val(ui.item.label); // display the selected text
$('#sistema_select_id').val(ui.item.value); // save selected id to hidden input
return false;
},
change: function( event, ui ) {
$( "#sistema_select_id" ).val( ui.item? ui.item.value : 0 );
}
});
In addition, I added a function to the change event because, if the user writes something in the input or erases a part of the item label after one item was selected, I need to update the hidden field so that I don´t get the wrong (outdated) id. For example, if my source is:
var $local_source = [
{value: 1, label: "c++"},
{value: 2, label: "java"}]
and the user type ja and select the 'java' option with the autocomplete, I store the value 2 in the hidden field. If the user erase a letter from 'java', por exemple ending up with 'jva' in the input field, I can´t pass to my code the id 2, because the user changed the value. In this case I set the id to 0.
Just want to share what worked on my end, in case it would be able to help someone else too. Alternatively based on Paty Lustosa's answer above, please allow me to add another approach derived from this site where he used an ajax approach for the source method
http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3
The kicker is the resulting "string" or json format from your php script (listing.php below) that derives the result set to be shown in the autocomplete field should follow something like this:
{"list":[
{"value": 1, "label": "abc"},
{"value": 2, "label": "def"},
{"value": 3, "label": "ghi"}
]}
Then on the source portion of the autocomplete method:
source: function(request, response) {
$.getJSON("listing.php", {
term: request.term
}, function(data) {
var array = data.error ? [] : $.map(data.list, function(m) {
return {
label: m.label,
value: m.value
};
});
response(array);
});
},
select: function (event, ui) {
$("#autocomplete_field").val(ui.item.label); // display the selected text
$("#field_id").val(ui.item.value); // save selected id to hidden input
return false;
}
Hope this helps... all the best!
Assuming the objects in your source array have an id property...
var $local_source = [
{ id: 1, value: "c++" },
{ id: 2, value: "java" },
{ id: 3, value: "php" },
{ id: 4, value: "coldfusion" },
{ id: 5, value: "javascript" },
{ id: 6, value: "asp" },
{ id: 7, value: "ruby" }];
Getting hold of the current instance and inspecting its selectedItem property will allow you to retrieve the properties of the currently selceted item. In this case alerting the id of the selected item.
$('#button').click(function() {
alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id;
});
<script type="text/javascript">
$(function () {
$("#MyTextBox").autocomplete({
source: "MyDataFactory.ashx",
minLength: 2,
select: function (event, ui) {
$('#MyIdTextBox').val(ui.item.id);
return ui.item.label;
}
});
});
The above responses helped but, did not work in my implementation.
The instead of using setting the value using jQuery, I am returning the value from the function to the select option.
The MyDataFactory.ashx page has a class with three properties Id, Label, Value.
Pass the List into the JavaScript serializer, and return the response.
I do not think that there is need to hack around the value and label properties, use hidden input fields or to suppress events. You may add your own custom property to each Autocomplete object and then read that property value later.
Here is an example.
$(#yourInputTextBox).autocomplete({
source: function(request, response) {
// Do something with request.term (what was keyed in by the user).
// It could be an AJAX call or some search from local data.
// To keep this part short, I will do some search from local data.
// Let's assume we get some results immediately, where
// results is an array containing objects with some id and name.
var results = yourSearchClass.search(request.term);
// Populate the array that will be passed to the response callback.
var autocompleteObjects = [];
for (var i = 0; i < results.length; i++) {
var object = {
// Used by jQuery Autocomplete to show
// autocomplete suggestions as well as
// the text in yourInputTextBox upon selection.
// Assign them to a value that you want the user to see.
value: results[i].name;
label: results[i].name;
// Put our own custom id here.
// If you want to, you can even put the result object.
id: results[i].id;
};
autocompleteObjects.push(object);
}
// Invoke the response callback.
response(autocompleteObjects);
},
select: function(event, ui) {
// Retrieve your id here and do something with it.
console.log(ui.item.id);
}
});
The documentation mentions you have to pass in an array of objects with label and value properties. However, you may certainly pass in objects with more than these two properties and read them later.
Here is the relevant part I am referring to.
Array: An array can be used for local data. There are two supported
formats: An array of strings: [ "Choice1", "Choice2" ] An array of
objects with label and value properties: [ { label: "Choice1", value:
"value1" }, ... ] The label property is displayed in the suggestion
menu. The value will be inserted into the input element when a user
selects an item. If just one property is specified, it will be used
for both, e.g., if you provide only value properties, the value will
also be used as the label.
At last i did it Thanks alot friends, and a special thanks to Mr https://stackoverflow.com/users/87015/salman-a because of his code i was able to solve it properly. finally my code is looking like this as i am using groovy grails i hope this will help somebody there.. Thanks alot
html code looks like this in my gsp page
<input id="populate-dropdown" name="nameofClient" type="text">
<input id="wilhaveid" name="idofclient" type="text">
script Function is like this in my gsp page
<script>
$( "#populate-dropdown").on('input', function() {
$.ajax({
url:'autoCOmp',
data: {inputField: $("#populate-dropdown").val()},
success: function(resp){
$('#populate-dropdown').autocomplete({
source:resp,
select: function (event, ui) {
$("#populate-dropdown").val(ui.item.label);
$("#wilhaveid").val(ui.item.value);
return false;
}
})
}
});
});
</script>
And my controller code is like this
def autoCOmp(){
println(params)
def c = Client.createCriteria()
def results = c.list {
like("nameOfClient", params.inputField+"%")
}
def itemList = []
results.each{
itemList << [value:it.id,label:it.nameOfClient]
}
println(itemList)
render itemList as JSON
}
One more thing i have not set id field hidden because at first i was checking that i am getting the exact id , you can keep it hidden just put type=hidden instead of text for second input item in html
Thanks !
I've tried above code displaying (value or ID) in text-box insted of Label text. After that I've tried event.preventDefault() it's working perfectly...
var e = [{"label":"PHP","value":"1"},{"label":"Java","value":"2"}]
$(".jquery-autocomplete").autocomplete({
source: e,select: function( event, ui ) {
event.preventDefault();
$('.jquery-autocomplete').val(ui.item.label);
console.log(ui.item.label);
console.log(ui.item.value);
}
});
This can be done without the use of hidden field. You have to take benefit of the JQuerys ability to make custom attributes on run time.
('#selector').autocomplete({
source: url,
select: function (event, ui) {
$("#txtAllowSearch").val(ui.item.label); // display the selected text
$("#txtAllowSearch").attr('item_id',ui.item.value); // save selected id to hidden input
}
});
$('#button').click(function() {
alert($("#txtAllowSearch").attr('item_id')); // get the id from the hidden input
});
Auto Complete Text box binding using Jquery
## HTML Code For Text Box and For Handling UserID use Hidden value ##
<div class="ui-widget">
#Html.TextBox("userName")
#Html.Hidden("userId")
</div>
Below Library's is Required
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Jquery Script
$("#userName").autocomplete(
{
source: function (request,responce)
{
debugger
var Name = $("#userName").val();
$.ajax({
url: "/Dashboard/UserNames",
method: "POST",
contentType: "application/json",
data: JSON.stringify({
Name: Name
}),
dataType: 'json',
success: function (data) {
debugger
responce(data);
},
error: function (err) {
alert(err);
}
});
},
select: function (event, ui) {
$("#userName").val(ui.item.label); // display the selected text
$("#userId").val(ui.item.value); // save selected id to hidden input
return false;
}
})
Return data Should be below format
label = u.person_full_name,
value = u.user_id