Solved

Javascript fails in Internet Explorer 8 and IE11

Posted on 2013-12-11
13
2,017 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:Starr Duskk
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 3
13 Comments
 
LVL 83

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 2

Author Comment

by:Starr Duskk
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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
LVL 2

Author Comment

by:Starr Duskk
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 83

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 2

Author Comment

by:Starr Duskk
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
 
LVL 83

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 2

Author Comment

by:Starr Duskk
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 2

Author Comment

by:Starr Duskk
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 2

Author Closing Comment

by:Starr Duskk
ID: 39725533
thanks!
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

729 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