How to return a value from javascript function

Question

I have the following function from where i want to return the htm value however i am getting an undefined. I get a return value as i have checked that already.

 function loadData(uid) {



            $.ajax({
                type: "POST",
                url: '<%= page.resolveURL("~")%>Haggler.asmx/getLovedProductsSellerStoreByFbId',
                //url: '<%= Page.ResolveUrl("~")%>Haggler.asmx/GetFacebookFriends',
                data: '{FacebookId:' + uid + ',pageIndex:' + JSON.stringify(pageIndex) + '}',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                async: true,

                // Page parameter to make sure we load new data
                success: function (data) {
                    var myObject = eval('(' + data.d + ')');

                    //alert('getProductDescription' + JSON.stringify(myObject));
                    var html = '';
                    pageIndex++;
                    var htmlCategoryList = '';
                    var i = 0, length = myObject.length;
                    var _productLink = '';
                    var _productFullLink = '';
                    if (length > 0) {
                        pageCount = myObject[0].PageCount;

                        if (length > 0) {

                            for (; i < length; i++) {

                                if (myObject[i].ShippingQuantity > 0) {

                                    _productLink = myObject[i].SellReqID + '/product/' + myObject[i].CurrentNodeName;
                                    _productFullLink = "http://www.xarato.com/" + myObject[i].SellReqID + "/product/" + myObject[i].CurrentNodeName;
                                    if (myObject[i].Discount == 0) {
                                        /**
                                        if (parts[parts.length-1] == 'loves') {
                                            html += '<li class="polaroid"><div class="prodoptionbg prodseller"><span>Listed by <a href="/' + _storeLink + '">' + myObject[i].FirstName + ' ' + myObject[i].LastName + '</a></span></div><a href="/' + _productLink + '"><div style="position:relative;"><img alt="' + myObject[i].NodeName + '" src="/' + myObject[i].
                                            html += '<li class="polaroid"><a href="/' + _productLink + '"><div style="position:relative;"><img alt="' + myObject[i].RequestTitle + '" src="/' + myObject[i].Image1 + '"_thumb.jpg" width="200" height="' + myObject[i].ThumbHeight1 + '"><div class="options"><span class="favs" id="span' + myObject[i].SellReqID + '">' + myObject[i].Likes + '</span><span class="fav" onclick="calculateLike(event,' + myObject[i].SellReqID + ')">like it!</span></div></div><div class="prod"><span>' + myObject[i].RequestTitle + '</span></div><div class="prodprice1"><span style="font-weight:700;">Rs. ' + Math.round(parseFloat(myObject[i].MRPrice) + parseFloat(myObject[i].ShippingPrice)) + '</span></div></a></li>';

                                        }else{ **/
                                        //alt="' + myObject[i].RequestTitle + '"
                                        html += '<img alt="' + myObject[i].RequestTitle + '" src="/' + myObject[i].Image1 + '_thumb.jpg" width="200" height="' + myObject[i].ThumbHeight1 + '">';
                                        //}

                                    }
                                    else {
                                        /**if (parts[parts.length-1] == 'loves') {
                                            var _finalPrice = parseFloat(myObject[i].MRPrice) - (parseFloat(myObject[i].Discount) * parseFloat(myObject[i].MRPrice))/100

                                            html += '<li class="polaroid"><div class="prodoptionbg prodseller"><span>Listed by <a href="/' + _storeLink + '">' + myObject[i].FirstName + ' ' + myObject[i].LastName + '</a></span></div><a href="/' + _productLink + '"><div style="position:relative;"><img alt="' + myObject[i].NodeName + '" src="/' + myObject[i].Preview + '_thumb.jpg" width="200" height="' + myObject[i].Height + '"><div class="options"><span class="favs" id="span' + myObject[i].NodeId + '">' + myObject[i].Likes + '</span><span class="fav" onclick="calculateLike(event,' + myObject[i].NodeId + ')">like it!</span></div><div class="kjss"><span>' + myObject[i].Discount + '% Off</span></div></div><div class="prod"><span>' + myObject[i].NodeName + '</span></div><div class="prodprice1"><span style="color:#777777; text-decoration:line-through">Rs. ' + myObject[i].MRPrice + '</span> &nbsp;<span style="font-weight:700;">Rs. ' + Math.round(_finalPrice + parseFloat(myObject[i].ShippingPrice)) + '</span></div></a></li>';
                                        }else{**/
                                        //alt="' + myObject[i].RequestTitle + '"
                                        html += '<img alt="' + myObject[i].RequestTitle + '" src="/' + myObject[i].Image1 + '_thumb.jpg" width="200" height="' + myObject[i].ThumbHeight1 + '">';
                                        //}

                                    }
                                }
                            }


                            if (clearHtml) {
                                //  $('.bxslider').html('');

                                //htm = '<li>"' + html + '"</li>';

                            }

                            // var htmli = '<li>"' + html + '"</li>';
                            // $('.bxslider').append(htmli);

                            htm = '<li>' + html + '</li>';
                            alert(htm);
                            return htm;

                            clearHtml = false;

                            var options = {
                                autoResize: true, // This will auto-update the layout when the browser window is resized.
                                container: $('#main'), // Optional, used for some extra CSS styling
                                offset: 17, // Optional, the distance between grid items
                                itemWidth: 225 // Optional, the width of a grid item 
                            };

                        }
                        else {

                            return;
                        }
                    }
                    else {
                        return;
                    }


                },

                failure: function (data) {
                    alert('failture');
                },
                error: function (data) {
                    alert(data.responseText);

                }


            });


        }

This is how i am taking the data but i get an undefined value.

 HtmlM += loadData(myObject.data[i].uid);

Please help me out.

Can you also post the source code of `getLovedProductsSellerStoreByFbId`? — anar khalilov, Jan 16 '14 at 08:08
from your code I dont see you defining > var htm anywhere before using it. — Harshada Chavan, Jan 16 '14 at 08:16

score 0 · Accepted Answer · answered Jan 16 '14 at 08:14

Change your loadData to

function loadData(uid, delegate) {

  ///In ajax instead of return use 
  delegate(htm);
}

then call like that

loadData(myObject.data[i].uid, function(html){ HtmlM += html ;});

Ajax is asynchronous so you cant just return (yes you can do it synchronous but its not right way)

How to return a value from javascript function

1 Answers1