Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > answers

javascript refresh a select box without refreshing page

Familiar Sight
  
Join Date: Jun 2008
Posts: 164
#1: Nov 21 '08
Hi, I am trying to improve the usabilty of an app I have written and it would be great if I could refresh the content of my select boxes without refreshing the whole page.

I am sure this could be done. perhaps using iFrames. Can anyone shed some light?
RamananKalirajan's Avatar
Needs Regular Fix
  
Join Date: Mar 2008
Location: Chennai - India
Posts: 348
#2: Nov 21 '08

re: javascript refresh a select box without refreshing page

Refreshing the Select Box withut refreshing the page means in what way you want to refresh the select box. Wether are u adding the Database values into that select box or user defined values in that page should be added to the select box.

Regards
Ramanan Kalirajan
Familiar Sight
  
Join Date: Jun 2008
Posts: 164
#3: Nov 21 '08

re: javascript refresh a select box without refreshing page

the select box is populated from my database. when I add a new item to my database i want to see the values in the select box without refreshing.
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#4: Nov 21 '08

re: javascript refresh a select box without refreshing page

so you want to push an update to a webapp when your database changes without user interaction? you just need to use an ajax-call and poll the db with it ... you have to decide how often you need that and you may use setInterval() for this purpose ... you just cannot really push things to the client ... the client has to request the update ...

kind regards
Familiar Sight
  
Join Date: Jun 2008
Posts: 164
#5: Nov 21 '08

re: javascript refresh a select box without refreshing page

Yeah i have the function of adding to my database on the same page so when I add a new item to my database I want the selectbox which is a list of records to now contain the new one. Can you show me how this is done with ajax?
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#6: Nov 21 '08

re: javascript refresh a select box without refreshing page

that is not nessecary then ... you could add the option to the DB with the call and besides that you just need to add it to the node with dom-methods to avoid requests/traffic ... what have you done so far?
Familiar Sight
  
Join Date: Jun 2008
Posts: 164
#7: Nov 21 '08

re: javascript refresh a select box without refreshing page

Its is neccessary because I have three select boxes linked together. I need to turn my requests into ajax requests. Thanks for your help anyway. Below are the unctions I am currently using to populate my select boxes

Expand|Select|Wrap|Line Numbers
  1. <?php
  2.  
  3. require "config.php"; // database connection details 
  4. echo "
  5.  
  6. function fillType(){
  7.     //this function is used to fill the companies in main.php on load
  8. ";    
  9.  
  10. $q11=mysql_query("SELECT type FROM module_type");
  11. echo mysql_error();
  12. while($nt11=mysql_fetch_array($q11)){
  13. echo "addOption(document.form1.newtype, '$nt11[type]', '$nt11[type]');";}// end of while
  14. ?>
  15. }
  16.  
  17. function fillType2() {
  18.  
  19. removeAllOptions(document.form1.selecttype);
  20. addOption(document.form1.selecttype, "", "Select", "");
  21. <?php    
  22. $q77=mysql_query("SELECT type FROM module_type");
  23. echo mysql_error();
  24. while($nt77=mysql_fetch_array($q77)){
  25. echo "addOption(document.form1.selecttype, '$nt77[type]', '$nt77[type]');";}// end of while
  26. ?>
  27. }
  28.  
  29. function fillNewSub() {
  30.     removeAllOptions(document.form1.newsub);
  31.     addOption(document.form1.newsub, "", "Select", "");
  32.  
  33.     <?php
  34.         $q22=mysql_query("select distinct(type) from subtype"); 
  35.         while($nt22=mysql_fetch_array($q22)){
  36.             echo "if(document.form1.newtype.value == '$nt22[type]'){";
  37.             $q32=mysql_query("select subtype from subtype where type='$nt22[type]' order by subtype asc");
  38.             while($nt32=mysql_fetch_array($q32)){
  39.             echo "addOption(document.form1.newsub,'$nt32[subtype]', '$nt32[subtype]');";
  40.  
  41.             } // end of while loop
  42.             echo "}"; // end of JS if condition
  43.         }
  44. ?>
  45. }
  46.  
  47. function fillselectsub(){
  48.     removeAllOptions(document.form1.selectsub);
  49.     addOption(document.form1.selectsub, "", "Select", "");
  50.  
  51.     <?php
  52.         $q55=mysql_query("select distinct(type) from subtype"); 
  53.         while($nt55=mysql_fetch_array($q55)){
  54.             echo "if(document.form1.selecttype.value == '$nt55[type]'){";
  55.             $q56=mysql_query("select subtype from subtype where type='$nt55[type]' order by subtype asc");
  56.             while($nt56=mysql_fetch_array($q56)){
  57.             echo "addOption(document.form1.selectsub,'$nt56[subtype]', '$nt56[subtype]');";
  58.  
  59.             } // end of while loop
  60.             echo "}"; // end of JS if condition
  61.         }
  62. ?>
  63. }
  64.  
  65. function fillselectmod(){
  66.     removeAllOptions(document.form1.selectmod);
  67.     addOption(document.form1.selectmod, "", "Select", "");
  68.  
  69.     <?php
  70.         $q44=mysql_query("select distinct(subtype) from module"); 
  71.         while($nt44=mysql_fetch_array($q44)){
  72.             echo "if(document.form1.selectsub.value == '$nt44[subtype]'){";
  73.             $q45=mysql_query("select module_name from module where subtype='$nt44[subtype]' order by module_name asc");
  74.             while($nt45=mysql_fetch_array($q45)){
  75.             echo "addOption(document.form1.selectmod,'$nt45[module_name]', '$nt45[module_name]');";
  76.  
  77.             } // end of while loop
  78.             echo "}"; // end of JS if condition
  79.         }
  80. ?>
  81. }
  82.  
  83.  
  84. function removeAllOptions(selectbox)
  85. {
  86.     var i;
  87.     for(i=selectbox.options.length-1;i>=0;i--)
  88.     {
  89.         //selectbox.options.remove(i);
  90.         selectbox.remove(i);
  91.     }
  92. }
  93.  
  94. function addOption(selectbox, value, text )
  95. {
  96.     var optn = document.createElement("OPTION");
  97.     optn.text = text;
  98.     optn.value = value;
  99.  
  100.     selectbox.options.add(optn);
  101. }
  102.  
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,126
#8: Nov 21 '08

