flynny
asked on
jquery function returning undefined
Hi,
I have a jscript function which I call;
Now am I doing something wrong as it is always returning undefined? also as I have a number of webmethods which take different values I was going to add the following but it would not work, any ideas why?
I have a jscript function which I call;
var $text = runUsernameAjax('CheckUsername', 'username', $("#<%=UsernameTextbox.ClientID%>").val());
alert($text);
function runUsernameAjax(webmethod, fieldname, fieldtext) {
//alert('in ajax method' + webmethod + ":" + fieldname + ":" + fieldtext);
$(function () {
$.ajax({
type: "POST",
url: "default.aspx/CheckUsername",
data: JSON.stringify({ username : fieldtext }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data) {
$text = "Congratulations " + fieldtext + " is available.";
//return text;
}
else {
alert("Unfortunately " + fieldtext + " is not available.");
return "Unfortunately " + fieldtext + " is not available.";
}
},
error: function (xhr, ajaxOptions, thrownError) {
return thrownError;
}
});
});
}
Now am I doing something wrong as it is always returning undefined? also as I have a number of webmethods which take different values I was going to add the following but it would not work, any ideas why?
function runUsernameAjax(webmethod, fieldname, fieldtext) {
//alert('in ajax method' + webmethod + ":" + fieldname + ":" + fieldtext);
$(function () {
$.ajax({
type: "POST",
url: "default.aspx/" + webmethod,
data: JSON.stringify({ fieldname : fieldtext }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data) {
$text = "Congratulations " + fieldtext + " is available.";
//return text;
}
else {
alert("Unfortunately " + fieldtext + " is not available.");
return "Unfortunately " + fieldtext + " is not available.";
}
},
error: function (xhr, ajaxOptions, thrownError) {
return thrownError;
}
});
});
}
Just add : async:false
Short :
But you should use promise : https://api.jquery.com/promise/
Short :
function runUsernameAjax(webmethod, fieldname, fieldtext) {
//alert('in ajax method' + webmethod + ":" + fieldname + ":" + fieldtext);
var $text = "";
$.ajax({
type: "POST",
async: false,
url: "default.aspx/" + webmethod,
data: JSON.stringify({ fieldname : fieldtext }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data) {
$text = "Congratulations " + fieldtext + " is available.";
}
else {
alert("Unfortunately " + fieldtext + " is not available.");
$text "Unfortunately " + fieldtext + " is not available.";
}
},
error: function (xhr, ajaxOptions, thrownError) {
return thrownError;
}
});
return $text;
}
But you should use promise : https://api.jquery.com/promise/
ASKER
sorry I was messing with the code and i realise that the success doesnt return anything in the code i posted above;
the commented out //return text was returning the string in $text.
Also I have tried alerting the text before it was returned and it was valid. It seems to be losing focus of the variable when returning from the AJAX call?
The /CheckUsername is webmethod in my ASPX.CS file. This is being called as I have add breakpoints to test this.
the commented out //return text was returning the string in $text.
Also I have tried alerting the text before it was returned and it was valid. It seems to be losing focus of the variable when returning from the AJAX call?
The /CheckUsername is webmethod in my ASPX.CS file. This is being called as I have add breakpoints to test this.
You need to learn abou Asynchonous and Synchronous operation to understand
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
ASKER
sorry leakim971,
I missed your first post due to typing my post after you commented. I have the following code now;
but still it returns undefined?
would you still recommend promise() in this instance?
I missed your first post due to typing my post after you commented. I have the following code now;
$text = runUsernameAjax('CheckUsername', 'username', $("#<%=UsernameTextbox.ClientID%>").val());
alert($text);
function runUsernameAjax(webmethod, fieldname, fieldtext) {
$(function () {
$.ajax({
type: "POST",
async: false,
url: "default.aspx/CheckUsername",
data: JSON.stringify({ username : fieldtext }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data) {
return "Congratulations " + fieldtext + " is available.";
}
else {
return "Unfortunately " + fieldtext + " is not available.";
}
},
error: function (xhr, ajaxOptions, thrownError) {
return thrownError;
}
});
});
}
but still it returns undefined?
would you still recommend promise() in this instance?
I have the following code now;
What about MY code?
ASKER
sorry didn't see that post either;
this is working thank you.
why do I need this to be asyncronous as should it not return at the end of the call?
function runUsernameAjax(webmethod, fieldname, fieldtext) {
//alert('in ajax method' + webmethod + ":" + fieldname + ":" + fieldtext);
var $ajaxtext = "";
$.ajax({
type: "POST",
async: false,
url: "default.aspx/CheckUsername" ,
data: JSON.stringify({ username : fieldtext }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data) {
$ajaxtext = "Congratulations " + fieldtext + " is available.";
}
else {
alert("Unfortunately " + fieldtext + " is not available.");
$ajaxtext = "Unfortunately " + fieldtext + " is not available.";
}
},
error: function (xhr, ajaxOptions, thrownError) {
return thrownError;
}
});
return $ajaxtext;
}
this is working thank you.
why do I need this to be asyncronous as should it not return at the end of the call?
I added an link too
ASKER
Ok thanks for the link.
that how would I use the .promise() in this case. i.e.
am i missing something here? as far as I can see this should trigger at the end of the successful call?
that how would I use the .promise() in this case. i.e.
function runUsernameAjax(webmethod, fieldname, fieldtext) {
//alert('in ajax method' + webmethod + ":" + fieldname + ":" + fieldtext);
var exists;
var promise = $.ajax({
type: "POST",
url: "default.aspx/CheckUsername" ,
data: JSON.stringify({ username : fieldtext }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
exists = data;
},
error: function (xhr, ajaxOptions, thrownError) {
return thrownError;
}
});
promise.promise().done(function () {
//alert('here');
var $ajaxtext = "";
if (exists) {
$ajaxtext = "Congratulations " + fieldtext + " is available.";
highlightFieldMessage($('#<%=UsernameTextbox.ClientID%>'), true, $ajaxtext);
highlightField($('#<%=UsernameTextbox.ClientID%>'), true);
}
else {
$ajaxtext = "Unfortunately " + fieldtext + " is not available.";
highlightFieldMessage($('#<%=UsernameTextbox.ClientID%>'), false, $ajaxtext);
highlightField($('#<%=UsernameTextbox.ClientID%>'), false);
}
})
}
am i missing something here? as far as I can see this should trigger at the end of the successful call?
runUsernameAjax('CheckUsername', 'username', $("#<%=UsernameTextbox.ClientID%>").val()).done(function(__text__) {
alert(__text__);
});
ASKER
thanks for that I the alert isn't firing?
I have the following;
Do I still need to return the variable compltely outside and keep the promise in the method?
I have the following;
runUsernameAjax('CheckUsername', 'username', $("#<%=UsernameTextbox.ClientID%>").val()).done(
function (__exists) {
alert('done');
$ajaxtext = "";
if (__exists) {
$ajaxtext = "Congratulations " + $("#<%=UsernameTextbox.ClientID%>").val() + " is available.";
highlightFieldMessage($('#<%=UsernameTextbox.ClientID%>'), true, $ajaxtext);
highlightField($('#<%=UsernameTextbox.ClientID%>'), true);
}
else {
$ajaxtext = "Unfortunately " + $("#<%=UsernameTextbox.ClientID%>").val() + " is not available.";
highlightFieldMessage($('#<%=UsernameTextbox.ClientID%>'), false, $ajaxtext);
highlightField($('#<%=UsernameTextbox.ClientID%>'), false);
}
});
function runUsernameAjax(webmethod, fieldname, fieldtext) {
$.ajax({
type: "POST",
url: "default.aspx/CheckUsername",
data: JSON.stringify({ username: fieldtext }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
return data;
},
error: function (xhr, ajaxOptions, thrownError) {
return thrownError;
}
});
}
Do I still need to return the variable compltely outside and keep the promise in the method?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I really appreciate both the help and quick replies.
Many thansk I now understand much more clearly.
Many thansk I now understand much more clearly.
If you surf to the url here will you get data? url: "default.aspx/CheckUsernam