passing value of select to jQuery UI autocomplete - javascript

I have select control and input with jQuery UI autocomplete.
<select name="labels">
...some options
</select>
<input type="attr_type_input" class="attr_autocomplete ui-autocomplete-input">
<input type="attr_value_input" class="attr_autocomplete ui-autocomplete-input">
The values shown in autocomplete should depend on the value of select.
My javascript code looks like:
$(document).ready(function(){
$( ".attr_autocomplete" ).each(function(){
var type=$(this).attr("type");
$(this).autocomplete( {
serviceUrl: '?',
params: {
action: 'attr_autocomplete',
type:type,
label:$("select[name=labels]").val()
}
});
});
});
The problem is that label value passed to server is always the same, even if I change the select. As far as I understand this data structure is formed once on page load.
The question is - how to pass actual value of select?

You are correct, this structure is being initialised with the starting value of the select on page load. You can switch to using a function for the source parameter:
$(".attr_autocomplete" ).each(function(){
var type=$(this).attr("type");
$(this).autocomplete({
source: function(req, autoCallback) {
$.get('?', {
term: req.term,
action: 'attr_autocomplete',
type:type,
label:$("select[name=labels]").val()
}, function(response) {
//perform any transforms needed on the data, then:
autoCallback(response);
//autoCallback is expecting an array of strings to display
});
}
});
});
This function is then executed whenever the autocomplete wants data, and so it will read the value of the select each time, rather than when it's initialised.

you are not retrieving the value of select after change
try this way
$("select[name=labels]").change(function(){
var changeValue=this.value;
});
demo

I just had this issue and came up with this solution. Just another way to handle it.
If you want to have an autocomplete result set based on the value in another field in the form you can do this:
$(document).ready(function(){
$('#alpha').change(function(){setLibraryAutoComplete();});
setLibraryAutoComplete();
});
function setLibraryAutoComplete(){
$('#beta').autocomplete({source: "TypeAhead?param1=ABC&param2="+$("#alpha").val()});
}
This sets up the auto complete on page load with the value from the field but then also causes the autocomplete call to update any time the source field value changes.

Related

javascript ajax onchange select box while doing update

I have a select box which populates data based on selection on other select boxes.
I am able to populate data. But how to make a value selected and do onchange event during editing of the form. ie, updation.
I am facing difficulty in making it selected based on database entry and to do onchange. What I am able to do it just the populating data from DB based on change.
you can easly create it with jquery, here's the example:
$('#id_of_your_select').change(function(){
var val = $('#id_of_your_select option').attr('selected', 'selected');
$.post({
url: "your_url",
data: {
value: val; // get the input post of value in server side
},
success: function(result){
// loop a json array and use append function of the jquery on the second select box
}
})
});
i can only explain like that cause there's no code that you give.

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.

Bind Jquery Datepicker and Search value

I have a webpage with jquery datepicker and an input field with jquery autocomplete APIs. the Auto complete works well and so is the datepicker independently. But I want to bind the date. I want to perform a search based on these two values on mysql database implementing ajax to return JSON; I am completely confused as i have two events generating data and i want to send them at once. Can someone kindly point me in the right direction please.
my idea:
$(document).ready(function(){
$("searchbtn").focus(function(){
$.post("ajaxsearch.php",{serachterm: "#selectedterm".val(), timestamp:"#selectedDate".val() }, function(data){
alert("Sent!")
});
});
});
use like this
$(document).ready(function(){
$("searchbtn").click(function(){
$.post("ajaxsearch.php",{serachterm: $("#selectedterm").val(), timestamp:$("#selectedDate").val() }, function(data){
alert("Sent!")
});
});
});
make sure that, selectedterm & selectedDate are the corresponding id's of inputs

Resetting Select2 value in dropdown with reset button

