SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE listbox script problem, works in firefox

    From an earlier thread, I am working on the following form and I had it working fine until I tried IE.

    The form is:
    http://www.thebrasse.com/lotro/lotro-quest-entry.php

    The problem is with the "starting zone" and "involved zones" manipulation buttons about halfway down the page. The user is meant to select a zone and subzone on the left, and then click the ">" buttons to move the item to the right listbox or text area with the format of "Subzone | region" .This works well in firefox 2.0, but IE is returning empty or null for the value of the subzone dropdown. I have tried changing it to take the 'text' property, but that created a script error.

    The script that handles all the buttons (where I think the problem is) is below. The first function there, 'setstart' is what the top ">" button calls onclick.

    Code:
    ///////////////////////////////////////
    //code for zone-subzone to list buttons
    ///////////////////////////////////////
    var spacer=" | ";
    function setstart(){
      var x=document.getElementById("zone").selectedIndex;
      var text1 = document.getElementById("subzone").value;
      var text2 = document.getElementById("zone").options[x].text;
      document.getElementById("startingzone").value=text1.concat(spacer, text2);
    }
    function clearstart(){
      document.getElementById("startingzone").value="";
    }
    function addtoinvolved(){
      var list = document.getElementById("involvedzones");
      var x=document.getElementById("zone").selectedIndex;
      var text1 = document.getElementById("subzone").value;
      var text2 = document.getElementById("zone").options[x].text;
      var fulltext=text1.concat(spacer, text2);
      var len = list.length -1;
      var duplicate=false;
      for(i=len; i>=0; i--){
        if (list.options[i].value==fulltext) {duplicate=true;}
      }  
      if (!duplicate) {
        var newitem = document.createElement("option");
        newitem.value=fulltext;
        newitem.appendChild(document.createTextNode(fulltext));
        var other=list.options[0];
        list.insertBefore(newitem,other);
      }
      selectAll(list);
    }
    function removefrominvolved() {
      var list=document.getElementById("involvedzones");
      var x=list.selectedIndex;
      list.options[x]=null;
      selectAll(list);
    }
    function clearinvolved() {
        var list=document.getElementById("involvedzones");
    	var len = list.length -1;
        for(i=len; i>=0; i--){
          list.options[i]=null;
        }  
    }
    //////////////////////////////
    //part of above and below code
    //////////////////////////////
    function selectAll(list){
        var len = list.length -1;
        for(i=len; i>=0; i--){
          list.options[i].selected=true;
        }
    }
    ////////////////////////////
    //code for multi item select
    ////////////////////////////
    var selectedList;
    var availableList;
    function delAttribute(leftlist,rightlist){
       availableList = document.getElementById(leftlist);
       selectedList = document.getElementById(rightlist);
       var selIndex = selectedList.selectedIndex;
       if(selIndex < 0)
          return;
       availableList.appendChild(
          selectedList.options.item(selIndex))
       selectNone(selectedList,availableList);
       selectAll(selectedList);
    }
    function addAttribute(leftlist,rightlist){
       availableList = document.getElementById(leftlist);
       selectedList = document.getElementById(rightlist);
       var addIndex = availableList.selectedIndex;
       if(addIndex < 0)
          return;
       selectedList.appendChild(availableList.options.item(addIndex));
       selectNone(selectedList,availableList);
       selectAll(selectedList);
    }
    function selectNone(list1,list2){
        list1.selectedIndex = -1;
        list2.selectedIndex = -1;
        addIndex = -1;
        selIndex = -1;
    }
    function delAll(leftlist,rightlist){
        availableList = document.getElementById(leftlist);
        selectedList = document.getElementById(rightlist);
        var len = selectedList.length -1;
        for(i=len; i>=0; i--){
            availableList.appendChild(selectedList.item(i));
        }
        selectNone(selectedList,availableList);
    }
    ////////////////////////////////////
    //Code for bbcode buttons at bottom
    ////////////////////////////////////
    function ubbc(open, end){ 
        var tArea = document.myform.writeup; 
        var isIE = (document.all)? true : false; 
        var open = (open)? open : ""; 
        var end = (end)? end : ""; 
    
        if(isIE){ 
            tArea.focus(); 
            var curSelect = document.selection.createRange(); 
            if(arguments[2]){ 
                curSelect.text = open + arguments[2] + "]" + curSelect.text + end; 
            } else { 
                curSelect.text = open + curSelect.text + end; 
            } 
        } else if(!isIE && typeof tArea.selectionStart != "undefined"){ 
            var selStart = tArea.value.substr(0, tArea.selectionStart); 
            var selEnd = tArea.value.substr(tArea.selectionEnd, tArea.value.length); 
            var curSelection = tArea.value.replace(selStart, '').replace(selEnd, ''); 
            if(arguments[2]){ 
                tArea.value = selStart + open + arguments[2] + "]" + curSelection + end + selEnd; 
            } else { 
                tArea.value = selStart + open + curSelection + end + selEnd; 
            } 
        } else { 
            tArea.value += (arguments[2])? open + arguments[2] + "]" + end : open + end; 
        } 
    }

    The script to populate the subzone chained listbox is here:
    Code:
    window.onload = function(){
      if(!document.getElementsByTagName || !document.createTextNode) return;
      initCs();
    }
    var request = false;
    /*@cc_on @*/
    /*@if (@_jscript_version >= 5)
    try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e2) {
    request = false;
    }
    }
    @end @*/
    if (!request && typeof XMLHttpRequest != 'undefined') {
    request = new XMLHttpRequest();
    }
    
    function fillSelect(zone) {
    var url = "csa_ajax.php?zone=" + escape(zone);
    request.open("GET", url, true);
    request.onreadystatechange = go;
    request.send(null);
    }
    
    function go() {
     if (request.readyState == 4) {
      if (request.status == 200) {
       var response = request.responseText;
       var list=document.getElementById("subzone");
       var cities=response.split('|');
       for (i=1; i<cities.length; i++) {
          var x=document.createElement('option');
          var y=document.createTextNode(cities[i]);
          x.appendChild(y);
          list.appendChild(x);
       }
      }
     }
    }
    
    function initCs() {
    var zone=document.getElementById('zone');
    zone.onchange=function() {
     if(this.value!="") {
      var list=document.getElementById("subzone");
      while (list.childNodes[0]) {
    list.removeChild(list.childNodes[0])
    }
      fillSelect(this.value);
      }
     }
     fillSelect(zone.value);
    }
    Any suggestions? Are there other properties for that subzone listbox that I should be using for IE other than .text and .value?
    Last edited by Alluvian; Apr 2, 2007 at 13:34.

  2. #2
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AHA! Figured it out. I started comparing the two different methods of adding an item to a list that the two different code snippets used (from two different sources) and noticed the first set a .value property where the second did not.

    Fixed by simply adding
    x.value=cities[i];
    right after the object was declared in the 'go' function.

    Thanks to anyone who was looking at the problem!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •