By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,570 Members | 999 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,570 IT Pros & Developers. It's quick & easy.

Having trouble with list box in firefox using javascript/ajax

P: 11
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.

Expand|Select|Wrap|Line Numbers
  1.                  var response = http.responseText;
  2.              var datearray= new Array();
  3.                document.getElementById("lstDates").options.length=0;        
  4.              if(response.indexOf('|' != -1)) {
  5.                     datearray = response.split('|');
  6.                     var datelen = datearray.length;        
  7.             }
  8.  
  9. ////////////////////////////////////////////
  10. ///////For loop to go through////
  11. //////datesarray and adds to//
  12. /////lstDates listbox////////////
  13. //////////////////////////////////////
  14.              for(var i=0; i<datelen - 1; i++){
  15.                  document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));
  16.             }
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
Nov 19 '09 #1

✓ answered by acoder

Found the culprit:
Expand|Select|Wrap|Line Numbers
  1. 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.

Share this Question
Share on Google+
21 Replies


RamananKalirajan
100+
P: 607
Hi,

Expand|Select|Wrap|Line Numbers
  1. 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

Expand|Select|Wrap|Line Numbers
  1. if(window.ActiveXObject)
  2. {
  3. document.getElementById("lstDates").add(new Option(datearray[i],datearray[i],0));
  4. }
  5. else
  6. {
  7. document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));
  8. }
  9.  
  10.  

Thanks and Regards
Ramanan Kalirajan
Nov 20 '09 #2

acoder
Expert Mod 15k+
P: 16,027
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
Nov 20 '09 #3

drhowarddrfine
Expert 5K+
P: 7,435
Please note that id names may not begin with a number.
Nov 20 '09 #4

P: 11
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:

Expand|Select|Wrap|Line Numbers
  1. //                if(window.ActiveXObject)
  2. //                {
  3. //                    document.getElementById("lstDates").add(new Option(datearray[i],datearray[i],0));
  4. //                }
  5. //                else
  6. //                {
  7. //                    document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));
  8. //                }            
  9.                 var opt = document.createElement("option");
  10.                     opt.name = datearray[i];
  11.                     opt.value = datearray[i];
  12.                     var selObj = document.getElementById("lstDates");
  13.                     try {
  14.                          selObj.add(opt,null);
  15.                     } catch (e) {
  16.                            selObj.add(opt); // for IE only
  17.                      }    
drhowarddrfine - the id is lstDates like LstDates, not a 1. if that was what your referring too.
Nov 20 '09 #5

acoder
Expert Mod 15k+
P: 16,027
Can you post the rest of your relevant code, i.e. the Ajax code, how you call it, etc.
Nov 21 '09 #6

P: 11
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:

Expand|Select|Wrap|Line Numbers
  1.       <label>
  2.         <input type=\"radio\" name=\"rdgtype\" value=\"A\" id=\"rdgabta_0\"  checked=\"true\" onClick=\"sndReq('mod',0,1)\"/>
  3.         Absent</label>
  4.       <br />
  5.       <label>
  6.         <input type=\"radio\" name=\"rdgtype\" value=\"T\" id=\"rdgabta_1\" onClick=\"sndReq('mod',1,0)\" />
  7.         Tardy</label>
  8.  
Expand|Select|Wrap|Line Numbers
  1.       <select name=\"lstDates\" id=\"lstDates\"size=\"10\" STYLE=\"Width:100\" Width=\"100\" multiple>
  2.         </select></td>
  3.  
