Develop Reference

JQuery autocomplete not working with minLength 0 and custom styling

I am using jquery-ui autocomplete with Bootstrap custom styling.
I followed exact code given in example here:
However this doesnt seem to be working for minLength: 0, That is autocomplete doesnt appear when we click on input box or even when we type in a character or two. However if you backspace after typing and remove everything from input box, then the autocomplete options would appear. It is not searching any options either.
Demo: JSFiddle

You are just missing a label property in your source array. That is the property against which jQuery autocomplete compares the user input. Here's the updated fiddle: https://jsfiddle.net/wa91nxmb/2/
Also, here's the part of code that changes:
var coupons = [
{
coupon: 'abced',
label: 'abced',
desc: '50 OFF'
},
{
coupon: 'GG_hijk',
label: 'GG_hijk',
desc: '75 OFF'
},
];
Since you want to display all options when user focuses on the empty textbox, you can bind on the focus event and trigger the search through javascript.
$("#coupon").focus(function(){
$(this).autocomplete("search", $(this).val());
});

Handsontable copy/paste hidden data

I'm using Handsontable with objects as the data backing. The data looks something like this:
[
{ productId: 1, productName: "Shirt", productType: "Clothing" }
{ productId: 2, productName: "Pants", productType: "Clothing" }
]
The Handsontable columns configuration looks like this:
columns: [
{ data: "productName" },
{ data: "productType" }
]
So the productId field is not included in the table, or in other words, the productId column is hidden.
When the user highlights a row in the table and presses Ctrl+C, then Ctrl+V in another row, only productName and productType are transferred to the new row. productId is not copied, but I want it to be. How can I make Handsontable copy the hidden data in addition to the visible data?
I have looked into including the productId field in the table, but hiding it with css. This used to be the only way to have hidden data in Handsontable, as you can see in this thread. But none of those solutions seem to work very well. I have also considered modifying what gets copied using a beforeCellCopy event, as in this thread. But that is a very hacky and ugly way to solve this problem. Any other ideas?

So you want to copy paste it outside of Handsontable, I presume. That means you want to add content to your clipboard beyond what a CTRL+C event would normally do. This means you have to get nasty regardless so a beforeCellCopy event sounds like a perfect idea.
The only other thing you could do is to capture the key strokes event yourself, stop propagation, and use the clipboard plugin to send it whatever data you want. This one may be cleaner but it involves working with the clipboard plugin.

How to sanitize X-Editable value *before* editing?

I'm using X-Editable to give users the possibility to edit values inline. This works great, but I now want to use it for some money values which are localized in a "European way" (e.g.: € 12.000.000,00). When I click edit, I want the input to only contain 12000000 though.
Is there a way that I can sanitize the value in X-editable before it gets displayed in the X-Editable input? All tips are welcome!

See the plunker http://plnkr.co/edit/Vu78gRmlKzxrAGwCFy0b. From X-editable documentation it is evident you can use value property of configuration to format the value you want to send to the editor as shown below.
Element displaying money value in your HTML:
12.000.000,00
Javascript code in your HTML:
<script type="text/javascript">
$(document).ready(function() {
$.fn.editable.defaults.mode = 'inline';
$('#money').editable({
type: 'text',
pk: 1, //Whatever is pk of the data
url: '/post', //Post URL
title: 'Enter money', //The title you want to display when editing
value:function(input) {
return $('#money').text().replace(/\./g, '').replace(/,00$/,'');
}
});
});
</script>
If you want to format the value back for display after editing you can do that in display property of the configuration hash like this:
$('#money').editable({
type: 'text',
pk: 1, //Whatever is pk of the data
url: '/post', //Post URL
title: 'Enter money', //The title you want to display when editing
value:function() {
return $('#money').text().replace(/\./g, '').replace(/,00$/,'');
},
display:function(value) {
//var formattedValue = formatTheValueAsYouWant(value);
//$('#money').text(formattedValue);
}
});

