Having trouble with list box in firefox using javascript/ajax

[bennettj]

Hello i'm relatively new to web programming and i have been giving the task of moving one of my VB programs over to a web format. I generally use google chrome and that has been what i've been testing my web page in. Yesterday i got everything in my web application working great so i decided to check out what it looks like in IE, before it just seemed to be cosmetic, but i noticed it didn't refresh properly like it did in chrome. it wasn't a big deal but i wanted to see how it works in Firefox and i noticed that it won't populate a list box for me. here is the code below. Basically i use ajax to open another page which runs some SQL code then spits bad a list of dates to add to a list box called lstDates.

                 var response = http.responseText;
             var datearray= new Array();
               document.getElementById("lstDates").options.length=0;        
             if(response.indexOf('|' != -1)) {
                    datearray = response.split('|');
                    var datelen = datearray.length;        
            }
 
////////////////////////////////////////////
///////For loop to go through////
//////datesarray and adds to//
/////lstDates listbox////////////
//////////////////////////////////////
             for(var i=0; i<datelen - 1; i++){
                 document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));
            }

Sorry if this code isn't perfect, like i said i'm new to this and i'm open to any suggestions on how to make this work across multiple browsers. also i'd love to give you guys the url to check it out, but it's only used for out intranet. Thanks for any help.

Jon

[RamananKalirajan]

Hi,

document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));

This piece of code will be working only in firefox, it wont be working in IE

so try this

if(window.ActiveXObject)
{
document.getElementById("lstDates").add(new Option(datearray[i],datearray[i],0));
}
else
{
document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));
}
 
 

Thanks and Regards
Ramanan Kalirajan

[acoder]

I would not recommend using that kind of code. If you're going to use feature/object detection, use the object that you're planning on using. Here, that wouldn't work because both sets of browsers (standard and non-standard use the add method), so use try/catch.

See http://bytes.com/topic/javascript/in...rk-expected-ie

[drhowarddrfine]

Please note that id names may not begin with a number.

[bennettj]

thank you all for your help, but still not working. I'll lay out all my issues since you pointed out that it wouldn't work in IE. Basically this program is to keep track of tardies and absences at our work place. This particular code is for a page that modifies dates. The dates get populated with the tardy/absent dates based on what radio button is selected. They can then select any dates and chose to; delete, toggle(switch from one to the other), add FMLA hrs to it, or change the dates. After you select the date and the action and fill out any other info you hit the submit button and it'll run the SQL to make the appropriate changes. After the update date is made i loop back through to repopulate the date list box to reflect the newest changes.

Here is how each browser reacts with my original code:
Chrome - Everything works as intended
Firefox - list box never gets populated
IE - list box gets populated but won't reflect the changes. even if i log out of the page and back in it still keeps the original dates in the list box. if i say remove a date, then try to toggle it i'll get an error because that date isn't available to move. so it's doing all the SQL stuff, just not updating.

here is the code i got from you guys that didn't work. Both of them made it so dates don't show up for any browser:

//                if(window.ActiveXObject)
//                {
//                    document.getElementById("lstDates").add(new Option(datearray[i],datearray[i],0));
//                }
//                else
//                {
//                    document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));
//                }            
                var opt = document.createElement("option");
                    opt.name = datearray[i];
                    opt.value = datearray[i];
                    var selObj = document.getElementById("lstDates");
                    try {
                         selObj.add(opt,null);
                    } catch (e) {
                           selObj.add(opt); // for IE only
                     }    

drhowarddrfine - the id is lstDates like LstDates, not a 1. if that was what your referring too.

[acoder]

Can you post the rest of your relevant code, i.e. the Ajax code, how you call it, etc.

[bennettj]

Sorry took so long, was out of town this weekend. What happens is i use the http.open to open up a php page that puts all the html code that creates the page into a php variable and returns it. Then i use inner html to write that code to a division tag. here is the radio button that runs the function to get the dates and also the code for the list box called lstdates:

      <label>
        <input type=\"radio\" name=\"rdgtype\" value=\"A\" id=\"rdgabta_0\"  checked=\"true\" onClick=\"sndReq('mod',0,1)\"/>
        Absent</label>
      <br />
      <label>
        <input type=\"radio\" name=\"rdgtype\" value=\"T\" id=\"rdgabta_1\" onClick=\"sndReq('mod',1,0)\" />
        Tardy</label>
 

      <select name=\"lstDates\" id=\"lstDates\"size=\"10\" STYLE=\"Width:100\" Width=\"100\" multiple>
        </select></td>
 

