Summery: I have to get several data from a service(hosted on multiple servers) using C# and finally display them to the user/s, all on one page, using ajax call. Consider that the final display formats contains charts and progresses that have created by Jquery and styled by CSS.
Some Code:
// Once Called Here and Timer Will Go On
UpdateDataA();
function UpdateDataA() {
$.ajax({
type: "POST",
async: true,
url: "Default.aspx/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var $s = $(".second");
$s.val(r.d[0]).trigger("change");
updateProgressA(r.d[1]);
updateProgressB(r.d[2]);
updateNetworkData(bytesToSize(r.d[5], 2), bytesToSize(r.d[6], 2));
},
error: function (msg) {
alert(msg.error);
}
});
setTimeout(function () { UpdateDataA(); }, 1000);//Timer
}
Consider more calls like this.
Problem: Timer intervals doesn't update at intervals have set. One element updates correct then waits for others to complete while it shouldn't. But I need to update all continuously together. In this way, if one call crash, Others will be die.
Question: What can I do or What are my faults?
Note: I'm new to jquery and ajax.
Thank You previously
Neglect my comment about interval. I think u will need to keep track of your timers :
timerA = setTimeout(function () { UpdateDataA(); }, 1000);
and clear the in the update function till task is complete
var timerA;
// Once Called Here and Timer Will Go On
UpdateDataA();
function UpdateDataA() {
clearTimeout(timerA);
$.ajax({
type: "POST",
async: true,
url: "Default.aspx/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var $s = $(".second");
$s.val(r.d[0]).trigger("change");
updateProgressA(r.d[1]);
updateProgressB(r.d[2]);
updateNetworkData(bytesToSize(r.d[5], 2), bytesToSize(r.d[6], 2));
timerA = setTimeout(function () { UpdateDataA(); }, 1000);//Restart time after task is complete
},
error: function (msg) {
alert(msg.error);
}
});
}
Related
I want to call an ASP.NET function from jQuery by AJAX with response.
I have file Controll.aspx where is included javascript code. Next I have /Services/ControllService.asmx, where is the function, which I want call from js.
js code:
$(document).ready(function () {
$('#btn_start').on('click', function () {
$.ajax({
type: "POST",
url: "Services/ControllService.asmx/Start",
data: {},
dataType: "json",
async: true,
contentType: "application/json; charset=utf-8",
success: function (response) {
console.log(response);
},
error: function (err) {
alert("Error:" + err.toString());
}
});
});
});
But I still getting the error 500.
POST http://localhost:56000/Services/ControllService.asmx/Start 500 (Internal Server Error)
k.cors.a.crossDomain.send
n.extend.ajax
Do you have any hints, what do I need to set e.g. in Web.config?
Many thanks.
SOLVED:
1 - I have defined Start function in ControllService.asmx.cs as static.
2 - I have badly configured data. It has to be named by the same way e.g. "sth".
In javascript it should be:
...
url: "Services/ControllService.asmx/Start",
data: JSON.stringify({ sth: "hahaha" }),
dataType: "json",
...
and in ControllService.asmx.cs -> method Start
public string Start(string sth){}
Many, many thanks for your hints.
I have been able to call WCF methods with .ajax. How do I call a method that returns a value? I need to call this method to see if data is ready and if not wait one second. The WCF method is:
[OperationContract]
[WebGet]
public bool IsDataReady(string requestGUID)
{
if (Global.publicDataDictionary.Keys.Contains(requestGUID))
return true;
else return false;
}
My JavaScript so far is:
$(document).ready(function() {
var input = {requestGUID:"<%=guid %>"};
console.log(input);
$.ajax({
url: "http://www.blah.com/services/TestsService.svc/IsDataReady",
type: "GET",
contentType: "application/json; charset=utf-8",
data: input,
dataType: "json",
success: function(data) {
}
});
EDIT2: I broke out the 2nd ajax call into a method but my logging is showing that the call to 2nd web service never passes a requestGUID. Can't i use the same input variable?
var guid = "<%= this.guid%>";
// var input = '{"SbiId":"' + guid + '"}';
// var input = {requestGUID:"ca222cf7-be5e-431a-ab93-9a31e8ae2f4a"};
function callUpdateGrid(input) {
console.log(input);
$.ajax({
url: "http://www.blah.com/services/TestsService.svc/GetContactsDataAndCountbyGUID",
type: "GET",
contentType: "application/json; charset=utf-8",
data: input,
dataType: "json",
success: function (data) {
var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
console.log(data);
mtv.set_dataSource(data.d.Data);
mtv.dataBind();
}
});
}
function CallIsDataReady(input) {
$.ajax({
url: "http://www.blah.com/services/TestsService.svc/IsDataReady",
type: "GET",
contentType: "application/json; charset=utf-8",
data: input,
dataType: "json",
success: function (data) {
if (!data) {
setTimeout(function (inputInner) { CallIsDataReady(inputInner); }, 1000);
}
else {
//Continue as data is ready
callUpdateGrid(input);
}
}
});
}
$(document).ready(function () {
var input = { requestGUID: "<%=guid %>" };
CallIsDataReady(input);
});
EDIT2: I broke out the 2nd ajax call into a method but my logging is showing that the call to 2nd web service is never getting called:
url: "http://www.blah.com/services/TestsService.svc/GetContactsDataAndCountbyGUID",
else {
//Continue as data is ready
callUpdateGrid(input);
}
The return value will be contained in the data parameter passed to the success callback setup in your ajax call.
You will need to check the value here, then if false, setup a timeout, which on expiry will attempt the ajax call again.
It would be best IMO to wrap up the Ajax call inside a function, that you can call in a recursive fashion when the timeout has expired. e.g.
function CallIsDataReady(input){
$.ajax({
url: "http://www.blah.com/services/TestsService.svc/IsDataReady",
type: "GET",
contentType: "application/json; charset=utf-8",
data: input,
dataType: "json",
success: function(data) {
if (!data){
setTimeout(function(){CallIsDataReady(input);}, 1000);
}
else{
//Continue as data is ready
}
}
});
}
$(document).ready(function() {
var input = {requestGUID:"<%=guid %>"};
console.log(input);
CallIsDataReady(input);
});
When you view source on this page is:
var input = {requestGUID:"<%=guid %>"};
showing correctly in the javascript? If you put a breakpoint in your IsDataReady method, do you see if requestGUID has a value? Is your service on the same domain as the page calling it?
EDIT:
In your service change: [WebGet]
to:
[WebGet(
RequestFormat=WebMessageFormat.Json,
ResponseFormat=WebMessageFormat.Json]
Read up on RESTful web services:
http://www.codeproject.com/Articles/105273/Create-RESTful-WCF-Service-API-Step-By-Step-Guide
I have a page that calls JSON API. It shows a loading image while processing. I need to check if it is more than 5 minutes running, then show an alert message. Can't find on Google. Thank you!
ADDED my code:
function SeeMyCoupon(list, func) {
CallLoadingPopup(true);
$.ajax({
url: "https://www.test.com/api/SeeMyCode.ashx",
global: false,
type: "POST",
data: list,
dataType: "json",
cache: false,
async: false,
success: function (data) {
if (func) {
func(data);
CallLoadingPopup(false);
}
}
});
}
You could try using the timeout property:
function SeeMyCoupon(list, func) {
CallLoadingPopup(true);
$.ajax({
url: "https://www.test.com/api/SeeMyCode.ashx",
global: false,
type: "POST",
data: list,
dataType: "json",
cache: false,
async: false,
timeout: 300000,
success: function (data) {
if (func) {
func(data);
CallLoadingPopup(false);
}
},
error: function(jqXHR, textStatus, errorThrown) {
if(textStatus === "timeout") {
alert('The operation took more than 5 minutes');
}
});
}
Also please note that setting async: false is a very bad design. This is not AJAX. You are blocking the client browser during the entire execution of the request. AJAX is meant to be asynchronous.
I am doing jquery ajax call in asp.net, I am getting some value from database in a textbox and on base of it I am making jquery progressbar.
Its getting value in textbox, but its not taking value of progress bar first time, I have to reload the page for value of progress bar.
Below is my code
$(function () {
GetValue();
var l_count= parseInt($("#txtcount").val());
$("#sliderlicense").progressbar({
max: 100,
value: l_count
});
});
function GetValue() {
$.ajax({
type: "POST",
url: "MyPage.aspx/GetCount", //url to point your webmethod
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (Result) {
$("#txtcount").val(Result.d);
},
error: function () { alert('error'); }
});
}
[System.Web.Services.WebMethod()]
public static string GetCount()
{
//Get values from DB and return it
}
I also tried with document.ready but no luck, Which event of Jquery should I use to make my progress bar on first time.
try this:
async:false, add to ajax call
$(document).ready(function(){
GetValue();
var l_count= parseInt($("#txtcount").val());
$("#sliderlicense").progressbar({
max: 100,
value: l_count
});
});
})
function GetValue() {
$.ajax({
type: "POST",
url: "MyPage.aspx/GetCount", //url to point your webmethod
contentType: "application/json; charset=utf-8",
dataType: "json",
async:false,
success: function (Result) {
$("#txtcount").val(Result.d);
},
error: function () { alert('error'); }
});
}
ajax means Asynchronous, that said, means that you need wait untill your first request suceed, and after pocess with value.
Some pseudocode:
$.ajax({
type: "POST",
url: "MyPage.aspx/GetCount", //url to point your webmethod
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (Result) {
$("#txtcount").val(Result.d);
//HERE ASSIGN TO PROGRESS BAR
var l_count= parseInt($("#txtcount").val());
$("#sliderlicense").progressbar({
max: 100,
value: l_count
});
// --------------------------
},
error: function () { alert('error'); }
});
I have a dialog in an ASP.Net,c# application.This dialog has a textbox.When I choose save I want to call a function from C# who makes some verifications in the database and then to get the result in javascript/jquery.If the inserted value is true I want to close the dialog other way to remain opened,but I can't succed to close the dialog box after i receive true from c# function.Below is the code:
ascx :
<div id="popup" title="Choose Delegate">
<label>Delegate<label><input type="textbox" value="" name="inputD" id=="inputD"/>
</div>
Javascript:
$('#btnAdd').click(function(e){
$('#divPopup').slow("show");
$('#divPopup').dialog({
height:150,
width:300,
modal:true,
buttons:{
"close":function(){$(this).dialog("close");}
"save":function(){
var obj=document.getElementid("inputD");
$.ajax({
type: "POST",
url: "add.aspx/check",
data: "{delegate: '" + obj.Value+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
rez= "OK";
$(this).dialog("close");
},
failure: function () {alert("FAIL"); }}); }
});
}
C#:
[WebMethode]
public static Boolean check(string delegate)
{
.....
return true;
}
C# methode returns corect value.
I try also this :
$('#btnAdd').click(function(e){
$('#divPopup').slow("show");
$('#divPopup').dialog({
height:150,
width:300,
modal:true,
buttons:{
"close":function(){$(this).dialog("close");}
"save":function(){
var obj=document.getElementid("inputD");
var rez ;
$.ajax({
type: "POST",
url: "add.aspx/check",
data: "{delegate: '" + obj.Value+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
rez= "OK";
},
failure: function () {alert("FAIL"); }
});
if (rez="OK")
$(this).dialog("close");
}
});
But it doesn't see the rez value in this case.
Thanks !
You can use an Ajax Call in your "save":function(e) and just check the returned value if true close dialog, else remain opened
Ajax calls are really simple to implement, I let you search that :)
You need a web-service on the server side. (preferably REST)
http://restsharp.org/ is an easy to use library for that.
Take a look at this question for more info.
In the front end you make an ajax call to you're REST api (I see you use jquery so it won't be that hard ;))