Develop Reference

Javascript get JSON value from URL error

im using the function below to get image names. I also use the json code to get data of a different url, but somehow it isnt working at this. (im new to javascript. Just writing php normally.
function getImgname(name) {
$.getJSON("http://url.com/info.php?name="+name, function(json321) {
return json321.js_skininfo;
});
}

Try this:
function getImgname(myName) {
$.ajax({
url: 'http://url.com/info.php',
data: {
name: myName
},
type: 'POST',
dataType: 'json',
success: function(data) {
// do what you want with your data
return data.js_skininfo;
}
});
}

I tried this now:
function getImgname(myName) {
$.ajax({
url: "http://url.com/ninfo.php",
type: 'POST',
dataType: 'json',
success: function (data) {
return data.js_skininfo;
},
error: function () {
}
});
}
This isnt working (undefinied), but if i alert the data.js_skininfo it shows me the correct value.

Autocomplete not listing result properly

I am getting response through autofill which i can view through inspect in chrome. But I couldn't display properly neither i am getting any result in console.log
$(document).ready(function(){
$(function() {
$("#search_text").autocomplete({
source: "/find_city",
minLength: 1,
data:$('#search_text').val(),
success:function(data){
console.log(data);
}
});
});
})

Your source must be your ajax request
source: function (request, response) {
$.ajax({
url: "/find_city",
data: $('#search_text').val(),
dataType: "json",
success: function (data) {
// do something
}
});
}
and in your callback just return assign your desired value and label for the select input option element(s)
response($.map(data, function (item) {
return {
label: item.name,
value: item.name
}
}));
So you code would be like this
source: function (request, response) {
$.ajax({
url: "/find_city",
data: $('#search_text').val(),
dataType: "json",
success: function (data) {
response($.map(data, function (item) {
return {
label: item.name,
value: item.name
}
}));
}
});
}

I have found solution to my issue. I have changed name field from cities table to value and it works like a charm. I could also use key field

Combining Jquery and Javascript function

This is a relatively novice question. I have the following jQuery function:
$(function ()
{
$.ajax({
url: 'testapi.php',
data: "query="+queryType,
dataType: 'json',
success: function(data)
{
var id = data[0];
$('#'+divID).html(id);
}
});
});
I'm looking to name and parameterize the function so that I can call it repeatedly (with the parameters queryType and divID which are already included in the code). I've tried unsuccessfully multiple times. Would anyone have any insight?

Just stick it in a function
function doAjax(queryType, divID) {
return $.ajax({
url: 'testapi.php',
data: {query : queryType},
dataType: 'json'
}).done(function(data) {
var id = data[0];
$('#'+divID).html(id);
});
}
and use it
$(function() {
element.on('click', function() {
var id = this.id
doAjax('get_content', id);
});
});
or
$(function() {
element.on('click', function() {
var id = this.id
doAjax('get_content', id).done(function(data) {
// do something more with the returned data
});
});
});

If you're just looking for a simple function to wrap the ajax call give this a try. Place this function above the document ready code.
function callAjax(queryType, divID) {
$.ajax({
url: 'testapi.php',
data: "query="+queryType,
dataType: 'json',
success: function(data) {
var id = data[0];
$('#'+divID).html(id);
}
});
}
To call the function do this:
callAjax('YourQueryHere', 'YourDivIdHere');

function myFunction(queryType, divID)
{
$.ajax({
url: 'testapi.php',
data: "query="+queryType,
dataType: 'json',
success: function(data)
{
var id = data[0];
$('#'+divID).html(id);
}
});
}
and to call it simply use
myFunction("someQueryType", "myDiv");

function doThis(queryType, divID)
{
$.ajax({
url: 'testapi.php',
data: "query="+queryType,
dataType: 'json',
success: function(data)
{
var id = data[0];
$('#'+divID).html(id);
}
});
}

How can I make sure that other functions is run after this get function is fully completed and rendered?

I have this script that adds elements with data by a get json function.
$(document).ready(function() {
ADD.Listitem.get();
});
It basicly adds a bunch of html tags with data etc. The problem I have is following:
$(document).ready(function() {
ADD.Listitem.get();
var arr = [];
$(".Listitem-section-item-title").each(function() {
arr.push($(this.text()));
});
});
-
get: function(web) {
AST.Utils.JSON.get("/_vti_bin/AST/ListItem/ListitemService.svc/GetListItem", null, AST.Listitem.renderListitem);
},
renderListitem: function(data) {
$("#Listitem-template").tmpl(data["ListItemResults"]).prependTo(".ListItem-section-template");
}
and here is the json get:
ADD.Utils.JSON.get = function (url, data, onSuccess) {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
async: true,
url: url,
data: data,
cache: false,
dataType: "json",
success: onSuccess,
error: ADD.Utils.JSON.error,
converters: { "text json": ADD.Utils.JSON.deserialize }
});
}
The array each loop is not running beacuse the get method is not finished with rendering the Listitem-section-item-title selector so it cant find the selector.
Is there any good solutions for this?

