Content disappears from jQuery autocomplete when focus on field is lost - javascript

my autocomplete works fine, but problem appears when I want to skip to another field in my form. When autocomplete lose focus its value disappears (also value of span that I render after this autocomplete disappears).
function initCaAutocomplete() {
$(".caSelector").autocomplete({
source: "/core/index/search-ca/ajax/1",
minLength: 2,
select: function (event, ui) {
var descId = 'desc_' + $(this).attr('id');
if ($('span#' + descId).length) {
$('span#' + descId).html(ui.item.desc);
$('span#' + descId).attr('title', ui.item.fullDesc);
} else {
$(this).after('<span title="' + (ui.item.fullDesc) + '" class="cpv_descHolder" id="' + descId + '">'
+ ui.item.fullDesc + '</span>');
}
ui.item.value = ui.item.code;
$('.tooltip', $(this).parent()).hide();
},
change: function (event, ui) {
var descId = 'desc_' + $(this).attr('id');
var inputId = $(this).attr('id');
var source = $(this).val();
$.ajax({
type : 'POST',
url : '/core/index/search-ca/ajax/1',
dataType: "text",
async : true,
data : {
term: source
},
success: function (response) {
var codes = $.parseJSON(response);
if (codes.length == 0) {
$('#' + inputId).val('');
$('span#' + descId).html('');
}
},
error: function (response) {
$('#' + inputId).val('');
$('span#' + descId).html('');
}
});
},
position: { my : "left top", at: "left bottom" }
});
}

Related

Display data received from drop box value

I would like once the user selects a different item in the drop box list which was taken from a mysql database, that specific data to that field be displayed.
Currently, I am able to get the value of the item in the drop down box but I am unable to use it.
<h3>Drop down Menu</h3>
<select id="dmenu">
<option selected="selected" id="opt">Choose your station</option>
</select>
<div id="optionT"></div>
$(document).ready(() => {
window.onload = ajaxCallback;
function ajaxCallback(data) {
var data;
var myOptions;
var output;
$.ajax({
url: 'http://localhost:5000/alldata',
type: 'GET',
datatype: 'json',
success: (data) => {
//$.each(data, function (index, value) {
var output = [];
$.each(data, function(key, value) {
output.push('<option value="' + key + '">' + value.Station +
'</option>');
});
$('#dmenu').html(output.join(''));
}
})
}
});
$('#dmenu').on('change', function() {
//alert( this.value );
//alert($(this).find(":selected").value());
function stationData(data) {
var stationName = $(this);
alert(stationName.val());
//var stationName = $(this).value();
//var stationName = $(this).find(":selected").value()
$.ajax({
url: 'http://localhost:5000/alldata',
method: 'POST',
data: {
station: stationName
},
success: (data) => {
$.each(data, function(i) {
data[i]
//console.log(i);
var station_loopOp = '';
//console.log(JSON.stringify(data[i].Station));
station_loopOp += '<li>ID: ' + JSON.stringify(data[i].ID) +
'</li>' +
'<li>Station: ' + JSON.stringify(data[i].Station) +
'</li>' + '<li>Address:
'+JSON.stringify(data[i].Address) +
'</li>' + '<li>' +
Sales: JSON.stringify(data[i].Monthly_CStore_Sales) +
'</li>' + '<li>Operator: ' +
JSON.stringify(data[i].Operator) + '</li>' +
'<li>Top SKU: ' + JSON.stringify(data[i].Top_SKU) +
'</li>' +
'</<li>' + '<br/>');
$('#optionT').html(station_loopOp);
}
});
}
});
You are just defining the function stationData(data){....} inside the callback function but not calling it anywhere inside of it .
Add this line into your function : stationData(<your-data>);

Functions are not working in Ajax after a while

I have input which on change should send it is value to ajax and get response back. Ajax is working correct and enters to success,but does not working click function inside it if i do not do changes or click. If i click immediately after response it works, but if i do not do changes in 4-5 seconds it something like close the session. How can i avoid this timing?
here is my example of ajax
$('#unvan_search').on('keyup change', function() {
var unvan = $(this).val();
$.ajax({
type: "POST",
url: url,
data: {
'tpIdRegion': region_type_id_j + '_' + region_id_j,
'road': unvan,
'guid': my_key
},
beforeSend: function() {
console.log('before send');
},
success: function(e) {
console.log('suceess');
var output = [];
for (var i = 0; i < e.names.length; i++) {
output.push('<li class="get_street es-visible" idx="' + e.names[i].X + '" idy="' + e.names[i].Y + '" id="' + e.names[i].ID + '" value="' + e.names[i].ID + '" style="display: block;">' + e.names[i].Name + '</li>');
console.log('filled');
};
$('#unvan_select_div ul').html(output.join(''));
$("#unvan_select_div ul").on("click", '.get_street', function() {
//MY CODE HERE WHICH I CAN NOT USE AFTER 4-5 SECONDS
});
},
error: function(x, t, m) {
alert("error");
}
});
});
This binding here:
$("#unvan_select_div ul").on("click", '.get_street', function() { ... }
There’s no need to declare it in the success callback. This kind of delegate bindings is there for that purpose: being able to handle events on elements created at a later stage
It may work if you structure it like this.
var ret = false;
$.ajax({
type: "POST",
url: url,
data: {
'tpIdRegion': region_type_id_j + '_' + region_id_j,
'road': unvan,
'guid': my_key
},
beforeSend: function() {
console.log('before send');
},
success: function(e) {
ret = true;
console.log('suceess');
var output = [];
for (var i = 0; i < e.names.length; i++) {
output.push('<li class="get_street es-visible" idx="' + e.names[i].X + '" idy="' + e.names[i].Y + '" id="' + e.names[i].ID + '" value="' + e.names[i].ID + '" style="display: block;">' + e.names[i].Name + '</li>');
console.log('filled');
};
return;
},
error: function(x, t, m) {
alert("error");
}
});
});
if(ret) {
$('#unvan_select_div ul').html(output.join(''));
$("#unvan_select_div ul").on("click", '.get_street', function() {
//MY CODE HERE WHICH I CAN NOT USE AFTER 4-5 SECONDS
});
}

