Develop Reference

Calling a javascript function from a global file and return it to append to html

I have a global javascript file 'Global.js' with a Global Handler 'GlobalHandler.ashx',
what i am trying to do is to render some data in the back-end (inside the handler ), than return text data using context.Response.Write(MyString)
The question is how to append the data to my html element .
I looked into the response (200) and the data is there , but i don't know the reason of not appending my text into the html element
I have tried to append them like the classic way success:function(data){
$(elementID).html(data);}
But that doesnt work
Here In Global.js
function GetProfession(elementID) {
$.ajax({
url: "/Handlers/GlobalHandler.ashx",
dataType: "JSON",
contentType: "application/json;charset=utf-8",
//responseType: ResponseType,
data: {
functionName: "GetProfession"
},
success: function (data) {
return $("#" + elementID).html(data);
}
});
}
Here In MyPage.aspx
$(document).ready(function () {
GetProfession("Profession");
});
HERE In the Handler
string functionName = context.Request["functionName"];
GroupDAO GroupDAO = new GroupDAO();
if (functionName.Equals("GetProfession"))
{
var ListOfGroups = GroupDAO.GetGroups();
string Builder = "";
foreach (var group in ListOfGroups)
{
Builder+="<option value='" + group.GroupID + "'>" + group.GroupName + "</option>";
}
context.Response.Write(Builder);
}
I am expecting to have those options appended to the html element 'Profession'
but this unfortunately it does not happening

I found the answer , i did not recognize the logical reason of such behaviour ,
but the data was not in the success method even if the statuc code was 200 .
in fact it was in the error: properties of ajax request .
what i have done is :
instead of appending the data in success to the html element .
i did it in the response text
.
Here is the code before not working :
function GetProfession(elementID) {
$.ajax({
url: "/Handlers/GlobalHandler.ashx",
dataType: "JSON",
contentType: "application/json;charset=utf-8",
//responseType: ResponseType,
data: {
functionName: "GetProfession"
},
success: function (data) {
return $("#" + elementID).html(data);
}
});
}
Here is the one that works
function GetProfession(elementID) {
$.ajax({
url: "/Handlers/GlobalHandler.ashx",
dataType: "JSON",
contentType: "text/html; charset=utf-8",
//responseType: ResponseType,
data: {
functionName: "GetProfession"
},
success: function (data, fata, meta) {
},
error: function (err) {
$("#Profession").html(err.responseText);
//alert(err.responseText);
}
});
}

Free Code Camp: TWITCH TV API: Trying to move everything from getJSONs to AJAX requests

So here's my codepen:
http://codepen.io/muzzotech/pen/mAodAv
Twitch's API now requires Client ID tokens so I had to change all of my getJSON's over to AJAX requests, but it isn't working. None of the followers are appearing below the headers of the html. When I run javascript console, I get two kinds of errors. The first is that https://api.twitch.tv/kraken/streams/+ following[i] + "/?callback=?"gives me a 400 Bad Request (It also does if I remove the slash so that it reads "?callback=?") and I get the "pen.js:77 Uncaught ReferenceError: data3 is not defined" where it tries to use "data3._links.channel" as the URL. I'm rather new to all of this so I would love some direction with this.
Also, there was a section that originally had a $.getJSON.done part but I don't know how to put that into AJAX.

