Solved

Javascript error in IE - onclick

Posted on 2009-05-13
4
964 Views
Last Modified: 2013-12-08
We are using Google translate with a search application for our website. The problem we're having is when a user clicks on the search button. We then get an error. The specifics are in the attached word document with screenshots. The code Is below. This does not occur in Firefox or Safari, just IE 6.x, 7.x


<script type="text/javascript" src="static-hso-files/query-meta"></script>
<script type="text/javascript" src="static-hso-files/jsapi"></script>
<script type="text/javascript">
  google.load("language", "1");
  google.setOnLoadCallback(logo_load);
 
function translatejs(){
 
 var lang_list    = document.getElementById("trans-languages");
 var target_lang  = lang_list.options[lang_list.selectedIndex].value;
 var target_index = lang_list.selectedIndex;
 var searchcntrl  = document.getElementsByName("query")[0].value;
 
 if (target_lang!=null && target_lang!=""){
        if (target_lang!="en"){
         onTranslate(searchcntrl,target_lang,target_index);
        }
        else{
          offTranslate(searchcntrl,target_index);
        }  
 }
 else{
        offTranslate(searchcntrl,target_index);
 } 
}
 
function offTranslate(searchterm,index){
      var reg_url= "http://hso.info/hso/cgi-bin/query-meta?v%3Asources=test-lang-final2-avalon&v%3Aproject=HSO&query="+searchterm+"&index="+index+"&orig_term="+searchterm;
      window.location = reg_url; 
}
 
function onTranslate(searchterm,tl,index){
    google.language.translate(searchterm, tl, "en", function(result)
    {
     if (!result.error) {
      var velocity_url = "http%3A%2F%2Fhso.info%2Fhso%2Fcgi-bin%2Fquery-meta?v%3Asources%3Dtest-lang-final2-avalon%26v%3Aproject%3DHSO%26query%3D"+result.translation+"%26index%3D"+index+"%26orig_term%3D"+searchterm;
 
      window.location = "http://74.125.93.104/translate_c?langpair=en|"+tl+"&hl=en&ie=UTF-8&fx=UTF-8&sl="+tl+"&tl="+tl+"&u="+velocity_url;
     }
   });
}
 
function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var o_url = decode(window.location.href);
  <!--alert("this is decode window.location.href: " + o_url);-->
  var regexS = "[\\?&]"+name+"=([^&#]*)";
<!--  var regexS = "([\\?&]|%26)"+name+"(=|%3D)([^%&#]*).*"; -->
  var regex = new RegExp( regexS );
  var results = regex.exec( o_url );
 
  if( results == null ){
    return "";
  }else{
    return results[1];
  }
}
 
function encode(obj) {
	var unencoded = obj;
	obj.value = escape(unencoded);
return obj;
}
 
function decode(obj) {
        var encoded = obj;
	obj = unescape(encoded.replace(/\+/g,  " "));
return obj;       
}
 
function trans_load() {
  var cur_index = gup('index');
  var lang_list   = document.getElementById("trans-languages");
  var searchcntrl  = document.getElementsByName("query")[0].value;
  var target_lang 
  if(cur_index!=null && cur_index!="" && cur_index>=0) {
    target_lang  = lang_list.options[cur_index].value;
       if (target_lang!=null && target_lang!=""){
            if (target_lang!="en"){
                google.language.translate(searchcntrl, "en", target_lang, function(result){
 if (!result.error) {
      <!--alert("target_lang is:" + target_lang);-->
         	document.getElementsByName("query")[0].value = result.translation; 
     }});
     lang_list.selectedIndex = cur_index;
   }
   else{
       
   }  
  }
 }
<!-- code for fix -->
  var cur_index_retry = gup('tl');
  var lang_listii = document.getElementById("trans-languages");
  lang_listii.value = cur_index_retry;  
  target_lang= cur_index_retry;
  
   if (target_lang!="en"){
                google.language.translate(searchcntrl, "en", target_lang, function(result){
 if (!result.error) {
      <!--alert("target_lang is:" + target_lang);-->
         	document.getElementsByName("query")[0].value = result.translation; 
     }});
   }
  
 
<!-- end code for fix -->   
 
  return false;
}
 
function logo_load(){
   if (top.location  != self.location) { 
     top.location.replace(self.location);
   }     
   trans_load();
   google.language.getBranding("branding");
 }
 
