jQuery autocomplete not filtering - javascript

I have a jQuery autocomplete control that is populating with data but the list just displays when I type anything in the box and doesn't filter my results. Does anyone know how to alter this behavior?
<script type="text/javascript">
$(function () {
$('#datePicker').datepicker();
});
$(document).ready(function() {
$("#autocomplete").autocomplete({
source: function (request, response) {
$.ajax({
url: "FacilitiesAsync",
type: 'GET',
cache: true,
data: 'sourceDb=myDb',
dataType: 'json',
success: function (json) {
response($.map(json, function (name) {
return {
label: name.label,
value: name.value
};
}));
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
$("#autocomplete").text(textStatus + ', ' + errorThrown);
}
});
},
select: function (event, ui) {
$('#autocomplete').val(ui.item.label);
return false;
},
messages: {
noResults: '',
results: function () {
}
}
});
});
</script>

Related

Fullcalendar 3.1.0 js/c# does not display the update dialog after finding an event

After searching for an event successfully, I would like to open the update / delete dialog with all information filled in. But nothing happens.
I have this code in Default.aspx:
<script type="text/javascript">
$(function () {
$("[id$=txtSearch]").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Default.aspx/GetEvent") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('|')[0],
val: item.split('|')[1]
}
}))
},
error: function (response) {
// alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("[id$=hfCustomerId]").val(i.item.val);
date = moment(i.item.label, "DD/MM/YYYY HH:mm");
$("#calendar").fullCalendar('gotoDate', date);
let eventProva = $("#calendar").fullCalendar("getEventById", i.item.label);
$("#calendar").fullCalendar('updateEvent', eventProva);
},
minLength: 1
});
});
</script>
where 'i.item.label' is the event id.But nothing happens with the line $("#calendar").fullCalendar('updateEvent', eventProva);

Javascript wait until localization resources are pulled from server

I have the following Javascript code:
(function (document, window, $) {
'use strict';
var Site = window.Site;
var translations = [];
$(document).ready(function ($) {
translations = Site.getTranslations();
Site.run(); // glogal site setup
});
// Init function
// ------------------------
(function () {
$("#cbolanguage").change(function (e) {
// start ajax request
$.ajax({
url: url.switchLang,
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ lang: e.target.value }),
dataType: "json",
success: function (data, textStatus, jqXHR) {
if (data.success) {
location.reload();
}
},
error: function (jqXHR, textStatus, errorThrown) {
}, complete: function () {
}
});
});
function init() {
$('#btn-login').click(function (e) {
e.preventDefault();
$('#form-login').data('formValidation').validate();
if (!$('#form-login').data('formValidation').isValid()) return;
});
init();
}
})();
// Validataion
// ------------------------
(function () {
$('#form-login').formValidation({
framework: "bootstrap",
icon: null,
fields: {
Login: {
validators: {
notEmpty: {
message: translations.text1 // NEED TO WAIT UNTIL THIS HAS A VALUE
}
}
},
Password: {
validators: {
notEmpty: {
message: translations.text1 // NEED TO WAIT UNTIL THIS HAS A VALUE
}
}
},
},
err: {
clazz: 'text-help'
},
row: {
invalid: 'has-error'
}
}).on('err.field.fv', function (e, data) {
data.fv.disableSubmitButtons(false);
})
.on('success.field.fv', function (e, data) {
data.fv.disableSubmitButtons(false);
});;
})();
})(document, window, jQuery);
In the document.ready() I call the function:
translations = Site.getTranslations();
This function code is:
getTranslations: function () {
var returnData = [];
// start ajax request
$.ajax({
url: appData.getTranslations,
type: 'POST',
contentType: 'application/json',
dataType: "json",
async: false, // SYNCRONOUS CALL
success: function (data, textStatus, jqXHR) {
if (data.success) {
returnData = data.data;
}
},
error: function (jqXHR, textStatus, errorThrown) {
}, complete: function () {
}
});
return returnData;
},
The problem that I have is that on my main javascript all the functions, including the form validation are executed without waiting for the translation object to get a value.
I need to wait for all my functions until the call to get the translation resources to finish.
Any clue?
You can promisify your 'getTranslations' function and use await where you are calling it.Like this :
getTranslations: function () {
// start ajax request
return new Promise((resolve,reject)=>{
$.ajax({
url: appData.getTranslations,
type: 'POST',
contentType: 'application/json',
dataType: "json",
async: false, // SYNCRONOUS CALL
success: function (data, textStatus, jqXHR) {
if (data.success) {
resolve(data.data);
}
},
error: function (jqXHR, textStatus, errorThrown) {
}, complete: function () {
}
});
});
},
Now await this call in your document.ready() function.
(function (document, window, $) {
'use strict';
var Site = window.Site;
var translations = [];
$(document).ready(async function ($) {
translations = await Site.getTranslations();
//change your immediately invoked functions into named functions
// and call them here
initialisation();
validation();
Site.run(); // glogal site setup
});
// Init function
// ------------------------
function initialisation() {
$("#cbolanguage").change(function (e) {
// start ajax request
$.ajax({
url: url.switchLang,
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ lang: e.target.value }),
dataType: "json",
success: function (data, textStatus, jqXHR) {
if (data.success) {
location.reload();
}
},
error: function (jqXHR, textStatus, errorThrown) {
}, complete: function () {
}
});
});
function init() {
$('#btn-login').click(function (e) {
e.preventDefault();
$('#form-login').data('formValidation').validate();
if (!$('#form-login').data('formValidation').isValid()) return;
});
init();
}
};
// Validataion
// ------------------------
function validation() {
$('#form-login').formValidation({
framework: "bootstrap",
icon: null,
fields: {
Login: {
validators: {
notEmpty: {
message: translations.text1 // NEED TO WAIT UNTIL THIS HAS A VALUE
}
}
},
Password: {
validators: {
notEmpty: {
message: translations.text1 // NEED TO WAIT UNTIL THIS HAS A VALUE
}
}
},
},
err: {
clazz: 'text-help'
},
row: {
invalid: 'has-error'
}
}).on('err.field.fv', function (e, data) {
data.fv.disableSubmitButtons(false);
})
.on('success.field.fv', function (e, data) {
data.fv.disableSubmitButtons(false);
});;
}
})(document, window, jQuery);