Cannot set property '_renderItem' of undefined

This is my code...
Can anyone help me?
$(document).ready(function() {
//$('#search input[name="filter_name"]').attr("x-webkit-speech", "x-webkit-speech")
$('#search input[name="input-search-menu"]').autocomplete({
source: function(request, response) {
$.ajax({
url: 'index.php?route=module/search_suggestion/ajax',
dataType: 'json',
data: {
keyword: request.term
},
success: function(json) {
response($.map(json, function(item) {
return {
fields: item.fields,
value: item.href
}
}));
}
});
},
minLength: 1,
select: function(event, ui) {
if (ui.item.value == "") {
return false;
} else {
location.href = ui.item.value;
return fse;
}
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
},
focus: function(event, ui) {
$('#search input[name="filter_name"]').val(ui.item.label);
return false;
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
var elements = [];
$.each(item.fields, function(field_name, field) {
if (field != undefined && field[field_name] != undefined && field[field_name]) {
var field_html = '';
if (field_name == 'price') {
if (field.special) {
field_html = '<span class="price-old">' + field.price + '</span><span class="price-new">' + field.special + '</span>';
} else {
field_html = field.price;
}
} else {
field_html = field[field_name];
}
if (field.label != undefined && field.label.show != undefined && field.label.show) {
field_html = '<span class="label">' + field.label.label + '</span>' + field_html;
}
if (field.location != undefined && field.location == 'inline') {
field_html = '<span class="' + field_name + '">' + field_html + '</span>';
} else {
field_html = '<div class="' + field_name + '">' + field_html + '</div>';
}
elements.push({sort: field.sort, html: field_html});
}
});
// sort
elements.sort(function(a, b){return a.sort-b.sort});
// implode
var elements_html = '';
$.each(elements, function(index, element) {
if (element != undefined) {
elements_html = elements_html + element.html;
}
});
return $("<li></li>")
.data("item.autocomplete", item)
.append('<a class="search-suggestion">' + elements_html + '</a>')
.appendTo(ul);
};
});
`I'm getting cannot set property '_render_item' on my js file. This stopped my js file working. Can anyone help me with my code?
Thanks in advance
Certain naming conventions relating to autocomplete were deprecated in
jQuery UI in v1.9 and have been completely removed in v1.10 (see
http://jqueryui.com/upgrade-guide/1.10/#autocomplete).
You can check it at Cannot set property '_renderItem' of undefined jQuery UI autocomplete with HTML, because it explains this very well. :)

jQuery Select2 - Select ajax-submitted value

I have a form that submits a new entry via ajax and returns the entry data. I'm trying to get the returned data to be automatically selected in the Select2 field. I can get the id entered as the input value, but I'm not sure how to get the text to be displayed in the span.
Here's the JS I have so far:
function clientFormatResult(client){
var markup = client.first_name + ' ' + client.last_name + ' (' + client.username + ')';
return markup;
}
function clientFormatSelection(client) {
$('#client-input').empty();
$('#client-input').append('<input type="hidden" name="client" value="' + client.id + '" />');
return client.first_name + ' ' + client.last_name + ' (' + client.username + ')';
}
$('#client-selection').select2({
placeholder: 'Select a client',
allowClear: true,
minimumInputLength: 1,
ajax: {
type: 'POST',
url: 'clients/get_client_list',
dataType: 'json',
data: function (term) {
return {filter: term};
},
results: function (data) {
return {results: data};
}
},
formatResult: clientFormatResult,
formatSelection: clientFormatSelection,
dropdownCssClass: 'bigdrop',
initSelection: function (element, callback) {
var id = element.val();
if(id != '') {
$.ajax('clients/get_client_list/'+id).done(function(data) {
data = $.parseJSON(data);
callback(data);
});
}
}
});
$('#add-client-form').submit(function(e) {
e.preventDefault();
var form = $(this),
url = form.attr('action'),
data = form.serialize();
$.post(url, data, function(data, status, xhr) {
$('.form-response').fadeOut(400);
if(status == 'success') {
$('#add-client-modal').modal('hide');
data = $.parseJSON(data);
$('#client-selection').select2('val', data.client_id);
} else {
$('#add-client-failure').fadeIn(400);
}
});
});
As you can see, the text displayed is meant to be like "John Smith (smithj)".
I sorted it out, it was an issue with the data I was returning. Select2 was expecting an id variable, but I was returning it as client_id.

javascript alert() doesn't work in IE

I have an Ajax request which in error condition alerts the message returned from server. This works in all browsers except for IE. it shows an empty alert box.
JS:
$(document).ready(function() {
$("input[name!='photo_1']").parents('.fileinput-wrapper').find(".label").remove();
$("input[type=file]").on('change',function(){
$(this).parents('label').find('.fileinput-preview').css('background',"url('http://localhost/project/assets/images/ajax-loader.GIF') no-repeat center center");
var selectedElement = this;
var name = $(this).attr('name').toString();
$('#upload').ajaxSubmit({
dataType:'json',
data: {name:name},
beforeSubmit:function(){
$(selectedElement).parents('label').find('input[type=file]').attr('disabled','disabled');
},
success: function(data) {
$(selectedElement).parents('label').find('.fileinput-preview').css('background',"url('http://localhost/project/assets/images/loading.png') no-repeat center center");
$.each(data, function(index, item) {
$("input[name=" + index + "]").parents('label').find('img').remove();
$("input[name=" + index + "]").parents('label').find('.fileinput-preview').append("<img src='http://localhost/project/uploads/" + item.NAME +"' width='190px' height='" + Math.floor(190/(item.WIDTH/item.HEIGHT)) + "px' />");
$("input[name=" + index + "]").parents('label').find('.thumbnail').css('height','');
$("input[name=" + index + "]").parents('label').find('.thumbnail').css('min-height',Math.floor(190/(item.WIDTH/item.HEIGHT)).toString()+"px");
});
$(selectedElement).parents('label').find('input[type=file]').removeAttr('disabled');
return false;
},
error : function(xhr) {
alert(xhr.responseText);
$(selectedElement).parents('label').find('.fileinput-preview').css('background',"none");
$(selectedElement).parents('label').find('.fileinput-preview').css('background',"url('http://localhost/project/assets/images/upload_a_photo.png') no-repeat center center");
return false;
}
});
});
});

Categories