re: javascript refresh a select box without refreshing page

so you mean you have to update all three select-nodes when adding a new option to one of them? as i said ... then you need something that does the following steps:

1. user adds an option
2. start your ajax-call and insert the option to the db
3. when inserted retrieve the data from the db
4. send back the result
5. the onreadystatechange-handler could now update the list-nodes
Familiar Sight
  
Join Date: Jun 2008
Posts: 164
#9: Nov 21 '08

re: javascript refresh a select box without refreshing page

ok heres what I have for the first select. I can get the values into my program but how do I put the values into the select?

Expand|Select|Wrap|Line Numbers
  1. function ajax_filltype(){
  2.     var x=0;
  3.     var url = "filltype.php?x=" + escape(x);
  4.     url = url + "&dummy=" + new Date().getTime();
  5.     request.open("GET", url, true);
  6.     request.onreadystatechange = populateselecttype;
  7.     request.send(null); 
  8. }
  9. function populateselecttype() {
  10.     if (request.readyState == 4) {
  11.         var response = request.responseText;
  12.         var splitResult = response.split("%%");
  13.         for (i=0; i<splitResult.length-1; i++){
  14.             alert(splitResult[i]);
  15.             //add each option i to select box
  16.         }
  17.     }
  18.  
  19. }
php
Expand|Select|Wrap|Line Numbers
  1. <?php
  2.  
  3. require "config.php";
  4.  
  5. $q1=mysql_query("SELECT type FROM module_type");
  6. while($r = mysql_fetch_array($q1)){
  7.         echo $r['type'] . '%%';
  8.  
  9.   }
  10. ?>
Familiar Sight
  
Join Date: Jun 2008
Posts: 164
#10: Nov 21 '08

re: javascript refresh a select box without refreshing page

never mind it was just

Expand|Select|Wrap|Line Numbers
  1. function populateselecttype() {
  2.     if (request.readyState == 4) {
  3.         var response = request.responseText;
  4.         var splitResult = response.split("%%");
  5.         for (i=0; i<splitResult.length-1; i++){
  6.             document.form1.selecttype.options[document.form1.selecttype.length] = new Option(splitResult[i], splitResult[i]);
  7.         }
  8.     }
  9.  
  10. }
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,295 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved