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');
});
Related
I want the html value of AJAX in outside of AJAX Call or in the $('#username').blur(function() function.. Is this possible ?
<script>
$(document).ready(function() {
$('#username').blur(function() {
var username = $(this).val();
availibilityCheck(username);
})
function availibilityCheck(username) {
var result = "";
$.ajax({
url: "action.php",
method: "POST",
data: {
action: "availibilityCheck",
data: username
},
dataType: "text",
success: function(html) {
$('#usernameresponse').html(html);
}
})
}
});
</script>
<script>
$(document).ready(function() {
$('#username').blur(function() {
var username = $(this).val();
availibilityCheck(username);
var return_first;
function callback(response) {
return_first = response;
//use return_first variable here
}
})
function availibilityCheck(username) {
var result = "";
$.ajax({
url: "action.php",
method: "POST",
data: {
action: "availibilityCheck",
data: username
},
dataType: "text",
success: function(html) {
callback(html);
$('#usernameresponse').html(html);
}
})
}
});
</script>
Jquery Ajax Loading not working with async
Code below
$('#pagination').on('click','a',function(e){
e.preventDefault();
var data = $(this).attr('data-pagination-page');
var selector=$('.frmTable');
var response=getData(selector,data);
});
Ajax Function
function getData(selector,data){
var result="";
var frmAction=$(selector).attr('action');
$.ajax({
url: frmAction+'/'+data,
type: 'post',
data: $(selector).serialize(),
async: false,
beforeSend: function(){
console.log("Request Submiting....");
$('#loading').css('display','block');
},
success: function(response){
result = response;
},
complete:function(data){
$('#loading').css('display','none');
console.log("Request Complete....");
}
});
return result;
}
Can you provide me suggestion how deal with ajax loading icon.
Using setTimeout problem is solve
function getData(selector,data){
var result="";
var frmAction=$(selector).attr('action');
$.ajax({
url: frmAction+'/'+data,
type: 'post',
data: $(selector).serialize(),
async: false,
beforeSend: function(){
console.log("Request Submiting....");
$('#loading').css('display','block');
},
success: function(response){
result = response;
},
complete:function(data){
console.log("Request Complete....");
setTimeout(function(){
$('#loading').css('display','none');
}, 500);
}
});
return result;
}
I have the function below:
function getHtmlFromMarkdown(markdownFormat, requestUrl) {
const dataValue = { "markdownFormat": markdownFormat }
$.ajax({
type: "POST",
url: requestUrl,
data: dataValue,
contentType: "application/json: charset = utf8",
dataType: "text",
success: function (response) {
alert(response);
document.getElementById("generatedPreview").innerHTML = response;
},
fail: function () {
alert('Failed')
}
});
}
And i have this on my server:
[WebMethod]
public static string GenerateHtmlFromMarkdown(string markdownFormat)
{
string htmlFormat = "Some text";
return htmlFormat;
}
I have on response html code, not the string that i want. What am I doing wrong?
And if i change the "dataType: json" it doesn't even enter either the success nor fail functions
Your data type of ajax must be json like this
function getHtmlFromMarkdown(markdownFormat, requestUrl) {
var dataValue = { "markdownFormat": markdownFormat }
$.ajax({
type: "POST",
url: requestUrl,
data: JSON.stringify(dataValue),
dataType: "json",
success: function (response) {
alert(response);
document.getElementById("generatedPreview").innerHTML = response;
},
error: function () { alert("Failed"); }
});
}
try with this.
function getHtmlFromMarkdown(markdownFormat, requestUrl) {
var obj={};
obj.markdownFormat=markdownFormat;
$.ajax({
type: "POST",
url: requestUrl,
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response.d);
document.getElementById("generatedPreview").innerHTML = response.d;
},
failure: function () {
alert('Failed')
}
});
}
I'm getting SyntaxError but works fine with other links. any idea???
function loadData() {
var wikiUrl = 'http://www.masslottery.com/data/json/search/dailygames/history/15/201711.json';
//http://www.masslottery.com/data/json/search/dailygames/history/15/201711.json?callback=jQuery1111019608043600812386_1511241988068&_=1511241988069
$.ajax({
url: wikiUrl,
dataType: "jsonp",
}).done(function (response) {
for (var i = 0; i < response; i++) {
console.log(response);
}
}).fail(function () {
// console.log(response);
});
return false;
};
$('#form-container').submit(loadData);
$.ajax({
url:"your link"
method: "get" or "post"
dataType: "json" or "jsonp"
}).done(function(res) {
console.log(res);
}).fail(function(error) {
console.log(error);
});
you missed method.
How can I use callback function from ajax in another function
I've got function with ajax:
function correct_date(raw_date){
return $.ajax({
method: "GET",
url: "../date/correct.php",
data: {
method: 'correct_date',
date: raw_date
},
cache: false,
dataType: 'json',
success: function(result) {
console.log(result.DATE_NEW);
showTheValue(result);
}
});
}
var showTheValue = function(correct_day_value) {
console.log(new Date(correct_day_value.DATE_NEW).toLocaleDateString('de-DE'));
return correct_day_value;
};
And I want to have the response/data value from ajax in another function like that:
function correct_start_date() {
document.getElementsByTagName("INPUT")[1].value = showTheValue();
}
How can I use response data from ajax in another function ?
You can you the JavaScript Promise.
http://www.html5rocks.com/en/tutorials/es6/promises/
function get(url) {
// Return a new promise.
return new Promise(function(resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function() {
// This is called even on 404 etc
// so check the status
if (req.status == 200) {
// Resolve the promise with the response text
resolve(req.response);
}
else {
// Otherwise reject with the status text
// which will hopefully be a meaningful error
reject(Error(req.statusText));
}
};
// Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};
// Make the request
req.send();
});
}
function correct_date(raw_date, callback){
return $.ajax({
method: "GET",
url: "../date/correct.php",
data: {
method: 'correct_date',
date: raw_date
},
cache: false,
dataType: 'json',
success: function(result) {
console.log(result.DATE_NEW);
return callback(result);
}
});
}
function showTheValue() {
correct_date(raw_date, function(correct_day_value) {
document.getElementsByTagName("INPUT")[1].value = correct_day_value;
});
}
You must use those two functions like:
function correct_date(raw_date){
return $.ajax({
method: "GET",
url: "../date/correct.php",
data: {
method: 'correct_date',
date: raw_date
},
cache: false,
dataType: 'json',
success: function(result) {
console.log(result.DATE_NEW);
correct_start_date(showTheValue(result));//***
}
});
}
var showTheValue = function(correct_day_value) {
console.log(new Date(correct_day_value.DATE_NEW).toLocaleDateString('de-DE'));
return correct_day_value;
};
function correct_start_date(correct_day_value) {
document.getElementsByTagName("INPUT")[1].value = correct_day_value;
}
Or if the "correct_start_date" is used according to a case:
function correct_date(raw_date){
return $.ajax({
method: "GET",
url: "../date/correct.php",
data: {
method: 'correct_date',
date: raw_date
},
cache: false,
dataType: 'json',
success: function(result) {
console.log(result.DATE_NEW);
var correct_day_value = showTheValue(result);
if (/* some case */) {
correct_start_date(correct_day_value);//***
}
}
});
}
Or wait until the value is set by the Ajax:
var globalVar = null;
function correct_date(raw_date){
return $.ajax({
method: "GET",
url: "../date/correct.php",
data: {
method: 'correct_date',
date: raw_date
},
cache: false,
dataType: 'json',
success: function(result) {
console.log(result.DATE_NEW);
globalVar = showTheValue(result);
//correct_start_date(globalVar);
}
});
}
var showTheValue = function(correct_day_value) {
console.log(new Date(correct_day_value.DATE_NEW).toLocaleDateString('de-DE'));
return correct_day_value;
};
function getGlobalVar() {
if(globalVar == null) {
window.setTimeout(getGlobalVar, 50);
} else {
return globalVar;
}
}
function correct_start_date() {
if (
document.getElementsByTagName("INPUT")[1].value = getGlobalVar();
}
This code worked for me:
function correct_date(raw_date){
return $.ajax({
method: "GET",
url: "../date/correct.php",
data: {
method: 'correct_date',
date: raw_date
},
cache: false,
dataType: 'json'
});
}
And then I can insert it wherever I want like this:
function parse_correct_day() {
.
.
.
.
var parse_correctday_value = correct_date("12.1.2016");
parse_correctday_value.success(function (data) {
var corrected_date = new Date(data.DATE_NEW);
document.getElementsByTagName("INPUT")[1].value = corrected_date.toLocaleDateString('de-DE');
});
}
Instead of calling 2 functions you should return the result from the function showTheValue and then show the response in the desired elements :
function correct_date(raw_date){
return $.ajax({
method: "GET",
url: "../date/correct.php",
data: {
method: 'correct_date',
date: raw_date
},
cache: false,
dataType: 'json',
success: function(result) {
console.log(result.DATE_NEW);
//You need to check the return value of your function and add the value accordingly
document.getElementsByTagName("INPUT")[1].value = showTheValue(result);
}
});
}
function showTheValue(correct_day_value) {
var localDate = new Date(correct_day_value.DATE_NEW).toLocaleDateString('de-DE');
console.log(localDate);
return localDate;
};