Ajax result as an img? - javascript

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+"'>")
}

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

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

Ajax response isn't responding to a json response

The task is very simple I only need to save these json responses into my code to manipulate it later but I can't get to make it function. I've tried more than a strategy with nothing working. Thing is it's working for a json and not the other with the exact same syntax. Here is my code
function searchOwner() {
$.ajax({
type: "GET",
contentType: "application/json",
dataType: "jsonp",
url: "https://elvet.eu-gb.mybluemix.net/get_pet_owner?pet_id=p12345678912345",
success: function(responseData) {
alert(responseData)
}
})
}
function searchPet() {
$.ajax({
type: "GET",
contentType: "application/json",
dataType: 'jsonp',
url: "https://elvet.eu-gb.mybluemix.net/getpets?pet_id=p12345678912345",
success: function(responseData) {
alert('ok')
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The SearchOwner is not working at all while searchPet is working just fine. Any help would be highly appreciated thank you
dataType : "json", in searchOwner() where as it's dataType: 'jsonp' in searchPet()

How to do Ajax requests?

Am trying to make wikipedia viewer for my freecodecamp project. But the ajax request fails every time. It does not return anything.
var url, value;
$(document).ready(function() {
$("button").on("click", function() {
value = $("input").val();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" +
value + "&format=json&callback=?";
$.ajax({
type: "GET",
url: url,
async: false,
dataType: "json",
//jsonp: "callback",
success: function(data) {
console.log(data);
}
});
});
});
set dataType: 'jsonp'
remove &callback=? from the url (that's the default that jQuery will use anyway
example
var value = "google";
var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&search='+ value + '&format=json';
$.ajax({
type: 'GET',
url: url,
dataType: 'jsonp',
success: function (data)
{
console.log(data);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Use this code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" /><br /><br />
<button>Click here</button>
<script>
var url, value;
$(document).ready(function() {
$("button").on("click", function() {
value = $("input").val();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" +
value + "&format=json";
$.ajax({
type: "GET",
url: url,
async: false,
dataType: "jsonp",
success: function(data) {
console.log(data);
}
});
});
});
</script>

Javascript ajax code syntax

What's wrong with my syntax? I got an eror in the Firefox debug console. I'm using .NET MVC btw.
$(document).ready(function () {
$(':submit').on('click', function () {
var button = $(this).val();
$.ajax({
url: "#(Url.RouteUrl("Trelon"))",
data: { #Model.Defeli : $(this).val()},
dataType: 'application/json; charset=utf-8',
})
.done(function (data) {
$('#myTextDiv').html('');
$('#myTextDiv').append('Test');
});
return false;
});
});
This mentions the 3 line in the above sample:
SyntaxError: missing : after property id 3:61:30
Try this
$.ajax({
url: "#(Url.RouteUrl('Trelon'))",
data: {#Model.Defeli : $(this).val()},
dataType: 'json',
})
try contentType: 'application/json; charset=utf-8', if try giving hard value for url and data.
$.ajax({
url: "#(Url.RouteUrl("Trelon"))",
data: {#Model.Defeli : $(this).val()},
contentType: 'application/json; charset=utf-8',
});
If #Model.Defeli has special characters or is not a string, data won't be a valid JSON
$.ajax({
url: "#(Url.RouteUrl("Trelon"))",
data: { #Model.Defeli : $(this).val()},
dataType: 'application/json; charset=utf-8'
})
Removing the comma at the end helped.

Categories

Resources