here is the sndReq function:

function sndReq(r,t,a,f) {
    report = r;
    if(r=="mod"){
        var employee = document.getElementById("empid");
        var empid = employee.options[employee.selectedIndex].value;
        http.open('get', 'http://timeclock/includes/functions.php?report=modat&tardy='+t+'&absent='+a+'&empid='+empid,false);
        http.onreadystatechange = handleResponse;
        http.send(null);
    }
    if(r=="atrpt"){
        var employee = document.getElementById("empid");
        var empid = employee.options[employee.selectedIndex].value;
        var sdate;
        var edate;
        if(document.getElementById("rdbsix").checked == 1){
            edate = curdate;
            sdate = (month - 6) + "/" + day + "/" + year;
        }
        if(document.getElementById("rdbtwelve").checked == 1){
            edate = curdate;
            sdate = month + "/" + day + "/" + (year - 1);
        }
        if(document.getElementById("rdbdates").checked == 1){
            sdate = document.getElementById("txtstartdate").value;
            edate = document.getElementById("txtenddate").value;
        }
        if(f==1){
            http.open('get', 'http://timeclock/includes/functions.php?report=fmla&empid='+empid+'&sdate='+sdate+'&edate='+edate+'&reason='+reason);
            report="fmla";        
        }
        else{
            http.open('get', 'http://timeclock/includes/functions.php?report=atrpt&tardy='+t+'&absent='+a+'&empid='+empid+'&sdate='+sdate+'&edate='+edate+'&reason='+reason);
        }
        http.onreadystatechange = handleResponse;
        http.send(null);    
    }
}
 

here is handleResponse function(i just did the portion that pertains to this problem):

        if(report=="mod"){
            var response = http.responseText;
            var datearray= new Array();
               document.getElementById("lstDates").options.length=0;        
             if(response.indexOf('|' != -1)) {
                datearray = response.split('|');
                var datelen = datearray.length;        
            }
 
//////////////////////////////////
///////For loop to go through////
//////datesarray and adds to////
/////lstDates listbox//////////
//////////////////////////////
             for(var i=0; i<datelen - 1; i++){
//                if(window.ActiveXObject)
//                {
//                    document.getElementById("lstDates").add(new Option(datearray[i],datearray[i],0));
//                }
//                else
//                {
//                    document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));
//                }            
                var opt = document.createElement("option");
                    opt.name = datearray[i];
                    opt.value = datearray[i];
                    var selObj = document.getElementById("lstDates");
                    try {
                         selObj.add(opt,null);
                    } catch (e) {
                           selObj.add(opt); // for IE only
                     }    
                 //document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));
            }
        }
 

here is the code for the submit button that is part of the php variable that writes the page to the division tag:

<input type=\"submit\" name=\"btnsubmit\" id=\"btnsubmit\" onClick=\"getmoddate()\" />
 

here is the getmoddate() function that figures out what date is picked in the lstDate list box:

function getmoddate(){
    var sel = document.getElementById("lstDates");
      var optsLength = sel.options.length;
    for(var i=0;i<optsLength;i++){
        if(sel.options[i].selected){
            d=(sel.options[i].text);
 
        }
      }
    var radios = document.getElementsByName('rdgtype');
    for(var i = 0; i < radios.length; i++)
        {
             if (radios[i].checked == true){
                    if(radios[i].value=="T") {
                        tardy = 1;
                        absent = 0;
                    }
                    else{
                        tardy = 0;
                        absent = 1;
                    }
            }
        }
    var newdate = document.getElementById("txtchange").value;
    var fmlahr = document.getElementById("txtfmla").value;
    if (fmlahr==""){
        fmlahr= 0;
        fmla= 0;
    }else if(fmlahr==0){
        fmla=0;
    }else{
        fmla=1;
    }
    modRDB();
    sndreq2(report,absent,tardy,modAction,d,newdate,fmla,fmlahr);
}
 

here is the modRDB() function to figure out what radio button is selected so you know what action needs to be taken(toggle,remove,fmla,change):

