I am using tokeninput jquery for autocomplete with asp.net.
http://loopj.com/jquery-tokeninput/
i have one textbox and searching parameter is conditional. this jquery is render on loadtime. there is a checkbox, if checkbox is checked searching parameter wouldbe change and if checkbox is unchecked searching parameter is default parameter. i have called this on ready state.the issue is that when checkbox is checked searching parameter not changed. it search on only one condition as default condition.On ckeckbox click IsPastClass change as true or false.
$(document).ready(function() {
$("#txtStudentTokenSearch").tokenInput("../Handlers/TestAutoCompleteHandler.ashx?SearchType=Patient&IsPastClass=false", {
theme: "facebook",
tokenDelimiter: "|",
preventDuplicates: true,
onAdd: function(item) { removeTokenDuplicate('#txtStudentTokenSearch', item); btnLoadStudent.Focus(); }
});
});
Can any one tell me how can i set tokeninput parameter on condition.
Thanks.
Try
$(document).ready(function() {
$('.checkbox').change(function(){
var IsPastClass = this.checked;
$("#txtStudentTokenSearch").tokenInput("clear");
$("#txtStudentTokenSearch").tokenInput("../Handlers/TestAutoCompleteHandler.ashx?SearchType=Patient&IsPastClass="+IsPastClass , {
theme: "facebook",
tokenDelimiter: "|",
preventDuplicates: true,
onAdd: function(item) { removeTokenDuplicate('#txtStudentTokenSearch', item); btnLoadStudent.Focus(); }
});
});
$('.checkbox').trigger('change');
});
Hope it helps.
you can use tokenInput with ajax and handler very easly
you can download example from github
https://github.com/yanivsuzana/jquery-tokeninput-ajax-asp.net-vb
Related
On Page I have 3 multiple-select-boxes. Only for 3rd one I have additional logic (custom onchange event).
So first 2 I just initialize with line of code :
$('.multiselect').multiselect();
But when I've tried to add custom logic for 3rd select - it doesn't work.
$('#RegionIds').multiselect({
onChange: function(option, checked) {
alert('changed value' + $(option).val());
}
});
Alert never appears in this case.
Update : JsBIN Example : https://jsbin.com/voquhegode/edit?html,js,output
Update 2 :
Thanks for replies. But I've found another issue with multiple selects.
https://jsfiddle.net/x6z6w0n8/7/ In case I want to set selected values on initialize step, I saw one additional select. This causes line of code where I manualy set selected values
$(select).multiselect('select', jsonArr[i].Item1);
You should use $('.multiselect').multiselect(); in the end like here fiddle Because you cover other elements with custom logic which has the same class .multiselect
$('#example-onInitialized').multiselect({
onChange: function(option, checked, select) {
var changedVal = $(option).val();
if (changedVal < 3) {
if (checked == true) {
console.log('less');
} else if (checked == false) {
console.log('more');
}
}
}
});
$('#RegionIds').multiselect({
onChange: function(option, checked) {
console.log('changed');
}
});
$('.multiple').multiselect();
Or if every select has custom logic call multiselect() for concret IDs.
I am hiding a particular option from chosen dropdown. I cannot remove it tout court because I need that option on IE6 (!).
The problem that I have is that when I start typing in the input field that hidden option reappears among chosen search results.
I also tried to use the {display_disabled_options: false} option but it is not working (maybe because I am disabling the option after chosen has already been initialized.
I am trying to do this:
$(".chosen-select").chosen({
display_disabled_options: false
}).each(function () {
$(this).on('chosen:showing_dropdown', function (event, params) {
$('li:contains("whatever")').attr('disabled', true);
});
});
If you need to update the list after chosen initialization you need to trigger its update using trigger("chosen:updated").
So use the code:
$(function () {
$('.chzn-select').chosen({
display_disabled_options: false
}).each(function () {
$(this).on('chosen:showing_dropdown', function (event, params) {
$('option:contains("shop")',$(this)).attr('disabled', true);
$(this).trigger("chosen:updated");
});
});;
});
Demo: http://jsfiddle.net/IrvinDominin/NfvBj/
I just created an autocomplete textbox via jquery now i am stuck with two problems.
1) I need to get the value of the selected item from the Autocomplete list.
So far i did these..
My jquery
$(document).ready(function(){
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true
});
});
I am getting the autocomplete list from the database its working fine, but the problem is that
2) When i type 'r' all the names with values gets populated and if i select say Robin from the list and try to display it with alert, i only gets 'r', (i only typed r,and selected 'robin' from list) why is this so?
here is the code i wrote for this
for the autocomplete textbox
<input name="tags" type="text" id="tag" value="" onchange= "newfn()" />
and in newfn()
<script>
function newfn()
{
authname = document.getElementById("tag").value;
document.autoquote.qid.value=authname;
alert(authname);
}
</script>
and if i put an alert at first saying
alert("Hi");
then, i get first alert saying hi, and I get robin not r
So what is the correct way to get what value i selected from the autocomplete list?
Now my second Question is that the selected value from this autocomplete textbox, I need to pass it with another jquery to another php page so that I can get this value there and give it in a query as a criteria.
Because it is not the way to catch a select event http://api.jqueryui.com/autocomplete/#event-select :
$(document).ready(function(){
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true,
select: function( event, ui ) {
//Then use "ui" object, for example ui.item.label or ui.item.value
}
});
});
$(".autosearch-smart").autocomplete('autocomplete.php', {
select: function( event, ui ) {
// here you can get id and values from the autocomplete list
// try to debug
console.log(ui.item.id);
console.log(ui.item.label);
console.log(ui.item.value);
}
});
you can use the autocomplete's select property like this
$("#tag").autocomplete('autocomplete.php', {
selectFirst: true,
select: function (event, ui) {
var label = ui.item.label;
var value = ui.item.value;
alert(label);
alert(value)
// you can write additional javascript code here to make use of these values
}
});
Please check the jQuery UI documentation for more examples and info.
Here is a JSFiddle.(Please note that an additional source attribute has been added in the fiddle to simulate the loading of data set as real cross domain AJAX calls are not allowed)
$(document).ready(function(){
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true
select: function( event, ui ) {
//check the values in console
alert(ui.item.value+" - "+ui.item.value);
}
});
});
I have a jQgrid with a multiselect option set to true. When the multiselect checkbox is checked, I don't want to highlight the rows in the grid.
The checkbox has an id of "#cb_emplist "
I tried the following, it works in chrome consol but not in the code
$("#cb_emplist").change(function() {
$('#empList tr').removeClass("ui-state-highlight");
});
I also tried :
$("#cb_emplist").change(function () {
if ($("#cb_emplist").is(":checked")) {
$('#empList list tr').removeClass("ui-state-highlight");
}
});
jQuery("#empList").jqGrid({
.....
...
multiselect: true
...
});
Solved with this puppy here:
$("#cb_emplist").on("click", function() {
$('#empList tr').removeClass("ui-state-highlight");
});
For the code which is dynamic you may need to delegate the events like below
$(document).delegate("#cb_busgrplist", "change", function({
$('#empList tr').removeClass("ui-state-highlight");
});
Read the Delegate documentation here
This seems to have done the trick:
$("#cb_emplist").on("click", function() {
$('#empList tr').removeClass("ui-state-highlight");
});
I am using a hidden field to store the active index for the accordion:
var activeIndex = parseInt($('#ContentPlaceHolder1_hidAccordionIndex').val());
$("#accordion").accordion({
changestart: function () {
var value = $(this).scrollTop();
window.scrollTo(0, value);
},
autoHeight: false,
event: "mousedown",
active: activeIndex,
collapsible: true,
disabled: false,
change: function (event, ui) {
var index = $(this).children('h4').index(ui.newHeader);
$('#ContentPlaceHolder1_hidAccordionIndex').val(index);
}
});
Currently, the hidden field value is set in the codebehind. Therefore, if the user clicks on the accordion header, I would like to update the value of the hidden field according to the header that has been clicked.
Any ideas on how to do this? Thanks in advance.
Use following function for change event handler:
change: function (event, ui) {
var index = $(this).accordion("option", "active");
$('#ContentPlaceHolder1_hidAccordionIndex').val(index);
}
I have made an exact same example as yours in this fiddle and it works like a charm.
The only possible reason for you to not find the index of the current header is that you might have <h3> headers in your markup and your selecting <h4> in your change handler.
Change one or the other and it should normally work.
One way to handle this, is by adding a class called accordionHeader or something to each of the h3s. Then after the initial build of the accordian, call another event handler.
In my example I just performed a bind on h3 for quickly providing a demo.
$("#accordion").accordion();
$('h3').bind('click', function() {
$('#HiddenInputField').val($(this).children('a').html());
alert($('#HiddenInputField').val());
});
Simple working example Fiddle