ReferenceError: response is not defined on autocomplete jquery ajax call in singleton design pattern

I am trying to implement jQuery autocomplete in my solution but I got an error ReferenceError: response is not defined
Here is my code
(function ($) {
$.SupportArticleObj = function (p) {
var SupportArticle = {
config: {
isPostBack: false,
async: false,
cache: false,
type: 'POST',
contentType: "application/json; charset=utf-8",
data: { data: '' },
dataType: 'json',
baseURL: "Modules/SupportArticle/Services/SupportArticleWebService.asmx/",
url: "",
method: "",
ajaxCallMode: 0,
PortalID: PortalID,
UserModuleID: UserModuleID,
SecureToken: SecureToken,
UserName: UserName
},
init: function () {
$("#searchSupport").autocomplete({
source: function (request, response) {
searchTerm = request.term;
SupportArticle.getSearchData(searchTerm);
}
});
},
getSearchData: function (searchTearm) {
SupportArticle.config.method = "SearchSupportArticle";
SupportArticle.config.url = SupportArticle.config.baseURL + SupportArticle.config.method;
SupportArticle.config.data = JSON2.stringify({
searchTerm: searchTerm,
portalID: SupportArticle.config.PortalID,
userModuleID: SupportArticle.config.UserModuleID,
userName: SupportArticle.config.UserName,
secureToken: SupportArticle.config.SecureToken
});
SupportArticle.ajaxCall(SupportArticle.config);
},
ajaxSuccess: function (data) {
response(data);
},
ajaxFailure: function () {
jAlert('Somethings went wrong', 'Support Article');
},
ajaxCall: function (config) {
$.ajax({
type: SupportArticle.config.type,
contentType: SupportArticle.config.contentType,
cache: SupportArticle.config.cache,
url: SupportArticle.config.url,
data: SupportArticle.config.data,
dataType: SupportArticle.config.dataType,
success: SupportArticle.ajaxSuccess,
error: SupportArticle.ajaxFailure,
async: SupportArticle.config.async
});
}
};
SupportArticle.init();
};
$.fn.callSupportArticle = function (p) {
$.SupportArticleObj(p);
};
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
What I am trying to do here is, I am calling a webservice which will search the records on database and return as a list and I want to bind that list on textbox as a autocomplete. But the problem is while running the solution in browser I got an error ReferenceError: response is not defined.
I was trying http://www.c-sharpcorner.com/UploadFile/da55bf/Asp-Net-autocomplete-textbox-using-jquery-json-and-ajax/ as reference.
How can I solve the issue of ReferenceError: response is not defined
Write your script like below:
AutoDemoDataBase: function () {
$("#lytA_ctl29_txtSearchName").autocomplete({
source: function (request, response) {
var param = JSON.stringify({
userModuleID: UserModuleID,
portalID: autoComplete.config.portalId,
prefix: $("#lytA_ctl29_txtSearchName").val(),
userName: autoComplete.config.UserName,
secureToken: SageFrameSecureToken
});
$.ajax({
type: autoComplete.config.type,
contentType: autoComplete.config.contentType,
cache: autoComplete.config.cache,
url: autoComplete.config.baseURL + "GetNames",
data: param,
dataType: autoComplete.config.dataType,
async: autoComplete.config.async,
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item.Name
}
}))
},
error: function (response) {
jAlert(response.responseText);
},
failure: function (response) {
jAlert(response.responseText);
}
});
},
select: function (e, i) {
$("#hfId").val(i.item.val);
$('#test').text(i.item.val);
},
minLength: 1
});
}
Your ajax success function is out of response scope.

