Develop Reference

JavaScript is not a function

I'm trying to write the following so that I can initiate Game by calling Game.init() but I keep getting:
Uncaught TypeError: Game.init is not a function
var Game = function() {
return {
init: function(url) {
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: function(response) {
console.log(response);
}
});
},
success: function(response) {
console.log(response);
}
}
}
$(function() {
Game.init('./file.json');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

As VLAZ pointed out it has to be Game().init() or else you can make a immediately invoking function expression
var Game = (function() {
return {
init: function(url) {
console.log('test')
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: function(response) {
console.log(response);
}
});
},
success: function(response) {
console.log(response);
}
}
}())
$(function() {
Game.init('./file.json');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Try this:
var Game = (function () {
return {
init: function (url) {
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: function(response) {
console.log(response);
}
});
},
success: function(response) {
console.log(response);
}
}
})()

Game is a function not an object
$(function () {
Game().init('./file.json');
});

How to pass values from Ajax to another function

I need a help to understand how to export values from ajax fucntion and import that into a different function
example
function getlanlon(){
$.ajax({
type: "GET",
url: "{{URL::to('/')}}/getlatlng",
//data: {value: 0},
//async: true,
success: function(result){
console.log(result)
}
}, "json");
};
Now, We need to call this "result" into bellow function but does not work, the console.log always show undefined.
map.on('load', function () {
latlon= getlanlon()
console.log(latlon)
}

You need a callback or promise or deferred object:
function getlanlon(callback){
$.ajax({
type: "GET",
url: "{{URL::to('/')}}/getlatlng",
//data: {value: 0},
//async: true,
success: function(result){
if(callback){
callback(result);
}
console.log(result)
}
}, "json");
};
map.on('load', function () {
getlanlon(function(latlon){
console.log(latlon)
})
}
Or using Deferred object.
function getlanlon(){
var deferred = $.Deferred();
$.ajax({
type: "GET",
url: "{{URL::to('/')}}/getlatlng",
//data: {value: 0},
//async: true,
success: function(result){
deferred.resolve(result);
console.log(result)
}
}, "json");
return deferred;
};
map.on('load', function () {
getlanlon()
.then(function(latlon){
console.log(latlon);
})
})
}

Something wrong with ajax call, cannot figure out what

Trying to make a simple ajax call but I'm not able to console.log the response.
Navigating to the url in browser gives back data, but still.
I'm not seeing the error alert either, so it should not be failing?
Code:
var $searchBox = $('#search');
var $searchButton = $('#button');
$searchButton.on('click', function(){
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search="
+ $searchBox.val() + "&format=json&callback=?";
console.log(url);
$.ajax({
type: 'GET',
url: url,
async: false,
dataType: 'json',
success: function(data){
console.log(data);
},
error: function(errorMessage){
alert('Error');
}
});
});

To prevent click default redirection, you can use e.preventDefault() event.
var $searchBox = $('#search');
var $searchButton = $('#button');
$searchButton.on('click', function(e){
e.preventDefault();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search="
+ $searchBox.val() + "&format=json&callback=?";
console.log(url);
$.ajax({
type: 'GET',
url: url,
async: false,
dataType: 'json',
success: function(data){
console.log(data);
},
error: function(errorMessage){
alert('Error');
}
});
});

Can I call ajax function inside another ajax function? [duplicate]

Is it possible to make an ajax request inside another ajax request?
because I need some data from first ajax request to make the next ajax request.
First I'm using Google Maps API to get LAT & LNG, after that I use that LAT & LNG to request Instagram API (search based location).
Once again, is this possible, and if so how?
$('input#search').click(function(e) {
e.preventDefault();
var source = $('select[name=state] option:selected').text()+' '+$('select[name=city] option:selected').text()+' '+$('select[name=area] option:selected').text();
var source = source.replace(/ /g, '+');
if(working == false) {
working = true;
$(this).replaceWith('<span id="big_loading"></span>');
$.ajax({
type:'POST',
url:'/killtime_local/ajax/location/maps.json',
dataType:'json',
cache: false,
data:'via=ajax&address='+source,
success:function(results) {
// this is where i get the latlng
}
});
} else {
alert('please, be patient!');
}
});

Here is an example:
$.ajax({
type: "post",
url: "ajax/example.php",
data: 'page=' + btn_page,
success: function (data) {
var a = data; // This line shows error.
$.ajax({
type: "post",
url: "example.php",
data: 'page=' + a,
success: function (data) {
}
});
}
});

Call second ajax from 'complete'
Here is the example
var dt='';
$.ajax({
type: "post",
url: "ajax/example.php",
data: 'page='+btn_page,
success: function(data){
dt=data;
/*Do something*/
},
complete:function(){
$.ajax({
var a=dt; // This line shows error.
type: "post",
url: "example.php",
data: 'page='+a,
success: function(data){
/*do some thing in second function*/
},
});
}
});

This is just an example. You may like to customize it as per your requirement.
$.ajax({
url: 'ajax/test1.html',
success: function(data1) {
alert('Request 1 was performed.');
$.ajax({
type: 'POST',
url: url,
data: data1, //pass data1 to second request
success: successHandler, // handler if second request succeeds
dataType: dataType
});
}
});
For more details : see this

$.ajax({
url: "<?php echo site_url('upToWeb/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function (data) {
if (data.web == 0) {
if (confirm('Data product upToWeb ?')) {
$.ajax({
url: "<?php echo site_url('upToWeb/set_web/')?>/" + data.id_item,
type: "post",
dataType: "json",
data: {web: 1},
success: function (respons) {
location.href = location.pathname;
},
error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
alert(xhr.responseText); // munculkan alert
}
});
}
}
else {
if (confirm('Data product DownFromWeb ?')) {
$.ajax({
url: "<?php echo site_url('upToWeb/set_web/')?>/" + data.id_item,
type: "post",
dataType: "json",
data: {web: 0},
success: function (respons) {
location.href = location.pathname;
},
error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
alert(xhr.responseText); // munculkan alert
}
});
}
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert('Error get data from ajax');
}
});

JSP AJAX return NULL

i using JQuery Ajax to call REST api in jsp but it return null no matter how i call but it can work in html. is there any way to solve this problem. Cant seem to find a solution in the net.
$(document).ready(function () {
alert('ready');
var accessKey = 'xkg8VRu6Ol+gMH+SUamkRIEB7fKzhwMvfMo/2U8UJcFhdvR4yN1GutmUIA3A6r3LDhot215OVVkZvNRzjl28TNUZgYFSswOi';
var thisUrl = 'http://www.onemap.sg/API/services.svc/getToken?accessKEY=' + accessKey;
$.ajax({
type: "GET",
url: thisUrl,
dataType: 'application/json',
success: function (data) {
alert('data is:' + data.GetToken[0].NewToken);
}
});
alert(thisUrl);
});

dataType should be jsonp
$(document).ready(function () {
var thisUrl = 'http://www.onemap.sg/API/services.svc/getToken?accessKEY=' + accessKey;
$.ajax({
type: "GET",
url: thisUrl,
dataType: 'jsonp',
success: function (data) {
console.log(data)
alert('data is:' + data.GetToken[0].NewToken);
}
});
});

Refer to this article:
http://www.isgoodstuff.com/2012/07/22/cross-domain-xml-using-jquery/
You only need "jquery.xdomainajax.js" that is there in the sample source-code to make it work.
$.ajax({
url: 'https://asdf/asdf',
dataType: "xml",
type: 'GET',
success: function(res) {
var myXML = res.responseText;
alert(myXML);
}
});