Can anyone see what i am doing wrong here? the youtube one is working but its not adding the image from thevideoThumbV function and cant work out why...
fiddle: https://jsfiddle.net/yurt5bb6/3/
function:
function videoThumbV(id) {
$.ajax({
type:'GET',
url: '//vimeo.com/api/v2/video/' + id + '.json',
jsonp: 'callback',
dataType: 'jsonp',
success: function(data){
var thumbnail_src = data[0].thumbnail_large;
return '<img class="vimeo-thumb" src="' + thumbnail_src + '"><div class="play-button"></div>';
}
});
}
You can't return stuff from synchronous call, you need to use a callback:
function videoThumbV(id, callback) {
$.ajax({
type:'GET',
url: '//vimeo.com/api/v2/video/' + id + '.json',
jsonp: 'callback',
dataType: 'jsonp',
success: function(data){
var thumbnail_src = data[0].thumbnail_large;
callback('<img class="vimeo-thumb" src="' + thumbnail_src + '"><div class="play-button"></div>');
}
});
}
videoThumbV(id, function(str) {
player.html(str);
});
JSFIDDLE
Related
Below is code I use to get data from a SharePoint List with Javascript. What would I need to do to get it work on a site like JS Bin or JS Fiddle with an open/free REST service? (Like iextrading.com?)
<script type="text/javascript">
function getCompanies () {
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Bills')/items?$select=AccountNumber&$orderby=AccountNumber&$filter=(PackageID eq '" + pid + "')",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.success(function (data,textStatus, jqXHR){
$("#ResultsDiv").empty();
for (var i = 0; i < data.d.results.length; i++)
{
var item = data.d.results[i];
$("#ResultsDiv").append(item.AccountNumber + "<br/>");
}
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Account Numbers: " + jqXHR.responseText);
});
}
</script>
<button onclick="getCompanies(); return false;" type="button">Get Item</button>
<hr width="50px" />
<div id="ResultsDiv"></div>
I looked at several examples on SO, but I couldn't get them to work on JS Bin or JS Fiddle.
I guess I worded my question poorly, because my original code was close to the answer.
function getMovies () {
var call = $.ajax({
url: "https://www.omdbapi.com/?i=tt3896198&apikey=[yourKeyHere]",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.success(function (data,textStatus, jqXHR){
$("#ResultsDiv").empty();
$("#ResultsDiv").append(data.Title);
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving data: " + jqXHR.responseText);
});
}
$.ajax({
url: "/userList",
type: "GET",
success: function(data){
console.log(data);
if (!data) alert("ERROR")
else{
for (let j=0;j<data.length;j++) {
user = data[j];
console.log(data[j]);
$("#userList").append("<button> <a href='javaScript:getUserProfile(" + data[j] + ")'>" + data[j] + "</button>");
}
}
} ,
dataType: "json"
});
It keeps saying data[j] is undefined whenever i try to pass it in. I have done print statements and such but I can't find the root of the issue.
Can you try this?
$.ajax({
type: "GET",
url: "/userList",
dataType: 'json',
success: function(data){
if (!data)
alert("ERROR")
else{
for (j=0;j<data.length;j++) {
var user = data[j];
console.log(user);
$("#userList").append("<button> <a href='javaScript:getUserProfile(" + user + ")'>" + user + "</button>");
}
}
}
});
Also, make sure that the url is correct. Looks like is not correct....
I am using javascript, jquery, ajax
How can i create this loading spinner? saw this on the following URL
i wrote the following code below, but i am not sure how to add code in success fucntion, they have time out function but its looks different that my code.
$('#content').html('<img id="loader-img" alt="" src="http://adrian-design.com/images/loading.gif" width="100" height="100" align="center" />');
$.ajax({
type: "POST",
url: "Checkout_Payment.aspx/ChargeCreditCard",
data: '{NameVB: "' + NameJS + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: OnFailure,
error: OnError
});
function OnSuccess(response) {
var getResponse = response.d;
if (getResponse.indexOf('success') >= 0) {
var order_ID_Array = getResponse.split("_");
var order_ID = order_ID_Array[1];
window.location.href = "Checkout_Receipt.aspx?OID=" + order_ID ;
}
}
You are almost there you just have to hide the image after the success of your ajax
$('#content').html('<img id="loader-img" alt="" src="http://adrian-design.com/images/loading.gif" width="100" height="100" align="center" />');
$.ajax({
type: "POST",
url: "Checkout_Payment.aspx/ChargeCreditCard",
data: '{NameVB: "' + NameJS + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: OnFailure,
error: OnError
});
function OnSuccess(response) {
$("#loader-img").hide(); //REMOVES THE LOADING UPON RECEIVING RESPONSE
var getResponse = response.d;
if (getResponse.indexOf('success') >= 0) {
var order_ID_Array = getResponse.split("_");
var order_ID = order_ID_Array[1];
window.location.href = "Checkout_Receipt.aspx?OID=" + order_ID ;
}
}
I have use chosen at http://harvesthq.github.io/chosen/ . Ok, i testing it load data from ajax . I founding anywhere, maybe no someone success with them.
<script src="theme/js/jQuery-2.1.3.min.js"></script>
<link href="theme/chosen_v1.4.2/chosen.css" rel="stylesheet" />
<script src="theme/chosen_v1.4.2/chosen.jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$(".cb_bu_info").chosen({
width: "95%",
source: function (data) {
$.ajax({
type: "POST",
url: "../BUS/WebService.asmx/LIST_BU",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#cb_info").html('');
//$.each($.parseJSON(data.d), function (idx, obj) {
$.each(data, function (idx, obj) {
$("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
});
//$("#cb_info").trigger("liszt:updated");
},
error: function (data) {
console.log(data.d);
}
});
}
});
$("#cb_info").trigger("liszt:updated");
});
</script>
<select id="cb_info" class="cb_bu_info"></select>
The data form ajax as
[{"BU_ID":"B01","BU_NAME":"Agro Feed","BU_DES":"Agro Feed","EDIT_DATE":"2015-05-05T00:00:00","EDIT_BY":"","FLAG":false},{"BU_ID":"B02","BU_NAME":"Agro Farm","BU_DES":"Agro Farm","EDIT_DATE":"2015-05-05T00:00:00","EDIT_BY":"","FLAG":false}]
Well , it's look ok , but when i run it , result not show in select option, see browser dev tool , I've not seen error. Anything is ok.What's the problem happen in here? Notes: only use Chosen Jquery
After checking out the Chosen docs, there seems to not be a "source" option. What you need to do is first run your Ajax call, then fill your select options. Once the select is all filled, then run Chosen on that select element.
I would use the following JS code:
var url = "../BUS/WebService.asmx/LIST_BU";
$.getJSON(url, function(json){
var $select_elem = $("#cb_info");
$select_elem.empty();
$.each(json, function (idx, obj) {
$select_elem.append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
});
$select_elem.chosen({ width: "95%" });
})
Ok, After some time with the help of suggestions from everybody, I have done
function load_cb_info() {
$.ajax({
type: "POST",
url: "../BUS/WebService.asmx/LIST_BU",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#cb_info").html('');
$.each($.parseJSON(data.d), function (idx, obj) {
//$.each(data, function (idx, obj) {
$("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
});
$("#cb_info").trigger("liszt:updated");
$("#cb_info").chosen({ width: "95%" });
},
error: function (data) {
console.log(data.d);
}
});
}
And , I think this is an answer and everyone else can find it .Thank you.
I have changed your jsfiddle. Try this out http://jsfiddle.net/GaganJaura/by4d528c/2/
I have moved the chosen() to bottom.
$("#cb_info").empty();
$.each(data, function (idx, obj) {
$("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
});
$("#cb_info").trigger("liszt:updated");
$("#cb_info").chosen();
You can try as follows it works for me
$.ajax({
type: "POST",
url: url,
data: formData,
processData: false,
contentType: false,
success:function(data){
if($.trim(data) != "no"){
$("#PROGRAM_ID").html(data);
$("#PROGRAM_ID").trigger("chosen:updated");
}
}
});
try this. it works for me. please pay attention to the bold text
Ext.Ajax.request({
url:'<?php echo base_url()."index.php/";?>ttemuan31a/cari_divisi',
method:'post',
params:{
divisi:vdivisi
},
success:function(data)
{
$("#divisi").chosen();
//document.getElementById('detail_divisi').innerHTML=response.responseText;
$('#divisi').empty();
$.each(JSON.parse(**data.responseText**), function(i, item) {
$('#divisi').append('<option value="'+item.id+'">'+item.namadivisi+'</option>');
$("#divisi").trigger("chosen:updated");
});
}
});
}
I have to use a AJAX call to get Json data after clicking next and previous buttons. Json data should contain blog content displayed after clicking next or previous. Any suggestions how my function should look like? So far I have only:
function getPrev() {
$.ajax({
type: "GET",
url: "../Content/test.txt",
dataType: "json"
}).success(function (data) {
$.each(data, function (key, val) {
$('#blogcont').append(key+ val);
});
return false;
});
}
And my Json file is only a test file:
{"one":"test1", "two":"test2", "three":"test3" }
Sorry I am a beginner!!!!
Thanks
Your $.ajax() syntax is incorrect
function getPrev() {
$.ajax({
type: "GET",
url: "../Content/test.txt",
dataType: "json",
success: function(data) {
var content = "";
$.each(data, function(key, val) {
content += "<p>" + key + ":" + val + "</p>";
});
$('#blogcont').html(content);
}
});
return false;
}
or
function getPrev() {
$.ajax({
type: "GET",
url: "../Content/test.txt",
dataType: "json"
}).done(function(data) {
var content = "";
$.each(data, function(key, val) {
content += "<p>" + key + ":" + val + "</p>";
});
$('#blogcont').html(content);
});
return false;
}
Try this
function getPrev() {
$.ajax({
type: "GET",
url: "../Content/test.txt",
dataType: "json"
}).done(function(data) {
var content = "";
$.each(data, function(key, val) {
content += '<p>' + key + ':' + val + '</p>';
});
$('#blogcont').html(content)
.find('p')
.hide()
.first().show();
$('button.next').click(function() {
$('#blogcont').find('p:visible')
.hide()
.next('p').show();
});
});
return false;
}
How about storing the JSON data as a variable, which you can then access using an index on click?
var jsonData;
$.ajax({
type: "GET",
url: "../Content/test.txt",
dataType: "json",
success: function (data) {
jsonData= data;
}
});
var clickIndex = 0;
$('.prev').click(function() {
if(clickIndex > 0) {
clickIndex -= 1;
}
get(clickIndex);
});
$('.next').click(function() {
clickIndex++;
get(clickIndex);
});
Your get function would then accept the index and find the JSON property:
function get(i) {
var item = jsonData[i];
}
Note that you would need to add an if statement to check whether you have reached the index limit on click of .next. Also, this is fine for a test JSON file, but a better solution would be to be able to request just one relevant item from a web service returning the JSON.