Solved

Javascript fails in Internet Explorer 8 and IE11

Posted on 2013-12-11
13
1,877 Views
Last Modified: 2013-12-17
I have this javascript that I've been using at a credit card provider, Nexternal. It worked with IE10, but then MS decided to upgrade my browser to IE11 and it no longer works. Chrome works fine. Firefox works fine. I just tested on another machine with IE8 and it doesn't work on their either. I no longer have IE9 or IE10 so can't test that.

But here is the code. Any suggestions what could be wrong? The FOR_EACH_PRODUCT I believe is a method in their system. Also the FOR_EACH_PRODUCT in comments is what I had before. They suggested I change it to the uncommented section. Neither works in IE.

The idea is. The user places an ecommerce order, they press submit after credit card info is provided. Then the ecommerce system runs the below javascript, replacing the tag words with actual values, which hits my website through an httpHandler. But the javascript never hits my site when using IE. It does when using Chrome. Same products ordered, same user.


<script src="https://www.xxx.com/Scripts/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
<!--

    function SaveEcommerceData() {

        // create web service param object
        var testStr = "";
        var passUrl = "";
        passUrl = "https://www.xxx.com/WebService/EcommerceHandler.ashx";
        var eCommerceInfo = {};
        var productData = [];

        testStr = "ecommerce";

       // FOR_EACH_PRODUCT(
       //             var productItem = {
       //                 "TrainingId": "PRODUCT_CUSTOM_FIELD1",
       //                 "TrainingType": "PRODUCT_CUSTOM_FIELD2",
       //                "ItemQuantity": "PRODUCT_QUANTITY",
       //                "ItemPrice": "PRODUCT_PRICE"
       //            };
       //productData.push(productItem);)

        FOR_EACH_PRODUCT(productData.push({
           "TrainingId": "PRODUCT_CUSTOM_FIELD1",
           "TrainingType": "PRODUCT_CUSTOM_FIELD2",
           "ItemQuantity": "PRODUCT_QUANTITY",
           "ItemPrice": "PRODUCT_PRICE"
        });)

            eCommerceInfo = {
                "Test": testStr,
                "CustomerNo": "CUSTOMER_NO",
                "OrderNo": "ORDER_NO",
                "Email": "EMAIL",
                "FirstName": "FIRST_NAME",
                "LastName": "LAST_NAME",
                "Address1": "ADDRESS1",
                "Address2": "ADDRESS2",
                "City": "CITY",
                "State": "STATE",
                "PostalCode": "POSTAL_CODE",
                "Country": "COUNTRY",
                "PhoneNum": "PHONE_NUM PHONE_EXT",
                "OrderQuantity": "ORDER_QUANTITY",
                "OrderTotal": "ORDER_SUBTOTAL",
                "CustomerType": "CUSTOMER_CUSTOM_FIELD1",
                "Products": JSON.stringify(productData)
            };

        // create web service param object
        $.ajax({
            url: passUrl,
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(eCommerceInfo),
            success: function (result) {
                console.log(result);
            }
        });


    }

    SaveEcommerceData();

    //-->
    </script>

Open in new window

0
Comment
Question by:BobCSD
  • 6
  • 4
  • 3
13 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39712670
Usually IE8 will show and error message which you can bring up by clicking on a yellow triangle in the bottom left corner of the browser window.  If you see nothing there, you can use Fiddler or Wireshark to see what is actually being sent in the POST data.
0
 
LVL 16

Expert Comment

by:hankknight
ID: 39714058
### 1 ###
If you want full support for IE8 you should use jQuery version 1.9.1 or OLDER.  Newer versions of jQuery are buggy with older versions of IE.

You may optionally use IE Conditional HTML Comments so that IE uses the older jQuery versions and other browsers use newer jQuery versions:
http://davidwalsh.name/ie-conditional-comments

### 2 ###
For maximum compatibility with Internet Explorer you should use RELATIVE URLs not ABSOLUTE URLs with AJAX.

Change:
passUrl = "https://www.xxx.com/WebService/EcommerceHandler.ashx";

To:
passUrl = "/WebService/EcommerceHandler.ashx";

If you are using the absolute value because the URL you are accessing is a third-party site then you are out of luck when it comes to IE compatibility.   There is a hack to get around this that involves iFrames but it is messy and outside of the scope of this question.

### 3 ###