Substituting $.when.apply(), $.map() for for loops. Note, no .error property is set at any of the returned objects. Set contentType to "json" at $.ajaxSetup(), set dataType to "json" at $.ajax() requests.
$(document).ready(function() {
var following = [];
var logo;
var status;
var name;
function follower(logo, name, status) {
$("#followerInfo").prepend("<div class = 'row'>" + "<div class='col-md-4>" + "<img src='" + logo + "'>" + "</div>" + "<div class='col-md-4>" + name + "</div>" + "<div class='col-md-4>" + status + "</div></div>");
}
$.ajaxSetup({
contentType: "json"
})
$.ajax({
type: "GET",
dataType:"json",
url: "https://api.twitch.tv/kraken/streams/freecodecamp",
headers: {
'Client-ID': 'rp0e2c4y3nqc392dgwehvbhg0cs5r8c'
},
success: function(data1) {
console.log(data1);
if (data1.stream === null) {
$("#fccStatus").html("Free Code Camp is Currently OFFLINE");
} else {
$("#fccStatus").html("Free Code Camp is Currently ONLINE");
}
}
});
$.ajax({
type: "GET",
dataType:"json",
url: "https://api.twitch.tv/kraken/users/freecodecamp/follows/channels/",
headers: {
'Client-ID': 'rp0e2c4y3nqc392dgwehvbhg0cs5r8c'
},
success: function(data2) {
console.log(data2);
for (var i = 0; i < data2.follows.length; i++) {
var displayName = data2.follows[i].channel.display_name;
following.push(displayName);
}
$.when.apply($, $.map(following, function(_following) {
return $.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/streams/" + _following /* + "?callback=?" */,
headers: {
'Client-ID': 'rp0e2c4y3nqc392dgwehvbhg0cs5r8c'
},
success: function(data3) {
if (data3.error) {
logo = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Thomas_Organ_Crybaby.jpg/180px-Thomas_Organ_Crybaby.jpg";
name = data3.message;
status = data3.error;
follower(log, name, status);
}
if (data3.stream === null) {
$.ajax({
type: "GET",
dataType:"json",
url: data3._links.channel,
headers: {
'Client-ID': 'rp0e2c4y3nqc392dgwehvbhg0cs5r8c'
},
success: function(data4) {
if (data4.error) {
status = "OFFLINE";
logo = data4.logo;
name = data4.display_name;
if (logo === null) {
logo = "http://images.allposters.com/images/ATA/24802BP.jpg";
}
follower(logo, name, status);
}
}
});
}
}
});
}));
$.when.apply($, $.map(following, function(_following) {
return $.ajax({
type: "GET",
dataType:"json",
url: "https://api.twitch.tv/kraken/streams/" + _following,
headers: {
'Client-ID': 'rp0e2c4y3nqc392dgwehvbhg0cs5r8c'
},
success: function(data5) {
console.log(data5);
if (data5.error) {
logo = data4.stream.channel.logo;
status = data4.stream.channel.status;
name = data4.stream.channel.display_name;
follower(logo, name, status);
}
}
});
}));
}
});
});
plnkr http://plnkr.co/edit/NXYRweuIdv6sQrUnqkWX?p=preview

Fill Variable with Web Service Results

I have a javascript function that is executed onClick via jquery. Within this function I am calling a Web Service "getTestConnection" which returns a True or False and I have confirmed it is working but keeps returning variable undefined.
$("#btnNext2").click(function() {
var postData = {}; {
postData['user'] = user;
postData['password'] = password;
postData['serviceurl'] = serviceurl;
postData['datasource'] = datasource;
};
//Converts object to string and formats to JSON
var json = JSON.stringify(postData);
//connTest keeps getting returned as 'Undefined'
var connTest = getTestConnection(json);
});
< script type = "text/javascript" >
function getDocType(json, rowcount) {
$.ajax({
type: "POST",
url: "http://localhost:64580/Web_Services/WebServiceLibrary.asmx/GetDocTypes",
data: json,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//*****************************************************************************
//This is being called immediately after getTestConnection is executed
//******************************************************************************
for (i = 0; i < data.d.length; i++) {
$('#SelectDocType' + rowcount + '')
.append($("<option></option>")
.attr("value", data.d[i].docTypeID)
.text(data.d[i].docTypeName));
}
var firstDocTypeID = data.d[0].docTypeID;
var jsonUnstringify = JSON.parse(json);
var postDataNew = {}; {
postDataNew['user'] = jsonUnstringify.user;
postDataNew['password'] = jsonUnstringify.password;
postDataNew['serviceurl'] = jsonUnstringify.serviceurl;
postDataNew['datasource'] = jsonUnstringify.datasource;
postDataNew['docTypeID'] = firstDocTypeID;
};
var jsonnew = JSON.stringify(postDataNew);
getKeywords(jsonnew, rowcount);
},
error: function(data) {
alert("***********Error***********" + data.responseText);
},
failure: function(data) {
alert("***********Failure***********" + data.responseText);
}
});
//Test Connection Web Service
function getTestConnection(json) {
$.ajax({
type: "POST",
url: "http://localhost:64580/Web_Services/WebServiceLibrary.asmx/TestConnection",
data: json,
contentType: "application/json; charset=utf-8",
dataType: "json",
if (data.d == 'True') {
return true;
} else {
return false;
}
},
error: function(data) {
alert("***********Error***********" + data.responseText);
},
failure: function(data) {
alert("***********Failure***********" + data.responseText);
}
});
}
< /script>

You have multiples errors:
You have a <script type = "text/javascript"> tag inside another <script> tag
You define a new function inside another function:
function getDocType(json, rowcount) {
$.ajax({
.....
});
function getTestConnection(json) {
....
}
}
which should be
function getDocType(json, rowcount) {
$.ajax({
.....
});
}
function getTestConnection(json) {
....
}
You forgot to get returned data from the AJAX call in your getTestConnection function :
$.ajax({
type: "POST",
url: "http://localhost...",
data: json,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
if (data.d == 'True') {
return true;
} else {
return false;
}
},
error: function(data) {
....
}
});

How to load data in breaks from Ajax call?

