Solved

jquery function returning undefined

Posted on 2014-02-28
13
1,153 Views
Last Modified: 2014-03-01
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

0
Comment
Question by:flynny
  • 6
  • 6
13 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 

Author Comment

by:flynny
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 

Author Comment

by:flynny
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
I have the following code now;

What about MY code?
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:flynny
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
I added an link too
0
 

Author Comment

by:flynny
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
runUsernameAjax('CheckUsername', 'username', $("#<%=UsernameTextbox.ClientID%>").val()).done(function(__text__) {
      alert(__text__);
});

Open in new window

0
 

Author Comment

by:flynny
Comment Utility
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:flynny
Comment Utility
I really appreciate both the help and quick replies.

Many thansk I now understand much more clearly.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now