function modRDB(){
    if (document.getElementById("rdgmodi_0").checked==true){
        document.getElementById("txtfmla").style.display = 'none';
        document.getElementById("txtchange").style.display = 'none';
        modAction = "toggle";
    }
    else if(document.getElementById("rdgmodi_1").checked==true){
        document.getElementById("txtfmla").style.display = 'none';
        document.getElementById("txtchange").style.display = 'none';
        modAction = "remove";
    }
    else if(document.getElementById("rdgmodi_2").checked==true){
        document.getElementById("txtfmla").style.display = 'block';
        document.getElementById("txtchange").style.display = 'none';
        modAction = "fmla";
    }
    else if (document.getElementById("rdgmodi_3").checked==true){
        document.getElementById("txtfmla").style.display = 'none';
        document.getElementById("txtchange").style.display = 'block';
        modAction = "change";
    }
    report="modat2";    
}
 

here is the sndReq2 function that sends all the variables to a php page called functions that runs all my update and insert queries through out the program and then returns if the updates/inserts are completed:

function sndreq2(r,a,t,m,od,nd,fmla,fmlahr){
    report = r;
    if(report=="modat2"){
        var employee = document.getElementById("empid");
        var empid = employee.options[employee.selectedIndex].value;
        http.open('get', 'http://timeclock/includes/functions.php?report=modat2&action='+m+'&odate='+od+'&ndate='+nd+'&empid='+empid+'&absent='+a+'&tardy='+t+'&fmla='+fmla+'&fmlahrs='+fmlahr,false);
        http.onreadystatechange = handleResponse;
        http.send(null);
    }
    sndReq('mod',t,a);
}
 

sorry that this code is probably sloppy or not the best way. i've never taken an ajax class and took a javascript class about 6 years ago so i'm a little rusty. i'm doing most of this from reading an ajax book. normally i get the program working then go back and make the code look a little better.

Thanks again for all the help.
Jon

[bennettj]

sorry double post and couldn't find any way to delete it.

[acoder]

Instead of the add function, try:

selObj.options[i]= new Option(datearray[i],datearray[i]);

One other thing: your for loop condition needs looking at. Is it correct, from 0 to less than length-1 would loop till 1 less than the length?

[bennettj]

thanks for the help, but nothing is working yet. i use firebug to debug FF and it shows the correct data coming back it's just not populating the textarea correctly.

as for the for loop the reason it goes to datelen - 1 is because the last element in the array is blank. the php code adds all the dates to a string that is divided by a "|". so i split it up when the date string comes back and the last element will put in a blank.

[acoder]

Have you tried it like this?

var selObj = document.getElementById("lstDates");
for(var i=0; i<datelen - 1; i++){
    selObj.options[i]= new Option(datearray[i],datearray[i]);
}

Also, you mention a textarea - where's that in the code?

[bennettj]

<select name=\"lstDates\" id=\"lstDates\"size=\"10\" STYLE=\"Width:100\" Width=\"100\" multiple>
        </select>

maybe it's not a text area but just a text box that allows multiple lines. Like i said i'm new to web programming so i may have stated it wrong. i'll try you're loop above today and let you know how it works. thanks again for all the help.

[bennettj]

just tried your suggestion and it didn't work:( here is some things i'm noticing. in IE it won't update after i change/update a date in the list and if i open up a new tab in the same browser it won't reflect the change, but if i close the browser and re open IE the change is there. Could there be some sort of caching going on?

with FF i'm using firebug to debug and it always brings back the correct data, it just doesn't populate lstDates. so maybe the way i made the element doesn't work in FF?

Thanks again

[DMsy2]

It is crude but effective to put an alert() in the loop to show the data being set so you can actually see what data IE is using.

If it is caching then the webservice sending the data needs to add a no-cache meta or something like that.

[acoder]

There's a space missing here:

id=\"lstDates\"size=\"10\"

I don't know if that might be a cause. Also, I assume that you're using PHP or some other language to output the HTML because of the escaped quotes.

I made an example script and the code worked fine.

[bennettj]

ah yeah the alert(), i used that alot to get it working originally but didn't think about it after i got it working in chrome. i'll try that out. not sure what a no-cache meta is but i'll look into it. thanks.

[bennettj]

yeah i use php to create a variable with all html in it. then i use the innerHTML to post it to a Division tag on my web page. i'll check the space and see if that does the trick.

are you saying you took all my code and created a sample script and it all worked fine in IE and FF?

Thanks

[acoder]

I didn't take all your code. Since you mentioned that Firefox definitely returns the correct response, I assumed that part was OK and came up with this very simple script:

