I am trying to make a request on an API, from an input. I want to autocomplete airport,cities suggestions etc.
I need to do this on Wordpress and i keep getting an error. This is what i did:
$(function() {
$("#autocompletedep").autocomplete({
source: function(request, response) {
$.ajax({
url: "https://www.fly-go.ro/ajax_autocomplete_flight?temp=",
dataType: "json",
data: {
q: request.term
},
success: function(data) {
var user = new String()
user = data.Title;
for (i = 0; i < user.length; i++) {
$('#autocompletedep')
.append($('<option>', { value: user[i] })
.text(user[i]));
}
}
});
},
});
});
I am not sure if i am doing the right way.
The error is:
flight-search.js?ver=5.3:1 Uncaught TypeError: $ is not a function
at flight-search.js?ver=5.3:1
Any help would be very appreciated, thank you!
Related
I'm doing a GET request using $.ajax():
jQuery(function ($) {
$('#acsess').on('click', function () {
$.ajax({
url: 'http://f4c0c1f3aa9a506c69b3b6642864b3590fb8f76f#504080.com/api/v1/services/categories',
method: 'GET',
beforeSend: function(req) {
req.setRequestHeader('Authorization', "f4c0c1f3aa9a506c69b3b6642864b3590fb8f76f");
},
success: function(data) {
console.log(data);
jQuery.each(data, function (index, value) {
// need to create divs with *icon and *title from data
})
},
error: function(error) {
alert("error");
}
})
});
});
I got this in my console:
And I can't retrieve icon link and title text. Please help.
You can access the data (which seems to be an array) by data[index].icon and data[index].title.
If you need to access all the items, I recommend a simple loop:
success: function(data) {
for (var i = 0; i++; i < data.length) {
data[i].icon // it's here, what to do is up to you
}
}
it helps me to resolve problem
success: function(data) {
var ololo = data.data;
for (let i = 0; i < ololo.length; i++) {console.log(ololo[i].title);}
}
I'm trying to pull data in my hybrid app through wordpress rest api. But I'm getting a blank screen. No error msg is thrown. Just a blank screen is coming. I have checked for syntactical error in lint and there's no error in code. I'm using the following code:
var BASE_URI = "https://public-api.wordpress.com/rest/v1.1/sites/smushbits.com/";
var POST_OFFSET = 0;
function load_post() {
$.ajax({
url: BASE_URI + "posts",
type: "GET",
dataType: "json",
data: {
"number": 10 ,
"offset": POST_OFFSET
},
error: function() {
alert("An error occured.");
},
success: function(response) {
$.each(response, function(index, data) {
$('<li><h1>'+data.posts[index].title+'</h1><p>'+getDays(data.posts[index].date)+'</p></li>').appendTo('#latest-list');
$(document).on("click", "#"+data.posts[index].ID, function() {
get_single_post(data.posts[index].title, data.posts[index].date, data.posts[index].URL, data.posts[index].content);
});
});
$('#latest-list').listview('refresh');
}
});
POST_OFFSET+=10;
}
$(document).ready(function(){
load_post();
});
Demo: http://smushbits.com/smushbits/www
I need to add autocomplete to an input textbox. The data needs to be fetched from SharePoint using AJAX / REST.
This what I've done so far:
JS
var myData = [];
var requestHeaders = {
"accept": "application/json;odata=verbose"
}
$.ajax({
url: "https://my-URL/sites/RMA-GFPLC/_api/web/lists/GetByTitle('AD_DB')/items? $select=Title,Regional_x0020_Office,Commodity,Commodity_x0020_Year,StateLookUp/Title&$expand=StateLookUp",
type: 'GET',
dataType: 'json',
async: false,
headers: requestHeaders,
success: function (data) {
$.each(data.d.results, function (i, result) {
myData.push(result.Title);
});
myDataSource(myData);
},
error: function ajaxError(response) {
alert(response.status + ' ' + response.statusText);
}
});
function myDataSource(myData){
$('#myAutoCompleteSearch').autocomplete({
source: myData,
minLength: 3
});
}
So far my code is not working, and I'm getting "Uncaught TypeError: Cannot read property 'label' of null " error in my console. I;m wonder what am I doing wrong here? Thanks!
This error occurs when a source for Autocomplete function contains an element(s) with a null value.
Solution
Add the condition for checking if value is not null:
$.each(data.d.results, function (i, result) {
if(result.Title) {
myData.push(result.Title);
}
});
Jast insert your code in
$(document).ready(function () {
//your code here
}
I'm sorry similar post is already there in the community, But i'm finding it strange. Its working fine but it affected my other views and not allowing other view pages to populate any dialogue boxes..
I tried to fix it by wrapping it in function() like this
$('#_auto').autocomplete(function(){
But, with this i'm not getting jason values in the _auto textfield and getting unexpected token error with following line.
can anyone help me to solve this please.
source: function(request,response){
this is my code:
$(function () {
$('#_auto').autocomplete({
selectFist: true,
minLength: 2,
source: function (request, response) {
var sval = $('#_auto').val();
//alert(sval);
$.ajax({
url: BASE_URL + '/controller/search/',
type: 'POST',
data: {
'term': sval,
},
dataType: 'json',
success: function (data) {
console.log(data);
var dta = [];
orgdetails = [];
//response(data.d);
for (var i in data) {
dta.push(data[i].name);
orgdetails[data[i].name] = data[i].id;
}
response(dta); //response(dta);
},
error: function (result) {}
}); //ajax
}
}).focus(function () {
$(this).trigger('keydown.autocomplete');
});
});
Many Thanks
I think the for loop should be
var dta = $.map(data, function(v, i){
orgdetails[v.name] = v.id;
return {
label: v.name,
id: v.name
};
});
Fiddle.
Another observation, You can get the current searched term using request.term rather than $('#_auto').val()
Complete code:
$('#_auto').autocomplete({
selectFist: true,
minLength: 2,
source: function (request, response) {
$.ajax({
url: BASE_URL + '/controller/search/',
type: 'POST',
data: {
'term': request.term,
},
dataType: 'json',
success: function (data) {
console.log(data);
orgdetails = {};
var dta = $.map(data, function(v, i){
orgdetails[v.name] = v.id;
return {
label: v.name,
id: v.name
};
});
response(dta); //response(dta);
},
error: function (result) {}
}); //ajax
}
}).focus(function () {
$(this).trigger('keydown.autocomplete');
});
Only started today but I'm having massive problems trying to understand JSON/AJAX etc, I've gotten my code this far but am stumped on how to return the data being pulled by the AJAX request to the jQuery Auto complete function.
var autocomplete = new function() {
this.init = function() {
$('#insurance_destination').autocomplete({
source: lookup
});
}
function lookup() {
$.ajax({
url: "scripts/php/autocomplete.php",
data: {
query: this.term
},
dataType: "json",
cache: false,
success: function(data) {
for (key in data) {
return {
label: key,
value: data[key][0]
}
}
}
});
}
}
And example of the JSON string being returned by a PHP script
{
"Uganda": ["UGA", "UK4", "Worldwide excluding USA, Canada and the Carribbean"]
}
Normally, you don't have to do ajax query yourself:
$('#insurance_destination').autocomplete('url_here', {options_here});
That's assuming we're talking about standard jquery autocomplete plugin. Do I understand you correctly?
edit
Check api
http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions
There are also some examples.
This is the code I've ended up with, it works in Chrome and Firefox but not in IE 6/7...
var autocomplete = new function (){
this.init = function() {
$('#insurance_destination').autocomplete({
source: function(request, response) {
debugger;
$.ajax({
url: "scripts/php/autocomplete.php",
dataType: "json",
data: {query:this.term},
success: function(data) {
response($.map(data.countries, function(item) {
return {
label: '<strong>'+item.name+'</strong>'+' '+item.description,
value: item.name,
code : item.region
}
}))
}
})
},
minLength: 2,
select: function(event, ui) {
$('#insurance_iso_code_hidden').val(ui.item.code);
},
open: function() {
},
close: function() {
}
});
}
}