In most IE versions, the "console.log" functionality ONLY works if the development console is open.  Most website visitors who are using IE will get an error of you are using it.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    function SaveEcommerceData() {

        // create web service param object
        var testStr = "";
        var passUrl = "";
        passUrl = "/WebService/EcommerceHandler.ashx";
        var eCommerceInfo = {};
        var productData = [];

        testStr = "ecommerce";

       // FOR_EACH_PRODUCT(
       //             var productItem = {
       //                 "TrainingId": "PRODUCT_CUSTOM_FIELD1",
       //                 "TrainingType": "PRODUCT_CUSTOM_FIELD2",
       //                "ItemQuantity": "PRODUCT_QUANTITY",
       //                "ItemPrice": "PRODUCT_PRICE"
       //            };
       //productData.push(productItem);)

        FOR_EACH_PRODUCT(productData.push({
           "TrainingId": "PRODUCT_CUSTOM_FIELD1",
           "TrainingType": "PRODUCT_CUSTOM_FIELD2",
           "ItemQuantity": "PRODUCT_QUANTITY",
           "ItemPrice": "PRODUCT_PRICE"
        });)

            eCommerceInfo = {
                "Test": testStr,
                "CustomerNo": "CUSTOMER_NO",
                "OrderNo": "ORDER_NO",
                "Email": "EMAIL",
                "FirstName": "FIRST_NAME",
                "LastName": "LAST_NAME",
                "Address1": "ADDRESS1",
                "Address2": "ADDRESS2",
                "City": "CITY",
                "State": "STATE",
                "PostalCode": "POSTAL_CODE",
                "Country": "COUNTRY",
                "PhoneNum": "PHONE_NUM PHONE_EXT",
                "OrderQuantity": "ORDER_QUANTITY",
                "OrderTotal": "ORDER_SUBTOTAL",
                "CustomerType": "CUSTOMER_CUSTOM_FIELD1",
                "Products": JSON.stringify(productData)
            };

        // create web service param object
        $.ajax({
            url: passUrl,
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(eCommerceInfo),
            success: function (result) {
                return false;
            }
        });
    }
    SaveEcommerceData();
</script>

Open in new window

0
 
LVL 1

Author Comment

by:BobCSD
ID: 39715160
Okay, I've removed the "console" line. Also, I do have to have an absolute URL because it's on another site. This all worked last week. Sigh.

Anyway, I've decided to entirely change what I pass into the webhandler, and just pass in the Order Number. I can then use XML and retrieve the entire order and deal with it server side without having to worry about all the loops, etc. in the javascript.

However, even broken down to the simplest thing, IE does not send the data or hit my site at all, and Chrome does. Perhaps you can take a look at it and tell me how to just simply send the one value to my site. Doesn't need a name value pair or anything. I'll just receive the InputStream and know that it is the OrderId and act on that.

Is there a way I could simplify the below code to hit my webhandler and just pass one value, in such a way that Internet Explorer will work? This is the value I want to send: "ORDER_NO" The ecommerce site converts that tag to the actual order number.

Maybe is there a way to do this that doesn't use Ajax? I'll try anything. thanks!

<script src="https://xx.xx.com/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
<!--

    function SaveEcommerceData() {

        var passUrl = "";
        passUrl = "https://www.xxx.com/Handler.ashx";

        $.ajax({
            url: passUrl,
            type: 'POST',
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            data: "ORDER_NO",
            success: function (result) {
               return false;
            }
        });

    }

    SaveEcommerceData();

    //-->
    </script>

Open in new window


Oh, I tried changing the jquery version and that didn't fix the problem. Plus, on saving the ecommerce site warns I have to use https to avoid the popup alerts, so I'll keep this for now until I can download the version you suggest. But it still doesn't work with it in IE. :(
0
 
LVL 1

Author Comment

by:BobCSD
ID: 39715354
Okay, now I have tried another method of sending the data. And even this simple simple script fails in internet explorer. It works in Chrome. Sigh. Any suggestions?

   <script type="text/javascript">
<!--

   function SaveEcommerceData() {

      var passUrl = "";
      passUrl = "https://www.xxx.com/Handler.ashx";

     
      $.getJSON(passUrl + "?OrderNumber=" + "ORDER_NO", function (data) {
      });

   }

   SaveEcommerceData();

   //-->
   </script>

Open in new window

0
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 200 total points
ID: 39715399
You are probably running into a "cross site scripting" security block.  The most common way around that is to create a page / procedure on your own web site that you can call with the AJAX and have it make the connection to "https://www.xxx.com/Handler.ashx" and return the info to you.
0
 