<html>
<head>
<script>
function sub() {
    dates = "1|2|3|";
    datearray = dates.split("|");
    datelen= datearray.length;
    var selObj = document.getElementById("lstDates");
    selObj.options.length=0;
    for(var i=0; i<datelen-1; i++){
        selObj.options[i]= new Option(datearray[i],datearray[i]);                 
    }
}
</script>
</head>
<body>
<form>
<select name="lstDates" id="lstDates" size="10" style="width:100px" multiple></select>
<input type="button" onclick="sub()">
</form>
</body>
</html>

[bennettj]

Thank i put this in a new page and it did work great. Knowing that i looked back further in my code to see if there was something else messed up and i noticed that it doesn't see to call the function, or at least firebug doesn't go there when it hits that line of code. This is where i call my function:

    if(r=="mod"){
        var employee = document.getElementById("empid");
        var empid = employee.options[employee.selectedIndex].value;
        http.open('get', 'http://timeclock/includes/functions.php?report=modat&tardy='+t+'&absent='+a+'&empid='+empid,false);
        http.onreadystatechange = handleResponse;
        http.send(null);
    }
 

it goes through this fine but when it gets to:

http.onreadystatechange = handleResponse;
 

it doesn't jump down to my handle response function, it passes over it. i'm not sure if this is just firebug or what because it seems like that's where i would get my results from which it shows i'm getting.

here is the whole handleResponse function:

