Develop Reference

jQuery autocomplete ajax not working for autocorrection when wrong input is given

I'm trying to make a project similar to Google's search bar using Flask, Elasticsearch and jQuery that will automatically suggest based on input given and also automatically give correct suggestions when a wrong input is given. I've had success with the autosuggestion with correct spellings but when giving a wrong input, the correct suggestion data from Elasticsearch comes up in browser console but doesn't appear in the autocomplete drop-down. I inserted data into Elasticsearch using PySpark. I think the problem is related to the JS file but don't know if it's my JS file or the jquery-ui file. What am I doing wrong?
JS:
$(document).ready(function () {
const $source = document.querySelector('#source');
const $result = document.querySelector('#result');
const typeHandler = function (e) {
$result.innerHTML = e.target.value;
console.log(e.target.value);
$.ajax({
url: "/ajax_call",
type: 'POST',
dataType: 'json',
data: { 'data': e.target.value },
success: function (html) {
var data = html.aggregations.auto.buckets
var bucket = []
$.each(data, (index, value) => {
bucket.push(value.key)
});
console.log(bucket)
$("#source").autocomplete({
source: bucket
});
}
});
}
$source.addEventListener('input', typeHandler)
});
Correct Input:
Incorrect Input:
Correct data for Incorrect Input

Consider the following example.
$(function() {
const $source = $('#source');
const $result = $('#result');
$source.autocomplete({
source: function(request, response) {
$.ajax({
url: "/ajax_call",
type: 'POST',
dataType: 'json',
data: {
'data': request.term
},
success: function(html) {
var data = html.aggregations.auto.buckets;
var bucket = [];
$.each(data, (index, value) => {
bucket.push(value.key);
});
console.log(bucket);
response(bucket);
}
});
}
});
});
See More:
https://jqueryui.com/autocomplete/#remote-jsonp
https://api.jqueryui.com/autocomplete/#option-source

Attribute from class iteration return object instead of string

I have multiple divs that have an attribute on my page e.g.:
<div class="followCallout" id="follow_123" data-follow-id="123">
WHATEVER
</div>
....
<div class="followCallout" id="follow_456" data-follow-id="456">
WHATEVER
</div>
With a timer i loop through these divs and make an ajax call for each, to see if sth has changed:
function checkFollows() {
var t = setTimeout(checkFollows, 5000);
$('.followCallout').each(function(){
var $that = $(this);
var $id = $that.attr('data-follow-id');
var $url = $('#ajax-route-check-follow').val();
console.log($id); //THIS RETURN 123 etc...
$.ajax({
url: $url,
data: {
id: $id
},
type: "get",
contentType: false,
processData: false,
cache: false,
dataType: "json",
error: function (err) {
},
success: function (data) {
}
});
})
}
The $url is from here <input type="hidden" id="ajax-route-check-follow" value="/cCRM/web/app_dev.php/admin/_ajax/_checkFollow" />
However, the URL I'm sending looks like this:
http://localhost/cCRM/web/app_dev.php/admin/_ajax/_checkFollow?[object%20Object]&_=1497624513190
So instead of checkFollow?id=123 it gives me checkFollow?[object%20Object] so I assume sth is wrong with my ajax call? I am using the exact same call (w/o the $.each, only single calls though) on other parts as well. Where am I wrong?

Retrieving event and htmlInput element from a foreach using javascript or jquery

I managed to retrieve a dynamic element ID from inside a foreach and send it to a controller this way:
#using (Html.BeginForm("DeleteConfirmed", "Gifts", FormMethod.Post, new { #class = "form-content", id = "formDiv" }))
{
foreach (var item in Model.productList)
{
<input type="button" value="Delete" onclick="DeleteButtonClicked(this)" data-assigned-id="#item.ID" />
}
}
and here's the relevant script, pointing to the controller's ActionResult method in charge for item deletion:
function DeleteButtonClicked(elem) {
var itemID = $(elem).data('assigned-id');
if (confirm('sure?')) {
window.location.href = "/Gifts/DeleteConfirmed/" + itemID;
}}
Now, this works just fine, as itemID is correctly retrieved.
As I would like to add a #Html.AntiForgeryToken() to the form, the idea is to change the MVC controller's Actionmethod into a JsonResult adding a little Ajax to the script, allowing me to pass both itemID and token.
Something like:
function DeleteButtonClicked(elem) {
event.preventDefault();
var form = $('#formDiv');
var token = $('input[name="__RequestVerificationToken"]', form).val();
var itemID = $(elem).data('assigned-id');
if (confirm('sure?')) {
$.ajax({
type: 'POST',
datatype: 'json',
url: '#Url.Action("DeleteConfirmed", "Gifts")',
data: {
__RequestVerificationToken: token,
id: itemID
},
cache: false,
success: function (data) { window.location.href = "/Gifts/UserProfile?userID=" + data; },
error: function (data) { window.location.href = '#Url.Action("InternalServerError", "Error")'; }
});
}
dynamic }Some
but I have no idea on how to add the 'event' to the element (this => elem) in <input type="button" value="Delete" onclick="DeleteButtonClicked(this)" data-assigned-id="#item.ID" /> that I am using to identify the item inside the foreach loop, in order to pass it to the script.
Above script obviously fails as there's no 'event' (provided this would end to be the only mistake, which I'm not sure at all).
Some help is needed. Thanks in advance for your time and consideration.