You could change your functions to return the promise given by $.ajax :
ADD.Utils.JSON.get = function (url, data) {
return $.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
async: true,
url: url,
data: data,
cache: false,
dataType: "json",
converters: { "text json": ADD.Utils.JSON.deserialize }
}).fail(ADD.Utils.JSON.error);
}
get: function(web) {
return AST.Utils.JSON.get("/_vti_bin/AST/ListItem/ListitemService.svc/GetListItem", null).done(AST.Listitem.renderListitem);
},
So that you can do
$(document).ready(function() {
ADD.Listitems.get().done(function(){
var arr = [];
$(".Listitem-section-item-title").each(function() {
arr.push($(this.text()));
});
});
});

Callback:
$(document).ready(function() {
ADD.Listitem.get(url,data,function(){
var arr = [];
$(".Listitem-section-item-title").each(function() {
arr.push($(this.text()));
});
});
});
Without callback:
If you cant get the get method to take a callback or return a promise then I think the best way will be to check when its done.
$(document).ready(function() {
ADD.Listitem.get();
var timer = setInterval(function(){
if ($("#thingWhichShouldExist").length>0){
var arr = [];
$(".Listitem-section-item-title").each(function() {
arr.push($(this.text()));
});
clearInterval(timer);
}
},50);
});

Retrieve the values and on success, call a function which will push the values into the array.
Also, arr.push($(this.text())); should be arr.push($(this).text());.

Going reusable with data attributes and jquery

I have many Bootstrap Type-ahead attached to my text-box.
I was using there id to select then and attach typeahead.
Sample
$("#SireTag").typeahead({
source: function (query, process) {
$.ajax({
url: '/Bull/GetSireTag',
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
});
}
});
Now i decided to make it more readable and short by using a single java-script code to attach type ahead to all my text-boxes.
<input data-typeahead-url="/Bull/GetSireTag" id="SireTag" name="SireTag" type="text" value="">
New Javascript
$('*[data-typeahead-url]')
.each(function () {
alert(this);
$(this).typeahead({
source: function (query, process) {
$.ajax({
url: $(this).data("typeahead-url"),
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
})
}
});
});
But its not working i am not so proficient with java-script anyone now whats wrong.
I tried developers tool ajax request is not made.

$('*[data-autocomplete-url]') doesn't select your elements because you're using data-typeahead-url.

You need to return the ajax result to the source, also don't use alert() to debug, use console.log() instead:
$('input[data-typeahead-url]').each(function () {
$(this).typeahead({
source: function (query, process) {
return $.ajax({
url: $(this).data("typeahead-url"),
type: 'POST',
data: { query: query },
dataType: 'json',
async: true,
success: function (resp) {
console.log(resp);
return process(resp);
}
});
}
});
});
Hope it helps.

$('*[data-typeahead-url]')
.each(function () {
var url = $(this).data("typeahead-url");
$(this).typeahead({
source: function (query, process) {
$.ajax({
url: url,
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
})
}
});
});
Problem: The code was making ajax request but to the same address.
Diagnose: I tried log($(this).data("typeahead-url");) which gave desired output.
Solution: I created and stored the Url the used it as a parameter in ajax call
var url = $(this).data("typeahead-url");
Hope this help.