here is the sndReq function:
Expand|Select|Wrap|Line Numbers
  1. function sndReq(r,t,a,f) {
  2.     report = r;
  3.     if(r=="mod"){
  4.         var employee = document.getElementById("empid");
  5.         var empid = employee.options[employee.selectedIndex].value;
  6.         http.open('get', 'http://timeclock/includes/functions.php?report=modat&tardy='+t+'&absent='+a+'&empid='+empid,false);
  7.         http.onreadystatechange = handleResponse;
  8.         http.send(null);
  9.     }
  10.     if(r=="atrpt"){
  11.         var employee = document.getElementById("empid");
  12.         var empid = employee.options[employee.selectedIndex].value;
  13.         var sdate;
  14.         var edate;
  15.         if(document.getElementById("rdbsix").checked == 1){
  16.             edate = curdate;
  17.             sdate = (month - 6) + "/" + day + "/" + year;
  18.         }
  19.         if(document.getElementById("rdbtwelve").checked == 1){
  20.             edate = curdate;
  21.             sdate = month + "/" + day + "/" + (year - 1);
  22.         }
  23.         if(document.getElementById("rdbdates").checked == 1){
  24.             sdate = document.getElementById("txtstartdate").value;
  25.             edate = document.getElementById("txtenddate").value;
  26.         }
  27.         if(f==1){
  28.             http.open('get', 'http://timeclock/includes/functions.php?report=fmla&empid='+empid+'&sdate='+sdate+'&edate='+edate+'&reason='+reason);
  29.             report="fmla";        
  30.         }
  31.         else{
  32.             http.open('get', 'http://timeclock/includes/functions.php?report=atrpt&tardy='+t+'&absent='+a+'&empid='+empid+'&sdate='+sdate+'&edate='+edate+'&reason='+reason);
  33.         }
  34.         http.onreadystatechange = handleResponse;
  35.         http.send(null);    
  36.     }
  37. }
  38.  
here is handleResponse function(i just did the portion that pertains to this problem):
Expand|Select|Wrap|Line Numbers
  1.         if(report=="mod"){
  2.             var response = http.responseText;
  3.             var datearray= new Array();
  4.                document.getElementById("lstDates").options.length=0;        
  5.              if(response.indexOf('|' != -1)) {
  6.                 datearray = response.split('|');
  7.                 var datelen = datearray.length;        
  8.             }
  9.  
  10. //////////////////////////////////
  11. ///////For loop to go through////
  12. //////datesarray and adds to////
  13. /////lstDates listbox//////////
  14. //////////////////////////////
  15.              for(var i=0; i<datelen - 1; i++){
  16. //                if(window.ActiveXObject)
  17. //                {
  18. //                    document.getElementById("lstDates").add(new Option(datearray[i],datearray[i],0));
  19. //                }
  20. //                else
  21. //                {
  22. //                    document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));
  23. //                }            
  24.                 var opt = document.createElement("option");
  25.                     opt.name = datearray[i];
  26.                     opt.value = datearray[i];
  27.                     var selObj = document.getElementById("lstDates");
  28.                     try {
  29.                          selObj.add(opt,null);
  30.                     } catch (e) {
  31.                            selObj.add(opt); // for IE only
  32.                      }    
  33.                  //document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));
  34.             }
  35.         }
  36.  
here is the code for the submit button that is part of the php variable that writes the page to the division tag:
Expand|Select|Wrap|Line Numbers
  1. <input type=\"submit\" name=\"btnsubmit\" id=\"btnsubmit\" onClick=\"getmoddate()\" />
  2.  
