Best options for loading data into iframe with timeout
I was not sure how to properly name this question.
I would like to discuss the best way to get POST / GET data on another website in a timely manner and use jQuery as a workhorse. Of course, I'm open to suggestions with better methods and libraries, albeit in Javascript or C #.
Let me try and install the script.
The two sites share the "a.company" subdomain, but they are two separate IIS7 sites.
Site 1
- a.company.com/products
- ASP MVC 5
- Contains a "puesdo" method for collecting finished products to go to site2.
Site 2
- a.company.com/checkout
- precompiled by vendor without access to CS files, but can modify aspx / masterfile docs
- ASP Webforms
- Has a limited API that will turn a url into a product and add a cart to it.
- Example a.company.com/checkout/product/qty
Currently, when the go to checkout button is clicked on site 1 , the jQuery function goes through each cart item and creates a url like: a.company.com/checkout/product/qty and then loads the url in the iframe of the document. This loop also has a setTimeout function,
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 a job, and I appreciate the whole "if it doesn't break", but my worry is on edge all the time because I think there must be a better way. perhaps by adding code that checks if the iframe has finished loading / posting it?
The main issues are: - iframe not loading (and generating no feedback) - redirecting the page by the user without finishing loop (due to slow connection)?
Will using the Ajax POST / GET function with a successful response / failure / full validation be more secure in terms of ensuring a full load.
Would like 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
source to share
I'm going to assume that iframe
your site is hidden and the user doesn't actually see it.
I would definitely use ajax
instead of using iframe
for this.
This example will execute all requests in parallel (up to 6 at a time in chrome) and then call RedirectCustomerToCheckout
if they all succeed, or call onFailedCheckout
if any of the requests fail, or enter the default ajax timeout.
You can use $.ajax
instead $.get
if you want to use timeouts for each request.
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';
}
});
source to share
Since both have the same domain, you can try something like this.
Here I am using jQuery .load
with a callback.
instead of calling the load iframe in .each
. I used the "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!
source to share
From what I can gather, I think you are doing your presentation mostly on the first website and at the box office from another. in my opinion you should be using jquery to add product template to custom products and when running jquery get (ajax) request for product validation url. all product checkout calls will add products to the same cart and finally go to checkout, redirect the user to the checkout cart page. I don't recommend using an iframe unless you have a specific reason to do so.
source to share
If all you are doing is making a request to get the url then why not just add an image to your page with url and query string as img src
<img src="http://...your endpoint url?querystring..." class="hidden" >
You can use the img onload event to get a confirmation that the server has sent a response, which will give you the option to use an async loop that is re-called in the onload event and when all dispatched objects redirect the user to checkout.
Or you can just add as many images to the page as there are items in the cart, listen for onload events on everyone and when everyone has loaded the redirect.
source to share