What you want to do is use jQuery to create an event handler:
$('input[type="button"]').on('click', function(event) {
event.preventDefault();
var form = $('#formDiv');
var token = $('input[name="__RequestVerificationToken"]', form).val();
var itemID = $(this).data('assigned-id');
if (confirm('sure?')) {
$.ajax({
type: 'POST',
datatype: 'json',
url: '#Url.Action("DeleteConfirmed", "Gifts")',
data: {
__RequestVerificationToken: token,
id: itemID
},
cache: false,
success: function (data) { window.location.href = "/Gifts/UserProfile?userID=" + data; },
error: function (data) { window.location.href = '#Url.Action("InternalServerError", "Error")'; }
});
}
});
Just make sure you render this script after your buttons are rendered. Preferably using the $(document).onReady technique.

Try the 'on' event handler attachment (http://api.jquery.com/on/). The outer function is shorthand for DOM ready.
$(function() {
$('.some-container').on('click', '.delete-btn', DeleteButtonClicked);
})

Get response code and parse to message via jQuery ajax

I have this structure:
HTML:
<input type="submit" name="_ninja_forms_field_7" class="ninja-forms-field popup-submit" id="ninja_forms_field_7" value="" rel="7">
JS:
$('#ninja_forms_field_7').click(function () {
var name = $('#ninja_forms_field_6').val();
var surname = $('#ninja_forms_field_6').val();
var emailAddress = $('#ninja_forms_field_8').val();
var eCommerceSiteUrl = $('#ninja_forms_field_9').val();
var post_datas = emailAddress = +emailAddress+ & name = +name+ & surname = +surname+ & eCommerceSiteUrl = +eCommerceSiteUrl;
$.ajax({
type: 'POST',
url: 'myserviceaddress',
data: post_datas,
success: function (answer) {
console.log(answer);
}
});
});
It working good. But I want, If service response code 0, parse a text in page.
How can I do it?

Just add the error: function() lines you see below beneath success:
$.ajax({
type: 'POST',
url: 'myserviceaddress',
data: post_datas,
success: function (answer) {
console.log(answer);
},
error: function (jqXHR, textStatus, errorThrown) {
$("#result_div").html("textStatus");
}
});
Also, make sure you create a <div id="result_div"></div> so that the JQuery has a place to put the result in.

What's wrong with this jQuery Ajax/PHP setup?

I'm building a search app which uses Ajax to retrieve results, but I'm having a bit of trouble in how exactly to implement this.
I have the following code in Javascript:
if (typeof tmpVariable == "object"){
// tmpVariable is based on the query, it's an associative array
// ie: tmpVariable["apple"] = "something" or tmpVariable["orange"] = "something else"
var sendVariables = {};
sendVariables = JSON.stringify(tmpVariable);
fetchData(sendVariables);
}
function fetchData(arg) {
$.ajaxSetup ({
cache: false
});
$.ajax ({
type: "GET",
url: "script.php",
data: arg,
});
}
And within script.php:
<?php
$data = json_decode(stripslashes($_GET['data']));
foreach($data as $d){
echo $d;
}
?>
What is it that I'm doing wrong?
Thanks.

Your PHP script is expecting a GET var called 'data'. With your code you're not sending that.
Try this:
if (typeof tmpVariable == "object"){
var data = {data : JSON.stringify(tmpVariable)}; // Added 'data' as object key
fetchData(data);
}
function fetchData(arg) {
$.ajax ({
type: "GET",
url: "script.php",
data: arg,
success: function(response){
alert(response);
$("body").html(response); // Write the response into the HTML body tag
}
});
}