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

Assign function to value in Javascript

Good Day,
I try to assign to a variable the result of an Ajax request. I tried both of the requests below, with no result (got an "Undefined" answer).
I don't understand the difference between:
var temp = obj.method(me, you);
and
var temp = (function () {
obj.method(me, you);
})();
Here is the AJAX request:
ObjID.prototype.getAjx = function(one, you){
$.ajax({
type: "post",
url: "./php/getAJX.php",
dataType: 'json',
context: this,
data: { one: one, two: two },
success: function(data) {
this.myProperty = data[0][0];
},
error:function(request, status, error) {
console.log("Something went wrong." + request.responseText + status + error);
}
});
}
Is this the same, or not ?
Thanks for your help! :)

The first two bits of code you showed effectively do the same thing.
However, neither of them do what you think they do. Neither of them are assigning the return value from your AJAX call anywhere:
The first line of your code:
ObjID.prototype.getAjx = function(one, you){
is simply assigning the function that contains the actual AJAX call to the .getAjx property of the ObjID.prototype. That function doesn't contain any return statements and upon execution, will not return anything. That is why you are getting undefined.
The code that actually performs the AJAX call is:
$.ajax({
type: "post",
url: "./php/getAJX.php",
dataType: 'json',
context: this,
data: { one: one, two: two },
success: function(data) {
this.myProperty = data[0][0];
},
error:function(request, status, error) {
console.log("Something went wrong." + request.responseText + status + error);
}
});
and, you aren't assigning that return value to anything. If you wanted to, you'd need to write something like this:
var result = $.ajax({
type: "post",
url: "./php/getAJX.php",
dataType: 'json',
context: this,
data: { one: one, two: two },
success: function(data) {
this.myProperty = data[0][0];
},
error:function(request, status, error) {
console.log("Something went wrong." + request.responseText + status + error);
}
});
JQuery AJAX calls return a reference to a Promise object and that's what you would be storing in that case.

How to clean an XML object to avoid the "Content not allowed in prolog" error?

I have a XML object retrieved from an AJAX call and for which I have done some manipulations:
$.ajax({
url: "url_of_xml",
type: 'GET',
dataType: 'xml',
success: function (xml) {
var sld_doc= $(xml)
// manipulations with the XML file
}
})
The XML file is correctly modified and is how I need it to be (with the added/modified nodes). Now I need to POST the modified XML (to a GeoServer instance):
$.ajax({
url: "geoserver/rest/styles",
type: 'POST',
data: sld_doc,
headers: {
"Content-Type": "application/vnd.ogc.sld+xml"
},
dataType: 'json',
success: function (data) {a
console.log(JSON.stringify(data));
},
error: function (x, e) {
console.log(x.status + " " + x.responseText);
}
});
I'm getting the error: 500 org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; Content is not allowed in prolog.
From what I've read, it is caused by characters before the tag at the beginning of the XML doc.
How can I clean the begging of the XML object so that it can be sent correctly to the server ? I'm able to access nodes with sld_doc.find("node_name") but how can I check for invalid characters before the 1st node (<?xml>) ?

At the moment you are passing a jQuery object. Try unwrapping it, and setting the right dataType too:
$.ajax({
url: "geoserver/rest/styles",
type: 'POST',
data: sld_doc[0],
headers: {
"Content-Type": "application/vnd.ogc.sld+xml"
},
dataType: 'xml',
success: function (data) {a
console.log('success');
},
error: function (x, e) {
console.log('error');
}
});

Syntax error in Javascript function

Java script
$('#senurl').click(function () {
$.ajax({
type: "POST",
url: "/Admin/Coupon1/Reject",
dataType: "json",
data: "id="+#Model.id+"&url="+#url
});
});
ReferenceError: Expired is not defined
[Break On This Error]
data: "id="+2925+"&url="+Expired

You probably want (but see also below):
$('#senurl').click(function () {
$.ajax({
type: "POST",
url: "/Admin/Coupon1/Reject",
dataType: "json",
data: "id=#Model.id&url=#url"
});
});
...because you have to think about what the browser sees, and if #url gets replaced with Expired by the server, from the error you can tell that what the browser sees for your code is:
data: "id="+2925+"&url="+Expired // <=== What the browser sees with your current code
Even better, let jQuery handle any potential URI-encoding needed by passing it an object instead:
$('#senurl').click(function () {
$.ajax({
type: "POST",
url: "/Admin/Coupon1/Reject",
dataType: "json",
data: {id: #Model.id, url: "#url"}
});
});
If you don't want to pass jQuery an object and let it handle the URI-encoding for you, then you'll want to handle it yourself:
data: "id=#Model.id&url=" + encodeURIComponent("#url")

$('#senurl').click(function () {
$.ajax({
type: "POST",
url: "/Admin/Coupon1/Reject",
dataType: "json",
data: "{id:'" + #Model.id + "', 'url': " + #url + "}",
success: function (response) {
alert( response.d);
},
error: function (data) {
alert(data);
},
failure: function (msg) {
}
});
});
Try this it is working fine. If you are using url routing then you might get some other error.
so better get the respone output and check..

I think its because #url variable is assigned data Expired without quotes.

function calling ajax returns false

I have a javascript function which makes a JSON call to a web service using jQuery.
In the success function I need to evaluate the JSON response and if necessary make another call to a different method in the same web service.
Here is how I do it:
function firstAjaxCall(aid, tid) {
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "/webservices/Webservice.asmx/Method1",
data: "{ auctionId: '" + aid + "'}",
dataType: "json",
success: function (response) {
var respData = response.d;
//do some stuff
if (respData.HasEnded == true) {
clearInterval(tid);
var end = false;
end = endFunction(aid);
if (end) {
// do some other stuff
}
}
},
failure: function (errorMsg) { alert(errorMsg.toString()); }
});
}
and the endFunction which is being called from within the ajax success function:
function endFunction(aid) {
var hasEnded = false;
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "/webservices/Webservice.asmx/Method2",
data: "{ auctionId: '" + aid + "'}",
dataType: "json",
success: function (callbackData) {
var endRespData = callbackData.d;
hasEnded = endRespData.Success;
alert(hasEnded.toString());
},
failure: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
return hasEnded;
}
Here is the weird stuff. The ajax-call is made all right. The code on the server is running according to plan. However, if I try to set a firebug breakpoint in the success function of endFunction(aid) is is not hit, but the alert box is shown displaying the word true. This is somewhat good since it seems that we are actually reaching the success function. The hasEnded variable however is never set to true so it always returns false.
Calling endFunction(1) from the Firebug console displays an alert box with the word true and returns value false.
What's going wrong?

AJAX is asynchronous — the $.ajax call will not wait for the server to reply.
Therefore, the return hasEnded; line runs before the AJAX callback.
You need to make your endFunction take a callback parameter, like $.ajax does.

http://api.jquery.com/jQuery.ajax/
It looks like you're using "failure" in the documentation you have "error":
error(XMLHttpRequest, textStatus, errorThrown)
also you should do something like this:
function firstAjaxCall(aid, tid) {
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "/webservices/Webservice.asmx/Method1",
data: "{ auctionId: '" + aid + "'}",
dataType: "json",
success: function (response) {
var respData = response.d;
//do some stuff
if (respData.HasEnded == true) {
clearInterval(tid);
var end = false;
endFunction(aid,function(endv){
if (endv) {
// do some other stuff
}
});
}
},
error: function (errorMsg) { alert(errorMsg.toString()); }
});
}
function endFunction(aid,endcallback) {
var hasEnded = false;
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "/webservices/Webservice.asmx/Method2",
data: "{ auctionId: '" + aid + "'}",
dataType: "json",
success: function (callbackData) {
var endRespData = callbackData.d;
hasEnded = endRespData.Success;
alert(hasEnded.toString());
endcallback(hasEnded);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
endcallback("?");
}
});
//return hasEnded;
}