Develop Reference

How to append table correctly in jquery?

I am coming to an issue where I am appending to my table using jQuery and also to <div class="jobEntity" id="bestTable">. For some reason I don't want to append my table like that. Is there a way to work around with my jQuery code to append the table properly? Thanks for the help.
{request.contextPath} - is just localhost:8080/
var cache = {};
$("#searchTextField").autocomplete({
minLength: 2,
focus: function(event, ui) {
event.preventDefault();
},
source: function(request, response) {
var term = request.term;
if (request.term in cache) {
response(cache[request.term]);
return;
}
$.ajax({
url: "#{request.contextPath}/JobSearchItem.xhtml",
type: "GET",
data: {
term: request.term
},
dataType: "json",
success: function(data) {
response(data);
}
});
},
select: function select(event, ui) {
event.preventDefault();
var url = '#{request.contextPath}/index.xhtml';
var searchValue = ui.item.value;
var data = new FormData();
data.append('searchValue', searchValue);
$.ajax({
url: url,
data: data,
method: "POST",
processData: false,
contentType: false,
cache: false
}).done(function(text) {
$('#results').append($(text).find('#bestTable'));
$('#results').append($(text).find('#textTable'));
$('#results').append($(text).find('table'));
$("#clearone").show();
});
},
response: function response(event, ui, data) {
if (!ui.content.length) {
var message = {
value: "",
label: "NOTHING HAS BEEN FOUND"
};
ui.content.push(message);
}
}
});

Well you could do something like this:
$.ajax({
url: url,
data: data,
method: "POST",
processData: false,
contentType: false,
cache: false
}).done(function(text) {
let append = $(text).find('#bestTable').text() + $(text).find('#textTable').text() + $(text).find('table').text();
$('#results').append(append);
$("#clearone").show();
});
As an idea, first prepare the append content and then append at once.

how use autocomplete jquery for 3 same class

i used jqueryui autocomplete iwant be the same work for some input text
but when i use $(this).val() for send value of textbox it show error and when i use (".Degree").val() shows and send to server first textbox it incorrect
function DegreeAutoComplete() {
$(".Degree").autocomplete({
position: { my: "right top", at: "right bottom", collision: "none" },
source: function (request, response) {
var spin = $(".spinnerDegree");
spin.addClass("fa-spin fa-spinner");
$.ajax({
url: "#Url.Action("GetDegree")",
type: "POST",
dataType: "json",
data: { search: $(".Degree").val() },
success: function (data) {
spin.removeClass("fa-spin fa-spinner");
response($.map(data, function (item) {
return { label: item.PersianName, value: item.PersianName, id: item.Id };
}));
}
});
},
messages: {
noResults: '',
results: function (resultsCount) { }
},
select: function (event, ui) {
// ui.item.value contains the id of the selected label
alert($(this).val());
$(this).attr("sel", ui.item.id);
}
});
}
when i use: $(this).val();
elem.nodeName is undefined
hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[elem.nodeName.toLowerCa...
how can i fix it

this refers to ajax object inside it. Save this reference before using it in inside scope.
var spin = $(".spinnerDegree");
spin.addClass("fa-spin fa-spinner");
var $that = $(this);// save reference
$.ajax({
url: "#Url.Action("
GetDegree ")",
type: "POST",
dataType: "json",
data: { search: $that.val() },//use $that var here
success: function(data) {
spin.removeClass("fa-spin fa-spinner");
response($.map(data, function(item) {
return { label: item.PersianName, value: item.PersianName, id: item.Id };
}));
}
});
EDIT:
Just checked jquery UI doc
You should use request.term thats it.
source: function(request, response) {
$.ajax({
url: "#Url.Action("GetDegree")",
type: "POST",
dataType: "json",
data: {
search: request.term
},
success: function(data) {
//....
}
});
}

Jquery autocomplete shows non english letters in result

I have very generic javascript code for autocomplete. Everything works fine, but when You type:
Manner
You will have result:
Manner
Männer
In database i have words with special letters, but in case "manner" i dont want to show word with letter "ä" - as this dont fit to result to me.
How can i ignore results like this ?
Thank You for any advice.
The code:
$(document).ready(function () {
if ($('#tags').length <= 0) {
return;
}
var $project = $('#tags');
$project.autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
dataType: "json",
type: 'post',
cache: false,
data: {term: request.term},
url: '/ajax/',
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Cities__zip,
value: item.Cities__zip
}
}));
}
});
},
});
});

This looks to like something that would be better to handled server rather than client side. But if you want to do it in the ajax call you could do something like this, which utilizes a regular expression to match non-English characters, and filters those items out:
$(document).ready(function () {
if ($('#tags').length <= 0) {
return;
}
var $project = $('#tags');
$project.autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
dataType: "json",
type: 'post',
cache: false,
data: {term: request.term},
url: '/ajax/',
success: function (data) {
response($.map(data, function (item) {
return (/[^\u0000-\u007F]+/).test(item.Cities__zip) ? null :
{
label: item.Cities__zip,
value: item.Cities__zip
}
}));
}
});
},
});
});

jQuery can't alert anything or redirect inside an plugin's callback function

I use a plugin to upload images which is working fine, the code is:
$('input[name=photo]').change(function(e) {
var file = e.target.files[0];
$.canvasResize(file, {
width: 600,
height: 500,
crop: false,
quality: 90,
callback: function(data, width, height) {
if(width > 100)
{
}
else
{
alert("this is not an image"); // this isn't working
return false;
}
var fd = new FormData();
var f = $.canvasResize('dataURLtoBlob', data);
f.name = file.name;
fd.append($('input[name=photo]').attr('name'), f);
$.ajax({
url: 'doupload.php',
type: 'POST',
data: fd,
dataType: 'json',
contentType: false,
processData: false,
success: function() {
window.location.href = "http://www.stackoverflow.com"; // THIS ISN'T WORKING TOO
}
})
}
});
});
Now after it's done I try to redirect to another page after AJAX is finished but it's not working, alerts are also not working. Any ideas?

$.ajax({
url: 'doupload.php',
type: 'POST',
data: fd,
dataType: 'json',
contentType: false,
processData: false,
success: function() {
location.href = "http://www.stackoverflow.com";
},
error: function() {
//handle errors here
},
complete: function() {
// this code is always executed
location.href = "http://www.stackoverflow.com";
}
})
Or
var jqXHR = $.ajax({...
});
jqXHR.always(function(){
location.href = "http://www.stackoverflow.com";
})

When I set jquery autocomplete minLength to 0 it keeps running after the user chose an object

I am using Jquery autocomplete with ajax.
Everything works fine except when I set minLength to 0.
When I choose an element from the list, the autocomplete doesn't stop running and shows me the list again.
Here is the code:
$("#id_from").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://127.0.0.1:8000/core/get_from_cities",
dataType: "json",
data: {term: request.term},
success: function (data) {
response($.map(data.data, function (item) {
return {
label: item.value,
value: item.value
}
}));
}
});
},
minLength: 0
});
Thanks..
EDIT:
Here is the solution I came up with:
$("#id_to").focus(function() {
$( "#id_to" ).autocomplete( "enable" );
});
$("#id_ffrom").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://127.0.0.1:8000/core/get_from_cities",
dataType: "json",
data: {term: request.term},
success: function (data) {
response($.map(data.data, function (item) {
return {
label: item.city,
value: item.city,
}
}));
}
});
},
minLength: 0,
select: function (event, ui) {
$('#id_from_country').val(ui.item.country)
$("#id_ffrom").autocomplete( "disable" );
}
});