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 ;
}
}
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);
});
}
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
I want to display data function name and function description from database and display it in div which will be created dynamically using jquery. How can I display data with dynamic div using jquery...
code for dynamically created div is:
$(document).ready(function () {
$.ajax({
type: "POST",
url: 'FunctionListing.aspx/CountFunction',
data: "{}",
contentType: 'application/json; charset=utf-8',
datatype: 'json',
success: function (result) {
//alert(result.d);
for (var i = 1; i <= result.d; i++) {
$('body').append("<div id='div" + i + "' />");
}
},
error: function (result) {
alert(result);
}
});
});
dataType :"json"
Not datatype :"json"
Hope, it'll helps you.
I'm doing cross-domain requests and once the first request is made I need to retrieve the ID (and do some other stuff) and then use the ID for the next request.
So far the hang-up is that the next request doesn't like the concatenation. Here's my code, and yes I know document.write should be changed to console.log() however console.log doesn't work and I was probably going to ask that question after get help with my current problem. the problem starts at the second .ajax() request.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script >
$(document).ready(function($) {
// First link out of three
var url = 'https://www.sciencebase.gov/catalo
/items?parentId=504108e5e4b07a90c5ec62d4&max=60&offset=0&format=jsonp';
$.ajax({
type: 'GET',
url: url,
jsonpCallback: 'getSBJSON',
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
for (var i = 36; i < 37; i++) {
document.write(json.items[i].id);
var urlId = json.items[i].id;
}
var deferUrl = 'https://www.sciencebase.gov/catalog/itemLink/" + urlId
+"?format=json&max=10';
$.ajax({
type: 'GET',
url: deferUrl,
jsonpCallback: 'getSBJSON',
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
// Get the next id to use for the next url
document.write(deferUrl);
$.ajax({
type: 'GET',
url: 'https://www.sciencebase.gov/catalog
/item/4f4e4b19e4b07f02db6a7f04?format=jsonp',
jsonpCallback: 'getSBJSON',
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
document.write(json.title);
},
error: function(e) {
console.log(e.message);
}
});
},
error: function(e) {
console.log(e.message);
}
});
},
error: function(e) {
console.log(e.message);
}
});
});
</script>
</head>
<body>
</body>
</html>
Thanks for the help
'https://www.sciencebase.gov/catalog/itemLink/" + urlId
+"?format=json&max=10';
should be
'https://www.sciencebase.gov/catalog/itemLink/' + urlId
+'?format=json&max=10';
You mix simples and doubles quotes. use 'srting' + var + 'string' or "string" + var + "string" but don't mix them
To address your concatenation issue only.. you have a mix of single and double quotes there. They should all be consistent.
ex:
var deferUrl = 'https://www.sciencebase.gov/catalog/itemLink/' + urlId + '?format=json&max=10';
I made a slight change from
for (var i = 36; i < 37; i++) {
var urlId = json.items[i].id;
}
var deferUrl = 'https://www.sciencebase.gov/catalog/itemLink/' +
urlId + '?format=jsonp&max=10';
$.ajax({
type: 'GET',
url: deferUrl,
jsonpCallback: 'getSBJSON',
contentType: 'application/json',
dataType: 'jsonp',
to
for (var i = 36; i < 37; i++) {
var urlId = json.items[i].id;
}
var deferUrl = urlId;
$.ajax({
type: 'GET',
url: 'https://www.sciencebase.gov/catalog/itemLink/' +
deferUrl + '?format=jsonp&max=10',
jsonpCallback: 'getSBJSON',
contentType: 'application/json',
dataType: 'jsonp',
and that seemed to do the trick. It didn't like having the concatenation done completely before assigning it to the url.
I'm removing certain records using a webservice. The jquery ajax request is written in the onclick of a hyperlink. When im executing the script, line by line using firebug, it's getting removed otherwise it's not. Does any one meet any situation like this before? Please help
Code sample:
$(".target").click(function() {
func(); //This function should be executed completely before navigating to another page
});
var func = function() {
var items = $("#flag").find('td input.itemClass');
id = items[0].value;
var status = items[1].value;
var type = items[2].value;
var params = '{' +
'ID:"' + id + '" ,Type:"' + type + '" ,Status:"' + status + '"}';
$.ajax({
type: "POST",
url: "WebMethodService.asmx/DeleteItem",
data: params,
//contentType: "plain/text",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#deleteNotificationMessage").val("Item has been removed"); // keep a separate label to display this message
}
//Event that'll be fired on Success
});
}
jQuery ajax functions return deferred objects, thus we return $.ajax. Then you should use deferred.done to execute the callback when the AJAX is fully finished. When the AJAX is done, navigate away using JS instead:
var func = function() {
...
return $.ajax({...}); //return our ajax deferred
}
$(".target").click(function() {
var target = this; //preserve "this" since this in the callback may be different
func().done(function(){ //our done callback executed when ajax is done
window.location.href = target.href; //assuming .target is a link
});
return false; //prevent the natural click action
});
You can use the async: false on the ajax call that is wait there to complete the call.
var func = function() {
var items = $("#flag").find('td input.itemClass');
id = items[0].value;
var status = items[1].value;
var type = items[2].value;
var params = '{' +
'ID:"' + id + '" ,Type:"' + type + '" ,Status:"' + status + '"}';
$.ajax({
type: "POST",
async: false,
url: "WebMethodService.asmx/DeleteItem",
data: params,
//contentType: "plain/text",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#deleteNotificationMessage").val("Item has been removed"); // keep a separate label to display this message
}
//Event that'll be fired on Success
});
}
Alternative you can make the submit after the request.
$(".target").click(function() {
func(); //This function should be executed completely before navigating to another page
return false;
});
var func = function() {
var items = $("#flag").find('td input.itemClass');
id = items[0].value;
var status = items[1].value;
var type = items[2].value;
var params = '{' +
'ID:"' + id + '" ,Type:"' + type + '" ,Status:"' + status + '"}';
$.ajax({
type: "POST",
async: true,
url: "WebMethodService.asmx/DeleteItem",
data: params,
//contentType: "plain/text",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#deleteNotificationMessage").val("Item has been removed"); // keep a separate label to display this message
$("#YourFormID").submit();
}
//Event that'll be fired on Success
});
}
Simply move the Event to the "success" handler in your ajax request:
$.ajax({
type: "POST",
url: "WebMethodService.asmx/DeleteItem",
data: params,
//contentType: "plain/text",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#deleteNotificationMessage").val("Item has been removed");
//Event that'll be fired on Success
}
});
Alternatively use jQuery ajax callback methods.