function handleResponse() {
    if(http.readyState == 4){
        if(report=="modat2"){
            var response = http.responseText;
            response = response.toString();
            alert(response);
        }
        if(report=="mod"){
            var response = http.responseText;
            var datearray= new Array();
               document.getElementById("lstDates").options.length=0;        
             if(response.indexOf('|' != -1)) {
                datearray = response.split('|');
                var datelen = datearray.length;        
            }
 
//////////////////////////////////
///////For loop to go through////
//////datesarray and adds to////
/////lstDates listbox//////////
//////////////////////////////
            var selObj = document.getElementById("lstDates");
            selObj.options.length=0;
             for(var i=0; i<datelen - 1; i++){
                 selObj.options[i]= new Option(datearray[i],datearray[i]);
             }
//                if(window.ActiveXObject)
//                {
//                    document.getElementById("lstDates").add(new Option(datearray[i],datearray[i],0));
//                }
//                else
//                {
//                    document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));
//                }            
//                var opt = document.createElement("option");
//                 document.getElementById("lstDates").options.add(opt);
//                    opt.text = datearray[i];
//                    opt.value = datearray[i];
                    //var selObj = document.getElementById("lstDates");
//                    try {
//                         selObj.options[i]= new Option(datearray[i],datearray[i]);
//                    } catch (e) {
//                           selObj.options[i]= new Option(datearray[i],datearray[i]);
//                     }    
                 //document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));
        }
        if(report=="atrpt"){
            var reasonarray = new Array();
            var reasons = "";
            var dates1 = "";
            var response = http.responseText;
            response = response.toString();
            if(response.length > 2){
                    document.getElementById("header1").innerHTML = "<BR>";
                    document.getElementById("header2").innerHTML = "<BR>";
                    document.getElementById("header3").innerHTML = "<BR>";
                    document.getElementById("detail1").innerHTML = "<BR>";
                    document.getElementById("detail2").innerHTML = "<BR>";
                    document.getElementById("detail3").innerHTML = "<BR>";
                if(reason == 1){
                    reasonarray = response.split("|");
                    reasonlen = reasonarray.length;
                    for(var i = 0; i<reasonlen - 1; i++){
                        dates1 = dates1 + reasonarray[i];
                        reasons = reasons + reasonarray[i+1];
                        i++;
                    }
                    document.getElementById("header2").innerHTML = "<H1><u>DATES</u></H1>";
                    document.getElementById("detail2").innerHTML = dates1;
                    document.getElementById("header3").innerHTML = "<H1><u>Reasons</u></H1>";
                    document.getElementById("detail3").innerHTML = reasons;
 
                }
                else{
                    document.getElementById("header2").innerHTML = "<H1><u>DATES</u></H1>";
                    document.getElementById("detail2").innerHTML = response;
                    document.getElementById("detail3").innerHTML = "<br>";
                }
            }
            else{
                document.getElementById("header1").innerHTML = "<BR>";
                document.getElementById("header2").innerHTML = "<BR>";
                document.getElementById("header3").innerHTML = "<BR>";
                document.getElementById("detail1").innerHTML = "<BR>";
                document.getElementById("detail2").innerHTML = "<BR>";
                document.getElementById("detail3").innerHTML = "<BR>";
                document.getElementById("header2").innerHTML = "<H1><u>DATES</u></H1>";
                document.getElementById("detail2").innerHTML = "<h1>N/A</h1>";
                document.getElementById("detail3").innerHTML = "<br>";
            }
        }
        if(report=="fmla"){
            var reasonarray = new Array();
            var reasons = "";
            var dates1 = "";
            var fmlah = "";
            var response = http.responseText;
            response = response.toString();
            if(response.length > 2){
                    document.getElementById("header1").innerHTML = "<BR>";
                    document.getElementById("header2").innerHTML = "<BR>";
                    document.getElementById("header3").innerHTML = "<BR>";
                    document.getElementById("detail1").innerHTML = "<BR>";
                    document.getElementById("detail2").innerHTML = "<BR>";
                    document.getElementById("detail3").innerHTML = "<BR>";
                if(reason == 1){
                    reasonarray = response.split("|");
                    reasonlen = reasonarray.length;
                    for(var i = 0; i<reasonlen - 1; i++){
                        dates1 = dates1 + reasonarray[i];
                        fmlah = fmlah + reasonarray[i+1];
                        reasons = reasons + reasonarray[i+2];
                        i = i + 2;
                    }
                    document.getElementById("header1").innerHTML = "<H1><u>DATES</u></H1>";
                    document.getElementById("detail1").innerHTML = dates1;
                    document.getElementById("header2").innerHTML = "<H1><u>FMLA HRS</u></H1>";
                    document.getElementById("detail2").innerHTML = fmlah;
                    document.getElementById("header3").innerHTML = "<H1><u>Reasons</u></H1>";
                    document.getElementById("detail3").innerHTML = reasons;                    
                }
                else{
                    reasonarray = response.split("|");
                    reasonlen = reasonarray.length;
                    for(var i = 0; i<reasonlen - 1; i++){
                        dates1 = dates1 + reasonarray[i];
                        fmlah = fmlah + reasonarray[i+1];
                        i++;;
                    }
                    document.getElementById("header2").innerHTML = "<H1><u>DATES</u></H1>";
                    document.getElementById("detail2").innerHTML = dates1;
                    document.getElementById("header3").innerHTML = "<H1><u>FMLA HRS</u></H1>";
                    document.getElementById("detail3").innerHTML = fmlah;
                }
            }
            else{
 
                document.getElementById("header2").innerHTML = "<H1><u>DATES</u></H1>";
                document.getElementById("detail2").innerHTML = "<h1>N/A</h1>";
                document.getElementById("header3").innerHTML = "<H1><u>FMLA HRS</u></H1>";
                document.getElementById("detail3").innerHTML = "<h1>N/A</h1>";
            }
        }
        if(report=="addat"){
            var response = http.responseText;
            response = response.toString();
            alert(response);
        }
    }
}
 

[acoder]

Found the culprit:

http.open('get', 'http://timeclock/includes/functions.php?report=modat&tardy='+t+'&absent='+a+'&empid='+empid,false);

The third parameter should be true for an asynchronous request and for onreadystatechange to make sense.

[bennettj]

THANK YOU!!! This worked great for FF and now i have chrome and FF working as intended, IE is still having problems refreshing after a date has been modified, but that is problem for a new topic:) Thank you for sticking with me.

also about the false/true parameter there i have the false in a few other places because, what i understood, is if it was set to false it wouldn't complete the next line of code until the data had been passed back from the http.open. is that correct?

[acoder]

also about the false/true parameter there i have the false in a few other places because, what i understood, is if it was set to false it wouldn't complete the next line of code until the data had been passed back from the http.open. is that correct?

Yes. It would make it a synchronous request. Then the browser would be locked until a response is received. So you could just put a call to handleResponse() on the next line.

However, an asynchronous request is more useful because you have more control, it's more flexible, the browser isn't locked, better user experience and you can make simultaneous requests.

As for the IE problem, one solution is to make it a unique request by appending a timestamp. You can also use no-cache headers as mentioned earlier. One other possibility you could try is a POST request, but that would involve changing your server-side code.