LVL 1

Author Comment

by:BobCSD
ID: 39715412
What is the difference of having it call my handler versus calling another page?

And why would chrome vs. IE have different results if it is a cross site scripting block?

And who do you think is blocking this -- the ecommerce site or my site? Because neither of us are blocking anything.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 200 total points
ID: 39715488
It sounds to me like your IE browser is blocking it since it works in Chrome.  The browsers don't always act the same.  Does it work the same way on other computers with those browsers?  What about Firefox and Safari?  Here is a long article from Google on browser security where you can see that there are many differences between the browsers: http://code.google.com/p/browsersec/wiki/Part2

The difference between having a server side script call "https://www.xxx.com/Handler.ashx" is that there no "cross site scripting" security blocking on the server code.
0
 
LVL 16

Expert Comment

by:hankknight
ID: 39715515
You CANNOT and SHOULD NOT use AJAX to another site.  You should use a relative path for your AJAX call to your own server.  If you must, you can setup a relay on your server to pass the content to the third-party server and get the results.
0
 
LVL 1

Author Comment

by:BobCSD
ID: 39715516
I have tested this on 3 different computer using 2 different versions of IE. My settings haven't changed since they worked last week. None of them will work on IE.

So you're saying that all of a sudden all 3 of my computers IE's have turned on cross-site scripting blocks?
0
 
LVL 16

Expert Comment

by:hankknight
ID: 39715535
I am saying that you should never use AJAX to another site.  Even if you run 5 tests and it works on all 5 browsers there is a good chance that it will FAIL on many other browsers.

Do you understand my idea of setting up a rely on your site?  Here is some sample code:
<?php

$site='http://example.com/thirdparty';
$url=$site.'?'.$_SERVER['QUERY_STRING'];
$opt=array();
$info=array();
$opt[CURLOPT_URL]=$url;
if(count($_POST)) { $opt[CURLOPT_POST]=1; $opt[CURLOPT_POSTFIELDS]=http_build_query($_POST); }
$pageContent=getpage($opt,$info);
header('Content-Type: '.$info['content_type']);
header('Content-Length: '.strlen($pageContent));
echo($pageContent);
exit;

function getpage($opt,&$info) {
        if(!is_array($opt)||empty($opt[CURLOPT_URL])) return FALSE;
        if(!isset($opt[CURLOPT_USERAGENT])) $opt[CURLOPT_USERAGENT]=$_SERVER['HTTP_USER_AGENT'];
        if(!isset($opt[CURLOPT_FAILONERROR])) $opt[CURLOPT_FAILONERROR]=0;
        if(!isset($opt[CURLOPT_FOLLOWLOCATION])) $opt[CURLOPT_FOLLOWLOCATION]=1;
        if(!isset($opt[CURLOPT_TIMEOUT])) $opt[CURLOPT_TIMEOUT]=60;
        if(!isset($opt[CURLOPT_HEADER])) $opt[CURLOPT_HEADER]=0;
        if(!isset($opt[CURLOPT_RETURNTRANSFER])) $opt[CURLOPT_RETURNTRANSFER]=1;
        if(!isset($opt[CURLOPT_SSL_VERIFYHOST])) $opt[CURLOPT_SSL_VERIFYHOST]=0;
        if(!isset($opt[CURLOPT_SSL_VERIFYPEER])) $opt[CURLOPT_SSL_VERIFYPEER]=0;
        $ch=curl_init(); if(!$ch) return FALSE;

        if(!curl_setopt_array($ch,$opt)||($rv=curl_exec($ch))===FALSE) { 
          // There was an error
        }
        if(isset($info)) $info=curl_getinfo($ch);
        curl_close($ch);
        return $rv;
}

?>

Open in new window

0
 
LVL 1

Author Comment

by:BobCSD
ID: 39717290
That just makes it more confusing. Do you have a link to an example in asp.net?

Is $.getJSON considered ajax? it doesn't work either in IE.

thanks.
0
 
LVL 16

Accepted Solution

by:
hankknight earned 300 total points
ID: 39717354
If you have access to both server you may be able to make $.getJSON work if you follow these instructions:

http://www.webdevdoor.com/jquery/cross-domain-browser-json-ajax/


Otherwise I recommend that you ask a new question in the ASP.NET section about how to relay the information between your server and the third-party server so you do not run into cross-site AJAX issues.
0
 
LVL 1

Author Closing Comment

by:BobCSD
ID: 39725533
thanks!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now