</script>
<script src="static-hso-files/defaulten.js" type="text/javascript"></script>
<body class="project-HSO sources-test-lang-final2-avalon" id="search">
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="static-hso-files/ga.js" type="text/javascript"></script><script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-4720084-1");
pageTracker._trackPageview();
} catch(err) {}</script><div id="viv-header-extra">
<div id="header">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td align="left" valign="bottom" width="460">
<a href="http://hso.info/"><img src="static-hso-files/header-logo-new-tall.jpg" class="imglogo" border="0" width="460" height="100"></a>
</td>
<td align="right" valign="bottom">
 <ul id="tabs">
   <li id="tabs-search"><a href="#">Search</a></li>
   <li id="tabs-contact"><a href="http://hso.info/contact/contact.html">Contact HSO</a></li>
   <li id="tabs-survey"><a href="http://hso.info/survey/survey.html">Survey</a></li>
   <li id="tabs-about"><a href="http://hso.info/about/aboutopen.html" target="new">About</a></li>
   <li id="tabs-help"><a href="http://hso.info/about/help.html">Help</a></li>
   <li id="tabs-support"><a href="http://hso.info/support/donate.html">Support HSO</a></li>
 </ul>
</td>
</tr>
</tbody></table>
</div> </div>
<div id="viv-frontpage"><div id="viv-header" class="clearfix"><div id="header-links"></div></div>
<div id="viv-main" style="margin: 0pt;"><div class="content" style="margin: 0pt auto;"><div id="search-primary" class="search"><div class="search-form">
<form action="http://hso.info/hso/cgi-bin/query-meta" class="search" name="search" onsubmit="try{return translatejs();}catch(e){}">
<div id="libraries"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="searchboxtop">
<ul id="searchbox-tabs">
<li id="tabs-libraries"><a href="http://hso.info/hso/cgi-bin/query-meta?v:project=HSO&amp;v:sources=test-lang-final2-avalon&amp;" onclick="return viv.page.linkWithQuery('query-meta.exe?v:project=HSO&amp;v:sources=test-lang-final2-avalon')">HSO</a></li><li id="tabs-pubmed"><a href="http://hso.info/hso/cgi-bin/query-meta?v:project=HSO&amp;v:sources=PubMed&amp;" onclick="return viv.page.linkWithQuery('query-meta.exe?v:project=HSO&amp;v:sources=PubMed')">
PubMed</a></li>
<li id="tabs-all"><a href="http://hso.info/hso/cgi-bin/query-meta?v:project=HSO&amp;v:sources=test-lang-final2-avalon%20PubMed&amp;" onclick="return viv.page.linkWithQuery('query-meta.exe?v:project=HSO&amp;v:sources=test-lang-final2-avalon PubMed')">
All
</a></li></ul></td></tr><tr><td class="searchbox-middle" height="55"><div class="searchbox">
 
