Develop Reference

Please check why this script not Working?

Hi I want to create a simple url shortner script using the bitly api and jquery but the script is not working I am enable to find out why? Please correct the script mentioned below. Thanks.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
$(document).ready(function(){
var inputurl;
var accessToken = "apikeyhere";
$("#convertBtn").on('click',function(){
inputurl = $("#inputurl").val();
$("#longURL").html(inputurl);
$("#shortURL").html("");
var params = {
"long_url" : inputurl
};
$.ajax({
url: "https://api.ssl.bitly.com/v4/shorten",
cache: false,
dataType: "json",
method: "POST",
contentType: "application/json",
beforeSend: function (xhr){
xhr.setRequestHeader("Authorization", "Bearer" + accessToken),
};
data: JSON.stringify(params)
}).done(function(data){
$("#shortURL").html(data.link);
console.log(data.link);
}).fail(function(data){
$("#shortURL").html(data.link);
console.log(data.link);
});
});
</script>
<input type="text" id="inputurl">
<button type="button" id="convertBtn">Convert</button>
<p> Long Url: <span id="longURL"></span></p>
<p> Short <span id="shortURL"></span></p>

<script>
$(document).ready(function(){
var inputurl;
var accessToken = "apikeyhere";
$("#convertBtn").on('click',function(){
inputurl = $("#inputurl").val();
$("#longURL").html(inputurl);
$("#shortURL").html("");
var params = {
"long_url" : inputurl
};
$.ajax({
url: "https://api.ssl.bitly.com/v4/shorten",
cache: false,
dataType: "json",
method: "POST",
contentType: "application/json",
beforeSend: function (xhr){
xhr.setRequestHeader("Authorization", "Bearer" + accessToken)},
data: JSON.stringify(params)
}).done(function(data){
$("#shortURL").html(data.link);
console.log(data.link);
}).fail(function(data){
$("#shortURL").html(data.link);
console.log(data.link);
});
});
});
</script>

The problem was you missed "})"
I marked it on the code with **
$(document).ready(function(){
var inputurl;
var accessToken = "apikeyhere";
$("#convertBtn").on('click',function(){
inputurl = $("#inputurl").val();
$("#longURL").html(inputurl);
$("#shortURL").html("");
var params = {
"long_url" : inputurl
};
$.ajax({
url: "https://api.ssl.bitly.com/v4/shorten",
cache: false,
dataType: "json",
method: "POST",
contentType: "application/json",
data: JSON.stringify(params),
beforeSend: function (xhr){
xhr.setRequestHeader("Authorization", "Bearer" + accessToken)
},
success:function(data){
$("#shortURL").html(data.link);
console.log(data.link);
},
error:function(data){
$("#shortURL").html(data.link);
console.log(data.link);
}
});
**});**
});

Why i am getting 406 not acceptable response?

here is my code
$.ajax({
url: "DataGridServlet.htm",
type: "GET",
traditional: true,
dataType: 'JSON',
cache: false,
contentType:"application/json",
success: function (response){
console.log(response);
}
});
});
and when i am sending request to controller.. every is working but wnem returning JSONObject i am getting thya status code as 406 not acceptable.
and below spring controller code
#RequestMapping(value="/DataGridServlet.htm", method = RequestMethod.GET,produces="application/json",headers="Accept=*/*")
public #ResponseBody JSONObject getReturnData()
{
System.out.println("control came into conroller");
JSONObject dataObject=new JSONObject();
dataObject=jqTabsGridDataDao.getTabsData();
System.out.println("controller data"+dataObject);
return dataObject;
}
any one can help me?

Change
#RequestMapping(value="/DataGridServlet.htm", method = RequestMethod.GET,produces="application/json",headers="Accept=*/*")
to
#RequestMapping(value="/DataGridServlet.htm", method = RequestMethod.GET,produces="application/json",)
and this
$.ajax({
url: "DataGridServlet.htm",
type: "GET",
traditional: true,
dataType: 'JSON',
cache: false,
contentType:"application/json",
success: function (response){
console.log(response);
}
});
});
to
$.ajax({
url: 'DataGridServlet.htm',
type: "GET",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
success: function(result) {
alert(result + " result ");
},
error: function(resError) {
//alert(resError + " Error ");
}
});

Nested Promise structure

I have a javascript function with two promises:
uploadDocument = function (formData, order) {
$.ajax({
type: "POST",
url: "/API/Documents/addDocument",
data: formData,
contentType: false,
processData: false
}).then(function (documentID) {
order.referenceID = documentID;
return $.ajax({
type: "POST",
url: "/API/Documents/addOrder",
data: ko.toJSON(transaction),
contentType: "application/json"
});
}).then(function (result) {
return 'success';
});
}
That works perfectly, the API calls success.
the call to the function is:
uploadDocument(formData, order).then(function (data) {
console.log('success');
})
At this point I'm getting an error:
Uncaught TypeError: Cannot read property 'then' of undefined
What am I doing worng?