here is the getmoddate() function that figures out what date is picked in the lstDate list box:
Expand|Select|Wrap|Line Numbers
  1. function getmoddate(){
  2.     var sel = document.getElementById("lstDates");
  3.       var optsLength = sel.options.length;
  4.     for(var i=0;i<optsLength;i++){
  5.         if(sel.options[i].selected){
  6.             d=(sel.options[i].text);
  7.  
  8.         }
  9.       }
  10.     var radios = document.getElementsByName('rdgtype');
  11.     for(var i = 0; i < radios.length; i++)
  12.         {
  13.              if (radios[i].checked == true){
  14.                     if(radios[i].value=="T") {
  15.                         tardy = 1;
  16.                         absent = 0;
  17.                     }
  18.                     else{
  19.                         tardy = 0;
  20.                         absent = 1;
  21.                     }
  22.             }
  23.         }
  24.     var newdate = document.getElementById("txtchange").value;
  25.     var fmlahr = document.getElementById("txtfmla").value;
  26.     if (fmlahr==""){
  27.         fmlahr= 0;
  28.         fmla= 0;
  29.     }else if(fmlahr==0){
  30.         fmla=0;
  31.     }else{
  32.         fmla=1;
  33.     }
  34.     modRDB();
  35.     sndreq2(report,absent,tardy,modAction,d,newdate,fmla,fmlahr);
  36. }
  37.  
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):
Expand|Select|Wrap|Line Numbers
  1. function modRDB(){
  2.     if (document.getElementById("rdgmodi_0").checked==true){
  3.         document.getElementById("txtfmla").style.display = 'none';
  4.         document.getElementById("txtchange").style.display = 'none';
  5.         modAction = "toggle";
  6.     }
  7.     else if(document.getElementById("rdgmodi_1").checked==true){
  8.         document.getElementById("txtfmla").style.display = 'none';
  9.         document.getElementById("txtchange").style.display = 'none';
  10.         modAction = "remove";
  11.     }
  12.     else if(document.getElementById("rdgmodi_2").checked==true){
  13.         document.getElementById("txtfmla").style.display = 'block';
  14.         document.getElementById("txtchange").style.display = 'none';
  15.         modAction = "fmla";
  16.     }
  17.     else if (document.getElementById("rdgmodi_3").checked==true){
  18.         document.getElementById("txtfmla").style.display = 'none';
  19.         document.getElementById("txtchange").style.display = 'block';
  20.         modAction = "change";
  21.     }
  22.     report="modat2";    
  23. }
  24.  
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:
Expand|Select|Wrap|Line Numbers
  1. function sndreq2(r,a,t,m,od,nd,fmla,fmlahr){
  2.     report = r;
  3.     if(report=="modat2"){
  4.         var employee = document.getElementById("empid");
  5.         var empid = employee.options[employee.selectedIndex].value;
  6.         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);
  7.         http.onreadystatechange = handleResponse;
  8.         http.send(null);
  9.     }
  10.     sndReq('mod',t,a);
  11. }
  12.  
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
Nov 23 '09 #7

P: 11
sorry double post and couldn't find any way to delete it.
Nov 23 '09 #8

acoder
Expert Mod 15k+
P: 16,027
Instead of the add function, try:
Expand|Select|Wrap|Line Numbers
  1. 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?
Nov 30 '09 #9

P: 11
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.
Dec 4 '09 #10

acoder
Expert Mod 15k+
P: 16,027
Have you tried it like this?
Expand|Select|Wrap|Line Numbers
  1. var selObj = document.getElementById("lstDates");
  2. for(var i=0; i<datelen - 1; i++){
  3.     selObj.options[i]= new Option(datearray[i],datearray[i]);
  4. }
Also, you mention a textarea - where's that in the code?
Dec 7 '09 #11

P: 11
Expand|Select|Wrap|Line Numbers
  1. <select name=\"lstDates\" id=\"lstDates\"size=\"10\" STYLE=\"Width:100\" Width=\"100\" multiple>
  2.         </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.
Dec 7 '09 #12

P: 11
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
Dec 7 '09 #13

P: 15
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.
Dec 8 '09 #14

acoder
Expert Mod 15k+
P: 16,027
There's a space missing here:
Expand|Select|Wrap|Line Numbers
  1. 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.
Dec 8 '09 #15

P: 11
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.
Dec 8 '09 #16

P: 11
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
Dec 8 '09 #17

acoder
Expert Mod 15k+
P: 16,027
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:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script>
  4. function sub() {
  5.     dates = "1|2|3|";
  6.     datearray = dates.split("|");
  7.     datelen= datearray.length;
  8.     var selObj = document.getElementById("lstDates");
  9.     selObj.options.length=0;
  10.     for(var i=0; i<datelen-1; i++){
  11.         selObj.options[i]= new Option(datearray[i],datearray[i]);                 
  12.     }
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <form>
  18. <select name="lstDates" id="lstDates" size="10" style="width:100px" multiple></select>
  19. <input type="button" onclick="sub()">
  20. </form>
  21. </body>
  22. </html>
Dec 11 '09 #18

P: 11
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:

Expand|Select|Wrap|Line Numbers
  1.     if(r=="mod"){
  2.         var employee = document.getElementById("empid");
  3.         var empid = employee.options[employee.selectedIndex].value;
  4.         http.open('get', 'http://timeclock/includes/functions.php?report=modat&tardy='+t+'&absent='+a+'&empid='+empid,false);
  5.         http.onreadystatechange = handleResponse;
  6.         http.send(null);
  7.     }
  8.  
it goes through this fine but when it gets to:
Expand|Select|Wrap|Line Numbers
  1. http.onreadystatechange = handleResponse;
  2.  
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:

Expand|Select|Wrap|Line Numbers
  1. function handleResponse() {
  2.     if(http.readyState == 4){
  3.         if(report=="modat2"){
  4.             var response = http.responseText;
  5.             response = response.toString();
  6.             alert(response);
  7.         }
  8.         if(report=="mod"){
  9.             var response = http.responseText;
  10.             var datearray= new Array();
  11.                document.getElementById("lstDates").options.length=0;        
  12.              if(response.indexOf('|' != -1)) {
  13.                 datearray = response.split('|');
  14.                 var datelen = datearray.length;        
  15.             }
  16.  
  17. //////////////////////////////////
  18. ///////For loop to go through////
  19. //////datesarray and adds to////
  20. /////lstDates listbox//////////
  21. //////////////////////////////
  22.             var selObj = document.getElementById("lstDates");
  23.             selObj.options.length=0;
  24.              for(var i=0; i<datelen - 1; i++){
  25.                  selObj.options[i]= new Option(datearray[i],datearray[i]);
  26.              }
  27. //                if(window.ActiveXObject)
  28. //                {
  29. //                    document.getElementById("lstDates").add(new Option(datearray[i],datearray[i],0));
  30. //                }
  31. //                else
  32. //                {
  33. //                    document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));
  34. //                }            
  35. //                var opt = document.createElement("option");
  36. //                 document.getElementById("lstDates").options.add(opt);
  37. //                    opt.text = datearray[i];
  38. //                    opt.value = datearray[i];
  39.                     //var selObj = document.getElementById("lstDates");
  40. //                    try {
  41. //                         selObj.options[i]= new Option(datearray[i],datearray[i]);
  42. //                    } catch (e) {
  43. //                           selObj.options[i]= new Option(datearray[i],datearray[i]);
  44. //                     }    
  45.                  //document.getElementById("lstDates").add(new Option(datearray[i],datearray[i]));
  46.         }
  47.         if(report=="atrpt"){
  48.             var reasonarray = new Array();
  49.             var reasons = "";
  50.             var dates1 = "";
  51.             var response = http.responseText;
  52.             response = response.toString();
  53.             if(response.length > 2){
  54.                     document.getElementById("header1").innerHTML = "<BR>";
  55.                     document.getElementById("header2").innerHTML = "<BR>";
  56.                     document.getElementById("header3").innerHTML = "<BR>";
  57.                     document.getElementById("detail1").innerHTML = "<BR>";
  58.                     document.getElementById("detail2").innerHTML = "<BR>";
  59.                     document.getElementById("detail3").innerHTML = "<BR>";
  60.                 if(reason == 1){
  61.                     reasonarray = response.split("|");
  62.                     reasonlen = reasonarray.length;
  63.                     for(var i = 0; i<reasonlen - 1; i++){
  64.                         dates1 = dates1 + reasonarray[i];
  65.                         reasons = reasons + reasonarray[i+1];
  66.                         i++;
  67.                     }
  68.                     document.getElementById("header2").innerHTML = "<H1><u>DATES</u></H1>";
  69.                     document.getElementById("detail2").innerHTML = dates1;
  70.                     document.getElementById("header3").innerHTML = "<H1><u>Reasons</u></H1>";
  71.                     document.getElementById("detail3").innerHTML = reasons;
  72.  
  73.                 }
  74.                 else{
  75.                     document.getElementById("header2").innerHTML = "<H1><u>DATES</u></H1>";
  76.                     document.getElementById("detail2").innerHTML = response;
  77.                     document.getElementById("detail3").innerHTML = "<br>";
  78.                 }
  79.             }
  80.             else{
  81.                 document.getElementById("header1").innerHTML = "<BR>";
  82.                 document.getElementById("header2").innerHTML = "<BR>";
  83.                 document.getElementById("header3").innerHTML = "<BR>";
  84.                 document.getElementById("detail1").innerHTML = "<BR>";
  85.                 document.getElementById("detail2").innerHTML = "<BR>";
  86.                 document.getElementById("detail3").innerHTML = "<BR>";
  87.                 document.getElementById("header2").innerHTML = "<H1><u>DATES</u></H1>";
  88.                 document.getElementById("detail2").innerHTML = "<h1>N/A</h1>";
  89.                 document.getElementById("detail3").innerHTML = "<br>";
  90.             }
  91.         }
  92.         if(report=="fmla"){
  93.             var reasonarray = new Array();
  94.             var reasons = "";
  95.             var dates1 = "";
  96.             var fmlah = "";
  97.             var response = http.responseText;
  98.             response = response.toString();
  99.             if(response.length > 2){
  100.                     document.getElementById("header1").innerHTML = "<BR>";
  101.                     document.getElementById("header2").innerHTML = "<BR>";
  102.                     document.getElementById("header3").innerHTML = "<BR>";
  103.                     document.getElementById("detail1").innerHTML = "<BR>";
  104.                     document.getElementById("detail2").innerHTML = "<BR>";
  105.                     document.getElementById("detail3").innerHTML = "<BR>";
  106.                 if(reason == 1){
  107.                     reasonarray = response.split("|");
  108.                     reasonlen = reasonarray.length;
  109.                     for(var i = 0; i<reasonlen - 1; i++){
  110.                         dates1 = dates1 + reasonarray[i];
  111.                         fmlah = fmlah + reasonarray[i+1];
  112.                         reasons = reasons + reasonarray[i+2];
  113.                         i = i + 2;
  114.                     }
  115.                     document.getElementById("header1").innerHTML = "<H1><u>DATES</u></H1>";
  116.                     document.getElementById("detail1").innerHTML = dates1;
  117.                     document.getElementById("header2").innerHTML = "<H1><u>FMLA HRS</u></H1>";
  118.                     document.getElementById("detail2").innerHTML = fmlah;
  119.                     document.getElementById("header3").innerHTML = "<H1><u>Reasons</u></H1>";
  120.                     document.getElementById("detail3").innerHTML = reasons;                    
  121.                 }
  122.                 else{
  123.                     reasonarray = response.split("|");
  124.                     reasonlen = reasonarray.length;
  125.                     for(var i = 0; i<reasonlen - 1; i++){
  126.                         dates1 = dates1 + reasonarray[i];
  127.                         fmlah = fmlah + reasonarray[i+1];
  128.                         i++;;
  129.                     }
  130.                     document.getElementById("header2").innerHTML = "<H1><u>DATES</u></H1>";
  131.                     document.getElementById("detail2").innerHTML = dates1;
  132.                     document.getElementById("header3").innerHTML = "<H1><u>FMLA HRS</u></H1>";
  133.                     document.getElementById("detail3").innerHTML = fmlah;
  134.                 }
  135.             }
  136.             else{
  137.  
  138.                 document.getElementById("header2").innerHTML = "<H1><u>DATES</u></H1>";
  139.                 document.getElementById("detail2").innerHTML = "<h1>N/A</h1>";
  140.                 document.getElementById("header3").innerHTML = "<H1><u>FMLA HRS</u></H1>";
  141.                 document.getElementById("detail3").innerHTML = "<h1>N/A</h1>";
  142.             }
  143.         }
  144.         if(report=="addat"){
  145.             var response = http.responseText;
  146.             response = response.toString();
  147.             alert(response);
  148.         }
  149.     }
  150. }
  151.  
Dec 11 '09 #19

acoder
Expert Mod 15k+
P: 16,027
Found the culprit:
Expand|Select|Wrap|Line Numbers
  1. 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.
Dec 11 '09 #20

P: 11
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?
Dec 11 '09 #21

acoder
Expert Mod 15k+
P: 16,027
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.
Dec 12 '09 #22

Post your reply

Sign in to post your reply or Sign up for a free account.