<input name="search" value="" type="hidden">
 
 
<input value="HSO" name="v:project" type="hidden"><input value="" name="query" size="50" class="query">
<script>document.getElementById('search').focus()</script>
&nbsp;<input name="subII" value="Search" onclick="translatejs();return false;" align="top" type="button"><div id="languagebar" class="notranslate" align="left"><span id="chooselang">Choose Search Language:&nbsp;</span><select id="trans-languages" class="collaborators">
<option value="en">English</option>
<option value="sq">Albanian</option>
<option value="ar">Arabic</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="zh-CN">Chinese (Simplified)</option>
<option value="zh-TW">Chinese (Traditional)</option>
<option value="hr">Croatian</option>
<option value="cs">Czech</option>
<option value="da">Danish</option>
<option value="nl">Dutch</option>
<option value="et">Estonian</option>
<option value="tl">Filipino</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="gl">Galician</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="iw">Hebrew</option>
<option value="hi">Hindi</option>
<option value="hu">Hungarian</option>
<option value="id">Indonesian</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="mt">Maltese</option>
<option value="no">Norwegian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="ro">Romanian</option>
<option value="ru">Russian</option>
<option value="sr">Serbian</option>
<option value="sk">Slovak</option>
<option value="sl">Slovenian</option>
<option value="es">Spanish</option>
<option value="sv">Swedish</option>
<option value="th">Thai</option>
<option value="tr">Turkish</option>
<option value="uk">Ukranian</option>
<option value="vi">Vietnamese</option></select>
<input id="orig-term" name="orig-term" value="" type="hidden">
<input id="index" index="index" value="" type="hidden"></div>
<div class="notranslate" id="branding"><div id="slabel">Translation is&nbsp;</div></div></div></td></tr>
<tr><td height="10"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="searchbox-bottom" align="left" valign="bottom"><img src="static-hso-files/corner-left-bottom-search.jpg" class="corner-left-bottom" width="10" height="10"></td><td class="searchbox-bottom"><img src="static-hso-files/pixel.gif" class="imgborder"></td><td class="searchbox-bottom" align="right" valign="bottom"><img src="static-hso-files/corner-right-bottom-search.jpg" class="corner-right-bottom" width="10" height="10"></td></tr></tbody></table></td></tr></tbody></table></div></form></div></div></div></div><div id="viv-footer"><div class="content clearfix"><div class="notranslatez"> 
<div class="document-footer">
<div style="" center="">
</div><table class="result-num" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="8" align="center">HSO is the first website to deliver authoritative, comprehensive, free, and ad-free health sciences knowledge.<br>
Search and browse any health sciences topic from over 50,000 courses, references, guidelines, and other learning resources. <br>
Materials are selected from accredited educational sources including
universities, governments, and professional societies, by HSO staff.
<br>
<br>
<span class="collaborators">HSO Founding Collaborators and Funders</span></td>
</tr>
<tr>
</tr>

Open in new window

javascript-IE.doc
0
Comment
Question by:kairosmix
  • 2
4 Comments
 
LVL 10

Accepted Solution

by:
bugada earned 500 total points
ID: 24378894
Probably to show the select "empty" option you set the selectedIndex to -1.
When you're trying to get the selected value you passes as array index, and -1 is invalid. Try to change the line where the error occurs as follows:
var target_lang = lang_list.value;

Open in new window

0
 
LVL 2

Expert Comment

by:IndianHero2001
ID: 24379022
When your page loads, the drop-down box with id="trans-languages" doesn't have anything selected. So, its selectedIndex value is null. So, that makes it lang_list.options[null]. Now, there is no null index or position in lang_list.options so the error!

Just pre-select one of the option as default. So, when page loads, the language box has some value in it.

Replace your select code with code below. I have set English as pre-selected language. You can set your own.
<select id="trans-languages" class="collaborators">
<option value="en" selected="selected">English</option>
<option value="sq">Albanian</option>
<option value="ar">Arabic</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="zh-CN">Chinese (Simplified)</option>
<option value="zh-TW">Chinese (Traditional)</option>
<option value="hr">Croatian</option>
<option value="cs">Czech</option>
<option value="da">Danish</option>
<option value="nl">Dutch</option>
<option value="et">Estonian</option>
<option value="tl">Filipino</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="gl">Galician</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="iw">Hebrew</option>
<option value="hi">Hindi</option>
<option value="hu">Hungarian</option>
<option value="id">Indonesian</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="mt">Maltese</option>
<option value="no">Norwegian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="ro">Romanian</option>
<option value="ru">Russian</option>
<option value="sr">Serbian</option>
<option value="sk">Slovak</option>
<option value="sl">Slovenian</option>
<option value="es">Spanish</option>
<option value="sv">Swedish</option>
<option value="th">Thai</option>
<option value="tr">Turkish</option>
<option value="uk">Ukranian</option>
<option value="vi">Vietnamese</option></select>

Open in new window

0
 

Author Comment

by:kairosmix
ID: 24379922
Hi, thanks, I did change the code with english set as the default, as you suggested, using your code, but I still got the error message in IE and the default language does not appear. However, the solution just suggested by someone else to change the code where the error occured to this:
var target_lang = lang_list.value;
worked in that it is now behaving correctly onclick and the default search is English, though I am still perplexed as to why the value of ENglish does not appear in the dropdown, but the behavior is okay.
0
 

Author Closing Comment

by:kairosmix
ID: 31581186
I changed the code to your suggestion and it worked.!!! Thank you!!
 though I am still perplexed as to why the value of ENglish does not appear in the dropdown, but the behavior is okay and that was what I needed most!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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)
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

803 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