You need to return your $.ajax() and then use then on it. Without return the function returns undefined by default, so why you get an error. See return before $.ajax(...).then(...).
uploadDocument = function (formData, order) {
return $.ajax({
type: "POST",
url: "/API/Documents/addDocument",
data: formData,
contentType: false,
processData: false
}).then(function (documentID) {
order.referenceID = documentID;
return $.ajax({
type: "POST",
url: "/API/Documents/addOrder",
data: ko.toJSON(transaction),
contentType: "application/json"
});
}).then(function (result) {
return 'success';
});
}

Call ajax.fail() from ajax.success()

So all I want to do is conditionally call the .fail method from within the .success method, how?
var ajaxCall = $.ajax({
url: pUrl,
type: "POST",
data: pData,
dataType: "json",
processData: false,
contentType: "application/json; charset=utf-8"
})
.always(function () {
alert("always");
})
.success(function (data) {
if (data == "fail") { ajaxCall.fail(); return; }
alert("success");
})
.fail(function () {
alert("fail");
});

$.ajax return a promise so you can't do it directly. Your best shot is that :
var fail = function () {
alert("fail");
};
var ajaxCall = $.ajax({
url: pUrl,
type: "POST",
data: pData,
dataType: "json",
processData: false,
contentType: "application/json; charset=utf-8"
})
.always(function () {
alert("always");
})
.success(function (data) {
if (data == "fail") { fail(); return; }
alert("success");
})
.fail(fail);

You can simply call as this.fail(); as shown below :-
var ajaxCall = $.ajax({
url: pUrl,
type: "POST",
data: pData,
dataType: "json",
processData: false,
contentType: "application/json; charset=utf-8"
})
.always(function () {
alert("always");
})
.success(function (data) {
if (data == "fail")
{
this.fail();
return;
}
alert("success");
})
.fail(function () {
alert("fail");
});
For more information :-
http://www.youlikeprogramming.com/2013/07/jqueryajax-conditionally-call-error-method-fro-success/

just use the "this" keyword to actually call any other method of the ajax call, I have made a sample for error method.
$.ajax({
url: 'url',
dataType: 'json',
contentType: 'application/json; charset=utf-8;',
type: 'GET',
success: function (dataReturn) {
this.error('error called explicitly');
},
error: function (errorMessage) {
if(errorMessage.ResponseText) // or directly compare as errorMessage !== "error called explicitly" if u send the same message elsewhere
//actual error code
else
alert(errorMessage);
}
});
hope this helps :)

Ajax success function not running

I have the following Ajax request which I make. Currently if the json response is true then the success callback runs. But if the json response is false then the success callback isn't run, even if the Ajax request itself is successfully made.
$.ajax({
url: "http://testdomain.com/wp-admin/admin-ajax.php",
type: "POST",
dataType: "json",
cache: false,
data: {
action: 'check_username',
user: user_email
},
success: function(json) {
if (json.user_exists == true) {
$.ajax({
url: "http://testdomain.com/wp-admin/admin-ajax.php",
type: "POST",
dataType: "json",
cache: false,
data: {
action: 'auto_login',
user: user_email
},
success: function(json) {
$('#aux_lightbox_overlay').fadeOut();
}
});
}
if (json.user_exists == false) {
$.ajax({
url: "http://testdomain.com/wp-admin/admin-ajax.php",
type: "POST",
dataType: "json",
cache: false,
data: {
action: 'auto_register',
user: user_email
},
success: function(json) {
$('#aux_lightbox_overlay').fadeOut();
}
});
}
}
});
So my question is, how do I get the callback to run even if the response is false?
Thanks

Maybe you need to use complete instead success and error.
$.ajax({
url: "http://testdomain.com/wp-admin/admin-ajax.php",
type: "POST",
dataType: "json",
cache: false,
data: {
action: 'check_username',
user: user_email
},
complete: function(json) {
if (json.user_exists == true) {
$.ajax({
url: "http://testdomain.com/wp-admin/admin-ajax.php",
type: "POST",
dataType: "json",
cache: false,
data: {
action: 'auto_login',
user: user_email
},
success: function(json) {
$('#aux_lightbox_overlay').fadeOut();
}
});
}
if (json.user_exists == false) {
$.ajax({
url: "http://testdomain.com/wp-admin/admin-ajax.php",
type: "POST",
dataType: "json",
cache: false,
data: {
action: 'auto_register',
user: user_email
},
success: function(json) {
$('#aux_lightbox_overlay').fadeOut();
}
});
}
}
});

Are you sure that when the user does not exist, json.user_exists is indeed equal to false? If I understand you correctly, the if (json.user_exists == false){...} statement is not triggered, so there is something weird there.
For more robust code, you could change
if (json.user_exists == true) {
// ...
}
if (json.user_exists == false){
// ...
}
into
if (json.user_exists == true) {
// ...
}
else {
// ...
}