jquery function returning undefined

Hi,

I have a jscript function which I call;

var $text = runUsernameAjax('CheckUsername', 'username', $("#<%=UsernameTextbox.ClientID%>").val());
alert($text);

Open in new window


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

        }

Open in new window


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

        }

Open in new window

flynnyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Did you look in the console to see what is undefined.  Maybe give us a link to your sample page.  

If you surf to the url here will you get data?   url: "default.aspx/CheckUsername",
0
leakim971PluritechnicianCommented:
Just add : async:false
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;
}

Open in new window


But you should use promise : https://api.jquery.com/promise/
0
flynnyAuthor Commented:
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.
0
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

leakim971PluritechnicianCommented:
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
0
flynnyAuthor Commented:
sorry leakim971,

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

Open in new window


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

        }

Open in new window


but still it returns undefined?

would you still recommend promise() in this instance?
0
leakim971PluritechnicianCommented:
I have the following code now;

What about MY code?
0
flynnyAuthor Commented:
sorry didn't see that post either;

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;

        }

Open in new window


this is working thank you.

why do I need this to be asyncronous as should it not return at the end of the call?
0
leakim971PluritechnicianCommented:
I added an link too
0
flynnyAuthor Commented:
Ok thanks for the link.

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

            })

        }

Open in new window


am i missing something here? as far as I can see this should trigger at the end of the successful call?
0
leakim971PluritechnicianCommented:
runUsernameAjax('CheckUsername', 'username', $("#<%=UsernameTextbox.ClientID%>").val()).done(function(__text__) {
      alert(__text__);
});

Open in new window

0
flynnyAuthor Commented:
thanks for that I the alert isn't firing?

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

Open in new window


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

        }

Open in new window


Do I still need to return the variable compltely outside and keep the promise in the method?
0
leakim971PluritechnicianCommented:
runUsernameAjax('CheckUsername', 'username', $("#<%=UsernameTextbox.ClientID%>").val()).done(function(__text__) {
      alert(__text__);
});

Open in new window


        function runUsernameAjax(webmethod, fieldname, fieldtext) {

           return  $.ajax({
                type: "POST",
                url: "default.aspx/CheckUsername",
                data: JSON.stringify({ username: fieldtext }),
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });

        }

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
flynnyAuthor Commented:
I really appreciate both the help and quick replies.

Many thansk I now understand much more clearly.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.