Guys I have an ajax call on my page, which is being called on scroll down event (lazy loading).
This is the whole call :
function callMoreData()
{ $.ajax( {
type: "GET",
url: "/api/values/getnotice",
dataType: "json",
crossDomain: true,
async: true,
cache: false,
success: function (data) {
updateData(data);
},
error: function (x, e) {
alert('problem while fetching records!');
} });}
function updateData(data) {
updateData = function (data) { };
$.each(data, function (index, value) {
BindNotice(value);
});
}
function BindNotice(values)
{
...appending some div here with values...
}
now this call is returning all the data and display it all at once on first scroll event. What I want to do is, load the data in sets of two. For example, each loop gets executed on index 0 and 1 at first scroll, then on second scroll index 2 and 3 gets processed and then so on. How would I do about doing as? I have a very limited experience with JS/AJAX...
EDIT : CODE FROM CUSTOM LIBRARY :
$(".mainwrap .innnerwrap").mCustomScrollbar({
autoDraggerLength:true,
autoHideScrollbar:true,
scrollInertia:100,
advanced:{
updateOnBrowserResize: true,
updateOnContentResize: true,
autoScrollOnFocus: false
},
callbacks:{
whileScrolling:function(){WhileScrolling();},
onTotalScroll: function () {
callMoreData();
}
}
});
WebApi CODE :
[WebMethod]
[HttpGet]
public List<Notice> GetNotice()
{
string con = ConfigurationManager.ConnectionStrings["conn"].ConnectionString;
SqlConnection Connection = new SqlConnection(con);
string Query = "uSP_GetAllNotice";
SqlCommand cmd = new SqlCommand(Query, Connection);
cmd.CommandType = CommandType.StoredProcedure;
DataTable dt = new DataTable();
Connection.Open();
dt.Load(cmd.ExecuteReader());
Connection.Close();
List<Notice> objNoticeList = new List<Notice>();
foreach (DataRow row in dt.Rows)
{
Notice objNotice = new Notice();
objNotice.Subject = row["subject"].ToString();
objNotice.Date = Convert.ToDateTime(row["IssueDate"]);
objNotice.Department = row["Department"].ToString();
objNotice.Body = row["Body"].ToString();
objNotice.NoticeImage = row["NoticeImage"].ToString();
objNotice.Icon = row["Icon"].ToString();
objNoticeList.Add(objNotice);
}
return objNoticeList;
}

First of all, you have to make sure the server-side delivers only as mutch elements as you like, so that would be something like
[...]
type: "GET",
url: "/api/values/getnotice/" + start + '/' + amount,
dataType: "json",
[...]
start and amount have to be defined outside the function, in a higher scope, so it's available by the ajax function. While amount will be more or less constant, start can be calculated.
One option would be, to increment it on the success function.
Another solution can be, to count the divs you already appended to your DOM.
The result could be something like:
var amount = 2;
var start = 0;
function callMoreData(){
$.ajax( {
type: "GET",
url: "/api/values/getnotice/" + start + '/' + amount,
dataType: "json",
crossDomain: true,
async: true,
cache: false,
success: function (data) {
updateData(data);
start += amount;
},
error: function (x, e) {
alert('problem while fetching records!');
}
});
}
I recommend NOT to put it in the global namespace, but to put it in a own one.

Maybe you can use paging parameters to get your data in chunks of two items at a time. Let the server handle the work of figuring out how to break the response data into two items per page.
$.ajax({
type: "POST",
url: "/api/values/getnotice",
data: {
'PageSize': pageSize,
'Page': page
},
type: "GET",
dataType: "json",
crossDomain: true,
async: true,
cache: false,
success: function (data) {
updateData(data);
},
error: function (x, e) {
alert('problem while fetching records!');
}
});

Make a global variable such as
Var time_scrolled = 0; //in the beginning
when you receive scrolldown event your indexes at each request will be (time_scrolled*2) and (time_scrolled*2+1) then you increase time_scrolled by 1 as time_scrolled++;
Hope this will solve your problem.
Edited:
complete code
Var times_scrolled = 0; //in the beginning
Var global_data = [];
function callMoreData()
{ $.ajax( {
type: "GET",
url: "/api/values/getnotice",
dataType: "json",
crossDomain: true,
async: true,
cache: false,
success: function (data) {
global_data = data;
},
error: function (x, e) {
alert('problem while fetching records!');
} });}
callMoreData(); //fetch data at the time of loading since it won't miss at first scroll
function updateData(){
var initial = times_scrolled*2;
var final = initial+1;
for(var i=initial;i<data.length && i<=final;i++)
{
BindNotice(global_data[i]);
}
times_scrolled++;
}
function BindNotice(values)
{
...appending some div here with values...
}
// modify custom library code to:
$(".mainwrap .innnerwrap").mCustomScrollbar({
autoDraggerLength:true,
autoHideScrollbar:true,
scrollInertia:100,
advanced:{
updateOnBrowserResize: true,
updateOnContentResize: true,
autoScrollOnFocus: false
},
callbacks:{
whileScrolling:function(){WhileScrolling();},
onTotalScroll: function () {
updateData();
}
}
});