Seems like there is no callback function available for what you want.
so You need to make it outside of the library.
here is how to do it.
$(document).on("focus",".form-control.input-sm",function(){
//remove all characters but numbers
var _val = $(this).val().match(/\d/g).join("");
//set it.
$(this).val(_val);
});
replace the part of .form-control.input-sm into your case.
I just tested this on the library's demo site's first demo fieled named "Simple text field" with chrome developper tools
http://vitalets.github.io/x-editable/demo-bs3.html
Since x-editable form would be generated right before showing up.You need to hook an event to document and wait for input field inside of x-editable form gets focus which is the time x-editable shows up and edit the value into whatever you want.
and Yes, This method works AFTER the input field shows up but It's hardly possible to notice that value is changing after it gets displayed.

Getting JS to set post data

I'm currently working a page that lists a lot of users inside a table using a role id.
The role id value is gathered using the select dropdown and then pressing submit. This shows the table below with all the users with that specific role. The way this is done is that when the form is submitted, the id is returned inside the $_POST of my select box. What i want to do is not use a submit button at all, I want to be able to scroll through the different roles, and when I click on a different role within the select, it update the table below automatically without needing to post.
Let's say my select box is called role:
<select id="role">
And the options are:
id: 1, name: blah1
id: 2, name: blah2
I have been working on trying to get this work using ajax and posting the data back to PHP using the change function. Here is my code:
$(document).ready(function() {
$('#role').change(function(){
var role_id = $('#role').val();
$.ajax({
url: 'assign-roles-2.php',
data: {"roleID":role_id},
type: 'post',
success:function(data){
$('#section').slideDown();
}
});
});
$('#role').trigger("change");
});
I have this in PHP also:
$role_id = trim($_POST["roleID"]);
But this returns as null. How would I go about getting the value I get from the select input and use it to set this role_id variable in PHP without submitting a form?

I am assuming that your description of your option elements: id: 1, name: blah1 does not reflect their markup and that they are defined like so...
<option value="1">blah1</option>
If so, then the following should work fine.
var role_id = $('#role').find('option:selected').val();

jqgrid setColProp not working

I am using setColProp to dynamically load values into a select edittype.
I have the values successfully load whenever I call:
loadComplete: function() {
$("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });
},
However it only works here, and only once. If I change the value of contract_list and try to update the jqgrid by calling
$("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });
again from anywhere (from a button click, from afterSubmit, or even reloading table) it does nothing at all.
Is there something that I'm doing wrong?
edit:
Here is a better explanation of what I'm trying to do.
I have a jqGrid table with the id #profile_table.
This is part of the colModel in the jqGrid code:
colModel:[
{name:'contract_num',index:'contract_num', editable: true, hidden: false, width:30, edittype: "select", editrules: {required: true}},
]
Initially the contract_num edit field in the edit/add forms has no values in its select box. I load initial values from a javascript variable called contract_list that is created before the table gets created. I load these values initially by using:
loadComplete: function() {
$("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });
},
This works fine, however it is possible that the values of contract_list will change whenever a user changes something else on the page that this table is displayed on. So I am trying to dynamically update the options inside of the select box for the contract_num field inside of the edit/add forms for this table. I successfully change the values inside of contract_list, however I cannot get the actual select box to update to the new values.
I am trying to update it by calling:
$("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });
and then reloading the grid whenever someone changes the values for contract_list, however the table is not being updated.

I think your main problem will be solved if you would use recreateForm: true options of the form editing (see here an example of the usage). I recommend you to set the setting as the default before you call navGrid (see here the corresponding code).
Moreover from the information which you wrote in comments I think that you should better use dataUrl instead of value of the editoptions. So jqGrid can loads the list of the values directly from the server during creating of the edit form. Sometimes the usage of buildSelect is useful. It help you to provide the data from the server in for example JSON format and construct the <select><option value="...">...</option>...</select> HTML fragment based on the server data inside of buildSelect. Additionally it could be required to set ajaxSelectOptions: { cache: false } jqGrid option (see here or here) or to force re-validation of the previous server response on the dataUrl with respect of HTTP header "Cache-Control: private, max-age=0" (see here and here)