Please check why this script not Working? - javascript

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);
}
});
**});**
});

Related

How to write pretty URL based from data?

How to write pretty url from these data?
I need something like this https://mywebsite.com/admin/leads/count/data1/data2/data3
Thanks in advance. :)
var x = {data1, data2, data3};
$.ajax({
url: 'https://mywebsite.com/admin/leads/count/',
data: x,
type: 'GET',
contentType: "application/x-www-form-urlencoded",
datatype: "json",
async: false,
success: function(data){
$("#leads_count").val(data);
leadsCtr = data;
}
});
Take url as a string and manipulate it like this
var x = {data1, data2, data3};
var string = 'https://mywebsite.com/admin/leads/count/';
var fstring = string+x.data1+'/'+x.data2+'/'+x.data3;
$.ajax({
url: fstring,
data: x,
type: 'GET',
contentType: "application/x-www-form-urlencoded",
datatype: "json",
async: false,
success: function(data){
$("#leads_count").val(data);
leadsCtr = data;
}
});

What is the meaning of the error getCode?

product code on /produkidbypulsa/ does not exist, should be /produkidbypulsa/1/
How do I fix it?
this is function getCode
function getCode() {
var kode_produk = $('#pulsa').val();
// pulsa.innerHTML = "";
$.ajax({
type: 'GET',
url: '/produkbyidpulsa' + '/' + kode_produk,
dataType: 'JSON',
success: function (data) {
// pulsa.innerHTML +=
$('#kodeproduk').val(data.kode_produk)
$('#pulsa_code').val(data.pulsa_code)
$('#totalweb').val(data.harga_beli)
var kodeprod = data.kode_produk
$('#total').val(data.harga_jual)
$('#harga').html(data.harga_jual)
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
})
$.ajax({
type: 'GET',
url: 'https://testprepaid.mobilepulsa.net/v1/legacy/index/pulsa' + kodeprod,
dataType: 'JSON',
processData: false,
contentType: 'application/json',
CrossDomain: true,
async: false,
success: function (data) {
$('#totalweb').val(data.harga_beli)
}
})
}
})
// });
}
and this is onclick for call getCode()
<div class="col-md-12" id="pulsa" name="pulsa" onclick="getCode()"><label for="harga"></label></div>

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 ");
}
});

Ajax: send mulit images

I use laravel and I want to upload gallery and I want to use ajax.
I created this code
$('#hello').on('submit', function(e){
e.preventDefault();
var formData = new FormData(this);
$.ajax({
method: "POST",
url: "{{ route('upload.store')}}",
mimeType: "multipart/form-data",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: formData,
success: function(done){
console.log(done)
},
error: function(error){
console.log(error);
}
});
});
This is ma the latest code. Could you help me?
$('#hello').on('submit', function(e){
e.preventDefault();
var formData = new FormData($("#hello")[0]);
$.ajax({
url: "{{ route('upload.store')}}",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData:false,
dataType: 'json',
success: function(done){
console.log(done)
},
error: function(error){
console.log(error);
}
});
});

Ajax result as an img?

This script is pulling an img link, which works fine so far, but I have no Idea how to return the link as an img.. Somebody help me!
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var channel_name = 'justsmoki';
$.ajax({
url: 'https://api.twitch.tv/kraken/channels/' + channel_name,
type: 'GET',
dataType: 'jsonp',
contentType: 'application/json',
mimeType: 'application/vnd.twitchtv.v2+json',
success: function(json_result) {
$('#my_stream_logo').html(json_result.logo);
}
});
</script>
<span id="my_stream_logo"></span>
Try this...
var channel_name = 'justsmoki';
$.ajax({
url: 'https://api.twitch.tv/kraken/channels/' + channel_name,
type: 'GET',
dataType: 'jsonp',
contentType: 'application/json',
mimeType: 'application/vnd.twitchtv.v2+json',
success: function(json_result) {
$('#img').attr("src",json_result.logo);
}
});
Change span to img.
<img id="img" />
Here's the fiddle.
In your success callback, you want to set the html of your element.
Replace this...
success: function(json_result) {
$('#my_stream_logo').html(json_result.logo);
}
With this...
success: function(json_result) {
$('#my_stream_logo').html("<img src='"+json_result.logo+"'>")
}

Categories

Resources