1

I run an eCommerce website. On our order confirmation page we run a third-party javascript that automatically executes an optional survey.

The problem with the survey is that it takes twenty seconds to execute and slows down the rendering of the crucial 'Order Complete' page.

I am wanting to prevent loading of this script until the customer clicks a button.

Ideally, the page will load without executing the script. There will be some text on the page that says, "Would you like to take a survey? If yes, click here." Then the page will call the third-party javascript to execute the survey code.

Below is the third-party javascript. The first script tag just collects variables, and the second script tag actually runs the survey code.

<script language="JavaScript">
// var passin_x =; //comment out to default center or adjust horizontal position by pixel
// var passin_y =; //comment out to default center or adjust vertical position by pixel
var orderId='@@order_id@@';
// var z_index =; //default 9995
var cartTotal='@@purchase_total@@';
// var billingZipCode=;
// Pass up to 5 products from customer shopping cart
//var productsPurchased= 'URL=^SKU=^GTIN=^PRICE=|URL=^SKU=^GTIN=^PRICE=|URL=^SKU=^GTIN=^PRICE=|URL=^SKU=^GTIN=^PRICE=|URL=^SKU=^GTIN=^PRICE=';
</script>
<script type="text/javascript" src="https://eval.bizrate.com/js/pos_xxxxx.js">
</script>

How can I dynamically load the script after the click event?

Mogsdad
  • 40,814
  • 19
  • 140
  • 246
elcucococo
  • 31
  • 3
  • Have you tried loading the JavaScript dynamically when **click here** event happens? See answers for both jQuery and plain JavaScript way: [http://stackoverflow.com/questions/7293344/load-javascript-dynamically](http://stackoverflow.com/questions/7293344/load-javascript-dynamically) – cbayram Nov 05 '12 at 22:33

2 Answers2

2

I used jQuery.getScript to dynamically load the script after the click event.

Specifically, I used the technique shown here: http://www.tutorialspoint.com/jquery/ajax-jquery-getscript.htm

Which looks like this:

$(document).ready(function() {
   $("#driver").click(function(event){
       $.getScript('/jquery/result.js', function(jd) {
           // Call custom function defined in script
           CheckJS();
       });
   });
});
OneHoopyFrood
  • 3,611
  • 2
  • 19
  • 37
elcucococo
  • 31
  • 3
0

Why would you want to do this anyway? This will slow down your site for calling an external link to fire off your js and if anything happens to the external site then your js functions will be voided and the site may break. This is not a good coding practice you should obtain a copy of the js file and store it locally within your hosting server...

This is just my opinion anyway.

-Epik-

Epik
  • 3,159
  • 4
  • 14
  • 23
  • Third-party external JavaScript are the foundation of many web sites when it comes to dynamic surveys, advertisement, analytics, etc. For ease of use, lack of maintenance and reduction of bandwidth usage, they make sense. The latency of retrieval depend on caching mechanisms, bandwidth and network latency. Third-party servers CAN have lower latency. As far as execution of the JS on the client-side, this is the trust you establish with the third-party when you make the decision to include their script, regardless of how you decided to include it (from your server or theirs). – cbayram Nov 05 '12 at 22:49