Jquery Ajax Function

Question

I've created a helper function that builds the list items for a carousel. Ideally I would call this at the bottom of the page and output the html structure on the page. It should receive a url and then fetch the data from the passed url.

Could someone enlighten me as to why the following function is not returning the value to the page?

Javascript

function selectAfterCharacter(item, character) {
    return item.substring(item.lastIndexOf(": ") + 1, item.length).trim();
}


function buildCarouselItem (url) {
    jQuery.ajax({
        url: url,
        success: function(result) {
            html = jQuery(result);
            var title = (html.find("h1#product_title").html());
            var productId = (html.find("span#prod_code").html());
            var strippedId = selectAfterCharacter(productId, ": ");

            var price = (html.find("span.one_price").html());
            var Nowprice = (html.find("span.now_price").html());


            if (price !== undefined) {
               var price = (html.find("span.one_price").html());
            } else {
                var price = (html.find("span.now_price").html());
            }

            return(` 
                <li>
                    <a href='${url}'>
                        <img alt='${title}' src='http://www.awebsite.com/${strippedId}/large/${strippedId}.jpg'>
                        <div class="product-title">
                            ${title}
                        </div>
                        <div class="product-price">
                            <h4>${price}</h4>
                        </div>
                    </a>
                </li>
                `
            );  
        },
    });
};

function buildCompleteCarousel (theArray) {
    for (var i = 0; i < theArray.length ;  i++) {
        buildCarouselItem(theArray[i]);
    }
}

var LinksArray = [
    "http://www.awebsite.com/115812",
    "http://www.awebsite.com/115812",
    "http://www.awebsite.com/115812"
];

var htmlOutput = buildCompleteCarousel(LinksArray);

$('output').innerHTML = htmlOutput;

Because you can not return from ajax, you need to use promise or callback function.. — Rayon, Oct 08 '15 at 12:33

score 0 · Accepted Answer · answered Oct 08 '15 at 12:45

You can't return anything from a function that is asynchronous. What you can return is a promise or you can use callback function like this:

function selectAfterCharacter(item, character) {
  return item.substring(item.lastIndexOf(": ") + 1, item.length).trim();
}

function buildCarouselItem(url, callback) {
  jQuery.ajax({
    url: url,
    success: function(result) {
      var html = jQuery(result);
      var title = (html.find("h1#product_title").html());
      var productId = (html.find("span#prod_code").html());
      var strippedId = selectAfterCharacter(productId, ": ");
      var price = (html.find("span.one_price").html());
      var Nowprice = (html.find("span.now_price").html());
      if (price !== undefined) {
        price = (html.find("span.one_price").html());
      } else {
        price = (html.find("span.now_price").html());
      }
      var returnVal = "<li>\
                <a href='${url}'>\
                        <img alt='${title}' src='http://www.awebsite.com/${strippedId}/large/${strippedId}.jpg'>\
                        <div class='product-title'>\
                            ${title}\
                        </div>\
                        <div class='product-price'>\
                        <h4>${price}</h4>\
                        </div>\
                        </a>\
                        </li>";
      if (typeof callback === 'function') {
        callback(returnVal);
      }
    }
  });
}

function buildCompleteCarousel(theArray) {
  for (var i = 0; i < theArray.length; i++) {
    buildCarouselItem(theArray[i], function(response) {
      $('output').append(response);
    });
  }
}
var LinksArray = [
  "http://www.awebsite.com/115812",
  "http://www.awebsite.com/115812",
  "http://www.awebsite.com/115812"
];
buildCompleteCarousel(LinksArray);

score -1 · Answer 2 · answered Oct 08 '15 at 12:46

function buildCarouselItem (url) {
var myHTML = '';
jQuery.ajax({
    url: url,
    async: false,
    success: function(result) {
        html = jQuery(result);
        var title = (html.find("h1#product_title").html());
        var productId = (html.find("span#prod_code").html());
        var strippedId = selectAfterCharacter(productId, ": ");

        var price = (html.find("span.one_price").html());
        var Nowprice = (html.find("span.now_price").html());


        if (price !== undefined) {
           var price = (html.find("span.one_price").html());
        } else {
            var price = (html.find("span.now_price").html());
        }

        myHTML = ` 
            <li>
                <a href='${url}'>
                    <img alt='${title}' src='http://www.awebsite.com/${strippedId}/large/${strippedId}.jpg'>
                    <div class="product-title">
                        ${title}
                    </div>
                    <div class="product-price">
                        <h4>${price}</h4>
                    </div>
                </a>
            </li>
            `;
        );  
    },
});
return myHTML ;
};

function buildCompleteCarousel (theArray) {
    var HTML = '';
    for (var i = 0; i < theArray.length ;  i++) {
        HTML += buildCarouselItem(theArray[i]);
    }
    return HTML;
}

The important part is un jQuery.ajax : "async : false". So the function will wait for ajax to return the html

.

Never recommend `async: false`. it's deprecated. – Barmar Oct 08 '15 at 12:49 — Barmar, Oct 08 '15 at 12:49
Thank you for the information. – ThinkTank Oct 08 '15 at 13:32 — ThinkTank, Oct 08 '15 at 13:32

Jquery Ajax Function

2 Answers2