Better options for loading data into iframe with timeout loop

Question

I wasn't too sure on how to aptly title this question.

I would like to discuss the best way to POST/GET data with another website in a timely manner and using jQuery as the workhorse. Of course, I am open to suggestions with better methods and libraries albeit Javascript based or C#.

Let me try and set the scenario.

The two sites share the sub-domain 'a.company' but they are two separate IIS7 sites.

Site 1

• a.company.com/products
• ASP MVC 5
• Contains a 'puesdo' cart method to collect products wanted ready to pass to site2.

Site 2

• a.company.com/checkout
• pre-compiled by vendor no access to CS files, but can modify aspx / masterfile documents
• ASP Webforms
• Has limited API that will turn a URL into a product and add to it's cart.
• Example a.company.com/checkout/product/qty

Currently, when button 'proceed to checkout' is clicked on site 1, a jQuery function loops through each cart item and produces a url similar to: a.company.com/checkout/product/qty and then loads the URL into an iframe on the document. This loop has a setTimeout function also,

jQuery(function(){

  $('#proceed').on('click', function(){
       // set integer for timeout

       n = 2;

       $(cartobject).each(function(i){

              q = item.get('qty');
              p = item.get('productid');

              // delay loop
              setTimeout(function(){ 
                   ProceedItems(q,p) 
              }, 1000 * (i + 1));
              n = n + parseInt(i);
       });

       n = n * 2 + "000"; // from each function
       // delay redirect so loop can finish
       setTimeout(function(){
            RedirectCustomerToCheckout();
       }, n );


  });

  // Proceed each item to Checkout API
  function ProceedItems(quantity, productid)
  {
      $("#iframe").attr("src","http://a.company.com/checkout/" + productid + "/" + quantity);
  }

  // when loop as finished :: take customer to checkout process.
  function RedirectCustomerToCheckout()
  {
       window.location.href = "http://a.company.com/checkout";
  } 

});

This method is work, and i appreciate, the whole 'if it ain't broke' - but my anxiety is on edge the whole time as I think there must be a better way. perhaps adding code that checks that the iframe has completed it's loading / postback?

Main concerns are: - iframe not loading (and not generating any feedback) - page redirecting user without finishing loop (because of slow connection)?

Would using an Ajax POST/GET function with a reply success/failure/complete check be anymore secure in terms ensuring load completes.

Would really enjoy some suggestions.

Remote Address:10.0.0.100:800
Request URL:http://a.company.com/checkout/46026/1
Request Method:GET
Status Code:302 Found

GET /checkout/46026/1 HTTP/1.1
Host: a.company.com
Connection: keep-alive
Accept: */*
Origin: http://a.company.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
Referer: http://a.company.com
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

Answer 1

I'm gonna assume the iframe on your site is hidden and the user doesn't actually see it.
I would definitely use ajax instead of using an iframe for this.

This example will do all the requests in parallel ( up to 6 at a time in chrome ), and will then call RedirectCustomerToCheckout if they all completed successfully, or it will call onFailedCheckout if any of the requests fail or pass the default ajax timeout.

You can use $.ajax instead of $.get if you want to use per request timeouts.

jQuery(function () {
    $('#proceed').on('click', function () {
        var checkouts = [];
        $(cartobject).each(function (item) {
            var q = item.get('qty');
            var p = item.get('productid');
            checkouts.push($.get('http://a.company.com/checkout/' + p + '/' + q));
        });
        // $.when will wait for all checkouts to complete
        $.when.apply($, checkouts)
           .done(RedirectCustomerToCheckout)
           .fail(function onFailedCheckout() {
                alert('stuff broke !');
           });
    });

    // when loop as finished :: take customer to checkout process.
    function RedirectCustomerToCheckout() {
        window.location.href = 'http://a.company.com/checkout';
    }
});

Answer 2

Since both share the same domain you can try something like this.

Here i am making use of jQuery .load with callback.

instead of calling the iframe load in .each. i've used 'Q' Data Structure.

// our cartQ
var cartQ = new Array();


jQuery(function () {

    $('#proceed').on('click', function () {
        // re init the Q
        cartQ = new Array();
        // add each cartobject to Q
        $(cartobject).each(function (i) {
            cartQ.unshift(this);
        });

        // begin loading iframe.
        loadFromQ();
    });


    function loadFromQ() {
        if (cartQ.length !== 0) {
            var item = cartQ.pop();
            q = item.get('qty');
            p = item.get('productid');

            // pass same function as callback
            ProceedItems(q, p, loadFromQ);

        } else {
            RedirectCustomerToCheckout();
        }

    }
    // Proceed each item to Checkout API
    function ProceedItems(quantity, productid, callback) {
        $(document.body).append("<IFRAME id=p" + productid + " ...>");
        $('iframe#p' + productid).attr("http://a.company.com/checkout/" + productid + "/" + quantity, url);

        // call callback after loaded.
        $('iframe#p' + productid).load(function () {
            callback(this);
        });

    }

    // when loop as finished :: take customer to checkout process.
    function RedirectCustomerToCheckout() {
        window.location.href = "http://a.company.com/checkout";
    }

});

Hope this helps!