What would be the best way to reset the selected item to default? I'm using Select2 library and when using a normal button type="reset", the value in the dropdown doesn't reset.
So when I press my button I want "All" to be shown again.
jQuery
$("#d").select2();
html
<select id="d" name="d">
<option selected disabled>All</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I'd try something like this:
$(function(){
$("#searchclear").click(function(){
$("#d").select2('val', 'All');
});
});
You can also reset select2 value using
$(function() {
$('#d').select2('data', null)
})
alternately you can pass 'allowClear': true when calling select2 and it will have an X button to reset its value.
version 4.0
$('#d').val('').trigger('change');
This is the correct solution from now on according to deprecated message thrown in debug mode:
"The select2("val") method has been deprecated and will be removed in later Select2 versions. Use $element.val() instead"
According to the latest version (select2 3.4.5) documented here, it would be as simple as:
$("#my_select").select2("val", "");
you can used:
$("#d").val(null).trigger("change");
It's very simple and work right!
If use with reset button:
$('#btnReset').click(function() {
$("#d").val(null).trigger("change");
});
The best way of doing it is:
$('#e1.select2-offscreen').empty(); //#e1 : select 2 ID
$('#e1').append(new Option()); // to add the placeholder and the allow clear
I see three issues:
The display of the Select2 control is not refreshed when its value is changed due to a form reset.
The "All" option does not have a value attribute.
The "All" option is disabled.
First, I recommend that you use the setTimeout function to ensure that code is executed after the form reset is complete.
You could execute code when the button is clicked:
$('#searchclear').click(function() {
setTimeout(function() {
// Code goes here.
}, 0);
});
Or when the form is reset:
$('form').on('reset', function() {
setTimeout(function() {
// Code goes here.
}, 0);
});
As for what code to use:
Since the "All" option is disabled, the form reset does not make it the selected value. Therefore, you must explicitly set it to be the selected value. The way to do that is with the Select2 "val" function. And since the "All" option does not have a value attribute, its value is the same as its text, which is "All". Therefore, you should use the code given by thtsigma in the selected answer:
$("#d").select2('val', 'All');
If the attribute value="" were to be added to the "All" option, then you could use the code given by Daniel Dener:
$("#d").select2('val', '');
If the "All" option was not disabled, then you would just have to force the Select2 to refresh, in which case you could use:
$('#d').change();
Note: The following code by Lenart is a way to clear the selection, but it does not cause the "All" option to be selected:
$('#d').select2('data', null)
If you have a populated select widget, for example:
<select>
<option value="1">one</option>
<option value="2" selected="selected">two</option>
<option value="3">three</option>
...
you will want to convince select2 to restore the originally selected value on reset, similar to how a native form works. To achieve this, first reset the native form and then update select2:
$('button[type="reset"]').click(function(event) {
// Make sure we reset the native form first
event.preventDefault();
$(this).closest('form').get(0).reset();
// And then update select2 to match
$('#d').select2('val', $('#d').find(':selected').val());
}
Just to that :)
$('#form-edit').trigger("reset");
$('#form-edit').find('select').each(function(){
$(this).change();
});
What I found works well is as follows:
if you have a placeholder option like 'All' or '-Select-' and its the first option and that's that you want to set the value to when you 'reset' you can use
$('#id').select2('val',0);
0 is essentially the option that you want to set it to on reset. If you want to set it to the last option then get the length of options and set it that length - 1. Basically use the index of whatever option you want to set the select2 value to on reset.
If you don't have a placeholder and just want no text to appear in the field use:
$('#id').select2('val','');
To achieve a generic solution, why not do this:
$(':reset').live('click', function(){
var $r = $(this);
setTimeout(function(){
$r.closest('form').find('.select2-offscreen').trigger('change');
}, 10);
});
This way:
You'll not have to make a new logic for each select2 on your application.
And, you don't have to know the default value (which, by the way, does not have to be "" or even the first option)
Finally, setting the value to :selected would not always achieve a true reset, since the current selected might well have been set programmatically on the client, whereas the default action of the form select is to return input element values to the server-sent ones.
EDIT:
Alternatively, considering the deprecated status of live, we could replace the first line with this:
$('form:has(:reset)').on('click', ':reset', function(){
or better still:
$('form:has(:reset)').on('reset', function(){
PS: I personally feel that resetting on reset, as well as triggering blur and focus events attached to the original select, are some of the most conspicuous "missing" features in select2!
Select2 uses a specific CSS class, so an easy way to reset it is:
$('.select2-container').select2('val', '');
And you have the advantage of if you have multiple Select2 at the same form, all them will be reseted with this single command.
Sometimes I want to reset Select2 but I can't without change() method. So my solution is :
function resetSelect2Wrapper(el, value){
$(el).val(value);
$(el).select2({
minimumResultsForSearch: -1,
language: "fr"
});
}
Using :
resetSelect2Wrapper("#mySelectId", "myValue");
For me it works only with any of these solutions
$(this).select2('val', null);
or
$(this).select2('val', '');
// Store default values
$('#filter_form [data-plugin="select2"]').each(function(i, el){
$(el).data("seldefault", $(el).find(":selected").val());
});
// Reset button action
$('#formresetbtn').on('click', function() {
$('#filter_form [data-plugin="select2"]').each(function(i, el){
$(el).val($(el).data("seldefault")).trigger('change');
});
});
If you want to reset forms in edit pages, you can add this button to forms
<button type="reset" class="btn btn-default" onclick="resetForm()">Reset</button>
and write your JS code like this:
function resetForm() {
setTimeout(function() {
$('.js-select2').each(function () {
$(this).change();
/* or use two lines below instead */
// var oldVal = $(this).val();
// $(this).select2({'val': oldVal});
});
}, 100);
}
Lots of great answers, but with the newest version none worked for me. If you want a generic solution for all select2 this is working perfectly.
Version 4.0.13 tested
$(document).ready(function() {
$('form').on('reset', function(){
console.log('triggered reset');
const $r = $(this);
setTimeout(function(){
$r.closest('form').find('.select2-hidden-accessible').trigger('change');
}, 10);
});
});
$(function(){
$("#btnReset").click(function(){
$("#d").select2({
val: "",
});
});
});
to remove all option value
$("#id").empty();

Populating JScript Array for reuse on SELECTs

Forgive me if this is already 'somewhere' on StackOverflow, but I don't 100% know exactly what it would come under...
I'm trying to retrieve information from a WebService, store this in an array, and then for each <select> within my ASP.Net Datalist, populate it with the array AND have binding attached to an OnChange event.
In other words, I have an array which contains "Yes, No, Maybe"
I've an ASP.Net Datalist with ten items, therefore I'd have 10 <Select>s each one having "Yes, No, Maybe" as a selectable item.
When the user changes one of those <Select>s, an event is fired for me to write back to the database.
I know I can use the [ID=^ but don't know how to:
a) Get the page to populate the <Select> as it's created with the array
b) Assign a Change function per <Select> so I can write back (the writing back I can do easy, it's just binding the event).
Any thoughts on this?
I have built a simple example that demonstrates, I think, what you are attempting to accomplish. I don't have an ASP.Net server for building examples, so I have instead used Yahoo's YQL to simulate the remote datasource you would be getting from your server.
Example page => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-multiple-selects-from-datasource.html
Example steps:
query datasource to get array of select questions
build HTML of selects
append HTML to page
attach change event listener to selects
on select value change submit value
Example jQuery:
// get list of questions
$.ajax({
url: url,
dataType: "jsonp",
success: function(data) {
// build string of HTML of selects to append to page
var selectHtml = "";
$(data.query.results.p).each(function(index, element) {
selectHtml += '<select class="auto" name="question'+index+'"><option value="Yes">Yes</option><option value="No">No</option><option value="Maybe">Maybe</option></select> '+element+'<br/>';
});
// append HTML to page
$(document.body).append(selectHtml);
// bind change event to submit data
$("select.auto").change(function() {
var name = $(this).attr("name");
var val = $(this).val();
// replace the following with real submit code
$(document.body).append("<p>Submitting "+name+" with value of "+val+"</p>");
});
}
});
Example datasource => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-multiple-selects-from-datasource-datasource.html
Example loaded:
Example select value changed:

Categories

Resources