Code Browser Compatibility issue JavaScript/ Jquery

Question

Following code is working fine with Chrome and Firefox, But onbuttonclick event is not working in Explorer, XML data fetching is working fine but onClick event on btn1 is not working well. Followinf is code, Purpose is using autocomplete jquery feature we are filling input box(fruits), On button click I will show corresponding code details in text area.(I am working in sharepoint 2010) I think there is some problem with(In function GetCode) var index=arrt.indexOf( $("#fruits" ).val());

in IE above part is not executing

<!-- Load jQuery, jQuery UI and jQuery ui styles from jQuery website -->
<link   href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Source our javascript file with the jQUERY code -->
<script>
/*  jQuery ready function. Specify a function to execute when the DOM is fully loaded.  */
var arr = [];
var arrt = [];
var source = [];
if (window.XMLHttpRequest)
{

 xhttp=new XMLHttpRequest();
}
else // code for IE5 and IE6
{

  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xhttp.open("GET","Data.xml",false);
xhttp.send();
alert("done");
xmlDoc=xhttp.responseXML;


 var i=0;
for (i=0;i<xmlDoc.getElementsByTagName("Field_3").length;i++)
{  
  var tmp;
   tmp=xmlDoc.getElementsByTagName("Field_3")[i].childNodes[0].nodeValue;
  // alert(tmp);
   arr.push(tmp);
 }

var j=0;
while(j<=i-1)
{ 
var tmp;
try
{
tmp=xmlDoc.getElementsByTagName("Field_2")[j].childNodes[0].nodeValue;
source.push(tmp);
}
catch(err)
{
 source.push("NA");
}
j=j+1;
}
j=0;
while(j<=i-1)
{ 
 arrt.push(xmlDoc.getElementsByTagName("Field_0")[j].getAttribute("Field_0"));
j=j+1;
}

var yv=" ";
var st=" "; 
document.getElementById("Code").value=yv;
document.getElementById("fruits").value=st;</script><script>

 function myFunction()
 {
      $( "#fruits" ).autocomplete({
  /*Source refers to the list of fruits that are available in the auto complete list. */
  source:arrt,
  /* auto focus true means, the first item in the auto complete list is selected by default. therefore when the user hits enter,
  it will be loaded in the textbox */
  autoFocus: true ,

 });
}
function GetCode()
{
  var index=arrt.indexOf( $("#fruits" ).val());
  yv=arr[index];
  if(yv=="NA" || yv=="Direct Variable" )
  {
   var str="";
   if(source[index]!="NA")
    str = "select "+ arrt[index]+" from "+ source[index];
   else
    str= "!!!!!!No Data Source is Available!!!!";

      document.getElementById("Code").value=str;
  }

  else
  document.getElementById("Code").value=yv;
  //alert(yv);
}
document.getElementById("Code").value=yv;</script>
<h1>Auto complete Metrics to Source</h1>
<!-- textbox and label that are attached with the autocomplete -->
<label for="fruits">Select Matric : <input name="fruits" id="fruits" onkeypress="myFunction()" type="text"/></label>
<button name="btn1" id="btn1" onclick="GetCode()" type="button">Get Code</button>
<br/><br/><textarea id="Code" rows="6" cols="60"></textarea>

I think there is some problem with var index=arrt.indexOf( $("#fruits" ).val()); in IE above part is not executing, Any help — yagyavrat, Apr 23 '14 at 06:36
Are you running IE9 in compatibility mode. I am asking this because in IE8 array.indexOf method won't work. To make array.indexOf work please check my following answer http://stackoverflow.com/questions/23108643/javascript-compare-variable-against-array-of-values/23109071#23109071 — Sandeeproop, Apr 23 '14 at 09:32
@Sandeeproop, Now I wrote my own indexOf function and it is working, Thanks for your Advice — yagyavrat, Apr 24 '14 at 06:39

score 0 · Answer 1 · answered Apr 23 '14 at 06:12

Can you remove extra "," after autoFocus: true from your function myFunction.

This will cause error in IE, and try again.

 function myFunction()
 {
    $( "#fruits" ).autocomplete({
    /*Source refers to the list of fruits that are available in the auto complete list. */
    source:arrt,
    /* auto focus true means, the first item in the auto complete list is selected by 
    default.therefore when the user hits enter,
    it will be loaded in the textbox */
    autoFocus: true
 });

score 0 · Answer 2 · answered Apr 24 '14 at 06:43

Whole problem was with indexOf function on array, I wrote my own indexOf function and it's working well without any issue, Here I am writing my code :-

function getIndex(var str)
{
var arrayLength = arrt.length;
    var i;
for (i = 0; i < arrayLength; i++) 
{
        if(str==arrt[i])
             break;
}
 return i;
}

Code Browser Compatibility issue JavaScript/ Jquery

2 Answers2