This is what I did to solve my problem. This is my ajax call
function callMoreData() {
var RoleCodes = $('#hiddenRoleCode').val();
$.ajax(
{
type: "GET",
url: "/api/alert/getalerts?RoleCode=" + RoleCodes + "&LastAlertDate=" + formattedDate,
dataType: "json",
crossDomain: true,
async: true,
cache: false,
success: function(data) {
$.each(data.data, function (index, value) {
update();
BindAlert(value);
});
},
error: function(x, e) {
alert('There seems to be some problem while fetching records!');
}
}
);
}

jQuery $.ajax(), pass success data into separate function

I am using the jQuery $.ajax() function. I have put this into a parent function, which passes some values into the ajax function. What I would like to do, is have a user defined callback function, which gets the data param passed in from the ajax success function.
Here is what I was thinking would work, but it is not:
testFunc = function(str, callback) {
// Send our params
var data = 'some data to send';
$.ajax({
type: 'POST',
url: 'http://www.myurl.com',
data: data,
success: callback
});
}
Then I want to be able to call that function, and pass in my custom function so that I can use the success functions data from inside that function:
testFunc('my string data', function(data){
alert(data);
});
I am wanting this to be the same as:
testFunc = function(str, callback) {
// Send our params
var data = 'some data to send';
$.ajax({
type: 'POST',
url: 'http://www.myurl.com',
data: data,
success: function(data) {
alert(data);
}
});
}

Works fine for me:
<script src="/jquery.js"></script>
<script>
var callback = function(data, textStatus, xhr)
{
alert(data + "\t" + textStatus);
}
var test = function(str, cb) {
var data = 'Input values';
$.ajax({
type: 'post',
url: 'http://www.mydomain.com/ajaxscript',
data: data,
success: cb
});
}
test('Hello, world', callback);
</script>

You can use this keyword to access custom data, passed to $.ajax() function:
$.ajax({
// ... // --> put ajax configuration parameters here
yourCustomData: {param1: 'any value', time: '1h24'}, // put your custom key/value pair here
success: successHandler
});
function successHandler(data, textStatus, jqXHR) {
alert(this.yourCustomData.param1); // shows "any value"
console.log(this.yourCustomData.time);
}

this is how I do it
function run_ajax(obj) {
$.ajax({
type:"POST",
url: prefix,
data: obj.pdata,
dataType: 'json',
error: function(data) {
//do error stuff
},
success: function(data) {
if(obj.func){
obj.func(data);
}
}
});
}
alert_func(data){
//do what you want with data
}
var obj= {};
obj.pdata = {sumbit:"somevalue"}; // post variable data
obj.func = alert_func;
run_ajax(obj);

In the first code block, you're never using the str parameter. Did you mean to say the following?
testFunc = function(str, callback) {
$.ajax({
type: 'POST',
url: 'http://www.myurl.com',
data: str,
success: callback
});
}

I believe your problem is that you are passing testFunct a string, and not a function object, (is that even possible?)

Although I am not 100% sure what you want (probably my brain is slow today), here is an example of a similar use to what you describe:
function GetProcedureById(procedureId)
{
var includeMaster = true;
pString = '{"procedureId":"' + procedureId.toString() + '","includeMaster":"' + includeMaster.toString() + '"}';
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
data: pString,
datatype: "json",
dataFilter: function(data)
{
var msg;
if (typeof (JSON) !== 'undefined' &&
typeof (JSON.parse) === 'function')
msg = JSON.parse(data);
else
msg = eval('(' + data + ')');
if (msg.hasOwnProperty('d'))
return msg.d;
else
return msg;
},
url: "webservice/ProcedureCodesService.asmx/GetProcedureById",
success: function(msg)
{
LoadProcedure(msg);
},
failure: function(msg)
{
// $("#sometextplace").text("Procedure did not load");
}
});
};
/* build the Procedure option list */
function LoadProcedure(jdata)
{
if (jdata.length < 10)
{
$("select#cptIcdProcedureSelect").attr('size', jdata.length);
}
else
{
$("select#cptIcdProcedureSelect").attr('size', '10');
};
var options = '';
for (var i = 0; i < jdata.length; i++)
{
options += '<option value="' + jdata[i].Description + '">' + jdata[i].Description + ' (' + jdata[i].ProcedureCode + ')' + '</option>';
};
$("select#cptIcdProcedureSelect").html(options);
};