Jquery Autocomplete doesn't work

i'm trying to add an autocomplete to an input box (i'm in asp.net/vb.net project) with the autocomplete source from a database.
So i've created a webservice and i did an ajax call:
<script type="text/javascript">
$(document).ready(function () {
$('#modelloInput').autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebServices/AutocompleteWS.asmx/getTuttiIModelli",
data: "{'prefix':'" + request.term + "'}",
dataType: "json",
async: true,
success: function (data) {
response(data.d);
},
error: function (result) {
//alert("Error");
}
});
}
});
});
</script>
<input type=text id="modelloInput" />
Now when i run the application and i write something in the inputbox i got the entire list in the autocomplete box.
I can write everything but i get always the entire list of elements.
Why?
I think there must be some issue in your web-service code,
you can use this basic code for autoComplete,
$( "input.suggest-user" ).autocomplete({
source: function( request, response ) {
$.ajax({
dataType: "json",
type : 'Get',
url: 'yourURL',
success: function(data) {
$('input.suggest-user').removeClass('ui-autocomplete-loading'); // hide loading image
response( $.map( data, function(item) {
// your operation on data
}));
},
error: function(data) {
$('input.suggest-user').removeClass('ui-autocomplete-loading');
}
});
},
minLength: 3,
open: function() {
},
close: function() {
},
focus:function(event,ui) {
},
select: function( event, ui ) {
}
});
OR
$("#id").autocomplete(
{
search: function () {},
source: function (request, response)
{
$.ajax(
{
url: ,
dataType: "json",
data:
{
term: request.term,
},
success: function (data)
{
response(data);
}
});
},
minLength: 2,
select: function (event, ui)
{
var test = ui.item ? ui.item.id : 0;
if (test > 0)
{}
}
});

use call back in jquery ajax to set a selected text selected in drop down

I am populating a country state and city drop down list, but I am able to populate the data in the drop down list but what i want is to also set the selected value of option which I have requested from database, but i am not able to do that, What I have done is to use the call back function. May be it can be done without using the call back. Below is my code.
var state;
function func(state) {
//alert("callback " + state);
$('#state option[value="' + state + '"]').prop('selected', 'selected');
}
$.ajax({
url: 'http://localhost:3000/getcountrylist',
type: 'GET',
success: function (data, textStatus, jqXHR) {
var countryDropDown = $('#country');
var citizenCountryDropDown = $('#citizencoutnry');
//alert("In country list");
$.each(data, function (index, result) {
countryDropDown.append(
$('<option/>', {
value: result.countrycode,
text: result.countryname
}));
citizenCountryDropDown.append(
$('<option/>', {
value: result.countrycode,
text: result.countryname
}));
});
$.ajax({
url: 'http://localhost:3000/editempform?userid=' + split,
type: 'GET',
success: function (data, textStatus, jqXHR) {
$.each(data, function (index, result) {
//$('#country option[value="PK"]').prop('selected', 'selected');
//$('select[name="country"] option[value="PK"]')
$("#country").find("option").filter(function (index) {
return result.country === $(this).text();
}).prop("selected", "selected");
$.ajax({
url: 'http://localhost:3000/getstatelist',
type: 'GET',
data: {
'countrycode': $("#country").val()
},
success: function (data, textStatus, jqXHR, func) {
var stateDropDown = $('#state');
$.each(data, function (index, result) {
stateDropDown.append(
$('<option/>', {
value: result.state,
text: result.state
}));
});
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
state = result.state;
$.ajax({
url: 'http://localhost:3000/getcitylist',
type: 'GET',
data: {
'countrycode': $("#country").val()
},
success: function (data, textStatus, jqXHR) {
var cityDropDown = $('#city');
$.each(data, function (index, result) {
cityDropDown.append(
$('<option/>', {
value: result.cityname,
text: result.cityname
}));
});
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
$("#city").find("option").filter(function (index) {
return result.city === $(this).text();
}).prop("selected", "selected");
});
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
Please change your jquery selected dropdown script like below.
$("#<%= lstAssignedTo.ClientID %> option").filter(function () {
return ($(this).text() == result.d[0]['assigned']);
}).attr('selected', 'selected');

Categories