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

Seeking help on why changing innerHTML...

scubak1w1
P: 53
.... will work on one page and yet not another... simplified for ease of reading, banging my head.

I tried it using a response.text from an xmlHttp type "request" - would not alter the id=''

I got the "clean" response.text as I poked it into a JS alert box to see it...

so tried forcing it with a manual submit button using some nonense text - wil not change

built a super simple change with a manual submit button - works!

Thanks in advance from me and my skull with a new flat spot,
GREG...


-----
WORKS ON THIS PAGE <simple_test.htm>:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3.   <head>
  4.       <script type="text/javascript">
  5.         function changeText() {
  6.                                document.getElementById('site_info').innerHTML = 'Fred Flinstone';
  7.                                }
  8.       </script>
  9.   </head>
  10.  
  11.   <body>
  12.  
  13.     <p>
  14.       Welcome to the site <b id='juicy_text'>dude</b>
  15.     </p> 
  16.  
  17.     <input type='button' onclick='changeText()' value='Change Text'/>
  18.  
  19.   </body>
  20.  
  21. </html>
-------------
DOESN'T WORK ON THIS PAGE - <test.php>

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3.   <head>
  4.  
  5.     <title>Try Adjusting based on Selection and PostgreSQL connection</title>
  6.  
  7.     <script language="JavaScript" src="select_site.js"></script> //not included as irrevalant for this forced test
  8.  
  9.     <script type="text/javascript">
  10.         function fun_manual_change_text()  {
  11.                                             document.getElementById('juicy_text').innerHTML = 'Fred Flinstone';
  12.                                             }
  13.     </script>
  14.  
  15.   </head>
  16.  
  17.   <body>
  18.  
  19.     <?php
  20.  
  21.       //set up the PostgreSQL database connection used throughout
  22.       $db_connect=pg_connect("host=[munge] dbname=[munge] user=[munge] password=[munge]") or die(pg_last_error($db_conn));
  23.  
  24.       //SUM of SITE data for analytical data showing on web page
  25.       $SQL_Query =  " SELECT site_id, site_id_abrev
  26.                       FROM d_site
  27.                       WHERE country<>'NA'
  28.                       ORDER BY site_id
  29.                     ";
  30.       $query_result=pg_query($db_connect, $SQL_Query);
  31.       $counter=0;
  32.       while($row_data=pg_fetch_array($query_result)) {
  33.                                                      $counter+=1;
  34.                                                      $ary_sites[$counter] = $row_data["site_id"];
  35.                                                      $ary_abbrevs[$counter] = $row_data["site_id_abrev"];
  36.                                                      }
  37.  
  38.     ?>
  39.  
  40.     <h2 align="center" style="color:green">Try AJAX with Strathmore Data out of PostgreSQL</h2>
  41.  
  42.     <form>
  43.  
  44.       <b>Select a Site:</b><br />
  45.  
  46.       <select name="sites" onchange="fun_get_site_details(this.value)">
  47.         <?php
  48.           $counter=0;
  49.           foreach($ary_sites as $dummy) {
  50.                                         $counter+=1;
  51.                                         print "<option value=\"".$ary_abbrevs[$counter]."\">".$ary_sites[$counter]."</option>";
  52.                                         }
  53.         ?>
  54.       </select>
  55.  
  56.       <br />
  57.       <br />
  58.  
  59.       <input type='button' onclick='fun_manual_change_text' value='Change Text Manually'/>
  60.  
  61.     </form>
  62.  
  63.     <br />
  64.     <br />
  65.  
  66.     <p>
  67.       <b>Site Info.:</b><br /> 
  68.       <div id='site_info'>
  69.         Some info for the selected site will be listed here...
  70.       </div>
  71.     </p>
  72.  
  73.    </body>
  74.  
  75. </html>
Mar 4 '08 #1
Share this Question
Share on Google+
6 Replies


gits
Expert Mod 5K+
P: 5,367
1. where is the node with id="juicy_text" in your php-page?
2. you assign:

onclick='fun_manual_change_text'

which should be

onclick='fun_manual_change_text();'

kind regards
Mar 4 '08 #2

scubak1w1
P: 53
Much appreciated... as you guessed, I have never done this before... (i) the 'juicy text' was part of my attempts to get this to work with a simple example, and (ii) adding the parentheses of course helped - cheers!

If you don't mind I, I pasted in the three files of the test I am trying to do prior to implementing this...

After the user picks the site they are interested in, only the locations on/at that site should be available in the locations pulldown - and so on down the chain - and as pulled out of a PostgreSQL database

The onchange for the site selection list seems to be firing OK, the JS is making and 'calling' the URL for the PHP page just fine with the requsite site identifer (added a JS 'alert' to 'check'), the PHP page is creating the <option></option> text OK (ditto), but the location's selection list is not being updated with the innerHTML text from the xmlHttp.responsetext

I am guessing this is a syntax issue... if someone is able to look at the code with a practiced eye... :-)

TIA! What a resource... :-)

GREG...

-----------------
'MAIN' PAGE <ajax_test_4.php>

Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3.  
  4.   <head>
  5.  
  6.     <title>Try Adjusting based on Site Selection and PostgreSQL connection</title>
  7.  
  8.     <script language="JavaScript" src="select_locations.js"></script>
  9.  
  10.   </head>
  11.  
  12.   <body>
  13.  
  14.     <?php
  15.  
  16.       //set up the PostgreSQL database connection used throughout
  17.       $db_connect=pg_connect("host=[munge] dbname=[munge] user=[munge] password=[munge]") or die(pg_last_error($db_conn));
  18.  
  19.       //SUM of SITE data for analytical data showing on web page
  20.       $SQL_Query =  " SELECT d_site.site_id, d_site.site_id_abrev
  21.                       FROM (r_analyteclass INNER JOIN r_testoranalyte ON r_analyteclass.analyte_class = r_testoranalyte.analyte_class) INNER JOIN (((d_site INNER JOIN d_location ON d_site.site_id = d_location.site_id) INNER JOIN d_sample ON d_location.location_id = d_sample.location_id) INNER JOIN d_sampleresult ON d_sample.sample_id = d_sampleresult.sample_id) ON r_testoranalyte.test_or_analyte_id = d_sampleresult.test_or_analyte_id
  22.                       GROUP BY d_site.site_id, d_site.site_id_abrev
  23.                       ORDER BY d_site.site_id
  24.                     ";
  25.       $query_result=pg_query($db_connect, $SQL_Query);
  26.       $counter=0;
  27.       while($row_data=pg_fetch_array($query_result)) {
  28.                                                      $counter+=1;
  29.                                                      $ary_sites[$counter] = $row_data["site_id"];
  30.                                                      $ary_abbrevs[$counter] = $row_data["site_id_abrev"];
  31.                                                      }
  32.  
  33.     ?>
  34.  
  35.     <h2 align="center" style="color:darkgreen">Try AJAX with [munge] (Analytical) Data out of PostgreSQL</h2>
  36.  
  37.     <form>
  38.  
  39.       <b>First, Select a Site:</b><br />
  40.  
  41.       <select name="sites" onchange="fun_get_locations(this.value)">
  42.         <?php
  43.           $counter=0;
  44.           foreach($ary_sites as $dummy) {
  45.                                         $counter+=1;
  46.                                         print "<option value=\"".$ary_abbrevs[$counter]."\">".$ary_sites[$counter]."</option>";
  47.                                         }
  48.         ?>
  49.       </select>
  50.       <br />
  51.       <br />
  52.  
  53.       <b>Then, Select a Location:</b><br />
  54.       <select name="locations">
  55.         <div id="options_locations">
  56.           <option>[select the site to populate this pulldown]</option>
  57.         </div>
  58.       </select>
  59.  
  60.       <br />
  61.       <br />
  62.  
  63.     </form>
  64.  
  65.   </body>
  66.  
  67. </html>
  68.  
  69.  

-----------------
'JS' PAGE <select_locations.js>

Expand|Select|Wrap|Line Numbers
  1.  
  2. var xmlHttp;
  3.  
  4. function fun_get_locations(str) {
  5.  
  6.                                     xmlHttp = fun_get_xmlHttp_object();
  7.  
  8.                                     if(xmlHttp == null)  {
  9.                                                         alert("Browser does not support AJAX!");
  10.                                                         return;
  11.                                                         }
  12.  
  13.                                     var url
  14.                                     url = "get_available_locations.php";
  15.                                     url = url + "?site_abbrev=" + str;
  16.                                     xmlHttp.onreadystatechange = fun_state_changed();
  17.                                     xmlHttp.open('GET',url,true);
  18.                                     xmlHttp.send(null);
  19.                                     alert('url: '+ url);
  20.                                     alert('Response: '+xmlHttp.responseText);
  21.  
  22.                                     }
  23.  
  24. function fun_state_changed() {
  25.                               if(xmlHttp.readystate == 4)   {
  26.                                                             document.getElementByID('options_locations').innerHTML = xmlHttp.responseText;
  27.                                                             }
  28.                               }
  29.  
  30. function fun_get_xmlHttp_object()  {
  31.  
  32.                                     var xmlHttp = null;
  33.  
  34.                                     try {
  35.                                         //non-IE, modern browsers
  36.                                         xmlHttp = new XMLHttpRequest();
  37.                                         }
  38.                                         catch (e)  {
  39.                                                     //IE
  40.                                                     try {
  41.                                                         //IE 6 & 7
  42.                                                         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  43.                                                         }
  44.                                                         catch (e){
  45.                                                                   //IE 5.5+
  46.                                                                   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  47.                                                                   }
  48.                                                     }
  49.  
  50.                                     return xmlHttp;
  51.  
  52.                                     }
  53.  
  54.  

-----------------
'PHP' PAGE FOR LOCATION SELECTION <get_available_locations.php>

Expand|Select|Wrap|Line Numbers
  1.  
  2. <?php
  3.  
  4.   //grab the site abbreviation value 'off' the URL
  5.   $site_abbrev = $_GET['site_abbrev'];
  6.  
  7.   //set up the PostgreSQL database connection used throughout
  8.   $db_connect=pg_connect("host=Strathmore dbname=strathmore_data user=LAN_access password=Juicy42") or die(pg_last_error($db_conn));
  9.  
  10.   //SUM of LOCATION data for analytical data showing on web page, for the user-selected site
  11.       $SQL_Query =  " SELECT d_location.location_id
  12.                       FROM (r_analyteclass INNER JOIN r_testoranalyte ON r_analyteclass.analyte_class = r_testoranalyte.analyte_class) INNER JOIN (((d_site INNER JOIN d_location ON d_site.site_id = d_location.site_id) INNER JOIN d_sample ON d_location.location_id = d_sample.location_id) INNER JOIN d_sampleresult ON d_sample.sample_id = d_sampleresult.sample_id) ON r_testoranalyte.test_or_analyte_id = d_sampleresult.test_or_analyte_id
  13.                       WHERE d_site.site_id_abrev = '".$site_abbrev."'
  14.                       GROUP BY d_location.location_id
  15.                       ORDER BY d_location.location_id
  16.                     ";
  17.   $query_result=pg_query($db_connect, $SQL_Query);
  18.   while($row_data=pg_fetch_array($query_result))  {
  19.                                                   $locations_at_selected_site[] = $row_data["location_id"];
  20.                                                   }
  21.  
  22.   //put the locations into the <select> field for the locations pulldown
  23.   foreach($locations_at_selected_site as $location_string)  {
  24.                                                             print "<option value=\"$location_string\">$location_string</option>";
  25.                                                             }
  26.  
  27. ?>
  28.  
  29.  
Mar 4 '08 #3

gits
Expert Mod 5K+
P: 5,367
hi ...

here you made the mistake in the other direction ;) the onreadystatechange awaits a function reference like this:

Expand|Select|Wrap|Line Numbers
  1. xmlHttp.onreadystatechange = fun_state_changed;
kind regards
Mar 5 '08 #4

nathj
Expert 100+
P: 938
Hi,

I noticed in the code that you use getElementByID, this should be getElementById - not the lowercase 'd'. Also the code seems to suggest inner HTML, there should be no space but this may simply be formatting of the box here on TheScripts - I thought it was worth a mention.

The final point of consideration relates to the output of the php file. I would normally build up a string variable in this kind of file that contains all the out put. the final line of the code would then simply echo that string. this gives one point of output rather than several.

Other than these issue my reading of the code showed no problems - perhaps someone more practiced and skilled than me will find something else.

The one question I have is are you getting any errors from the code at all?

Cheers
nathj
Mar 5 '08 #5

scubak1w1
P: 53
I commented out the call to xmlHttp.onreadystatechange function and moved the innerHtml out of the fun_state_changed function and it works... now to find out why! :-)

Thanks for your prompting...

-----------------
Expand|Select|Wrap|Line Numbers
  1. #
  2. function fun_get_locations(str) {
  3. #
  4.  
  5. #
  6.                                     xmlHttp = fun_get_xmlHttp_object();
  7. #
  8.  
  9. #
  10.                                     if(xmlHttp == null)  {
  11. #
  12.                                                         alert("Browser does not support AJAX!");
  13. #
  14.                                                         return;
  15. #
  16.                                                         }
  17. #
  18.  
  19. #
  20.                                     var url
  21. #
  22.                                     url = "get_available_locations.php";
  23. #
  24.                                     url = url + "?site_abbrev=" + str;
  25. #
  26.                                     //xmlHttp.onreadystatechange = fun_state_changed();
  27. #
  28.                                     xmlHttp.open('GET',url,true);
  29. #
  30.                                     xmlHttp.send(null);
  31. #
  32.                                     //alert('url: '+ url);
  33. #
  34.                                     //alert('Response: '+xmlHttp.responseText);
  35. #
  36.                                      document.getElementByID('options_locations').innerHTML = xmlHttp.responseText;
  37. #
  38.                                     }
  39. #
  40.  
  41. #
  42. function fun_state_changed() {
  43. #
  44.                               if(xmlHttp.readystate == 4)   {
  45. #
  46.                                                             document.getElementByID('options_locations').innerHTML = xmlHttp.responseText;
  47. }
Mar 6 '08 #6

scubak1w1
P: 53
OK, that was of course BOGUS! :-)

it was a simple capitalization issue in the readyState of the xmlHttp!!

That is, I simply changed "if(xmlHttp.readystate == 4)" to "if(xmlHttp.readyState == 4)"

argh!! :-)

Thanks everyone!

Off to build the real page...

-------------

Expand|Select|Wrap|Line Numbers
  1. var xmlHttp;
  2.  
  3. function fun_get_locations(str_selected)   {
  4.  
  5.                                     xmlHttp = fun_get_xmlHttp_object();
  6.  
  7.                                     if(xmlHttp == null)  {
  8.                                                         alert("Browser does not support AJAX!");
  9.                                                         return;
  10.                                                         }
  11.  
  12.                                     var str_url
  13.                                     str_url = "get_available_locations.php";
  14.                                     str_url = str_url + "?site_abbrev=" + str_selected;
  15.  
  16.                                     xmlHttp.onreadystatechange = fun_state_changed;
  17.                                     xmlHttp.open("GET",str_url,true);
  18.                                     xmlHttp.send(null);
  19.  
  20.                                     }
  21.  
  22. function fun_state_changed()  {
  23.                                if(xmlHttp.readyState == 4) {
  24.                                                             //i.e., if the data is retrieved from the server
  25.                                                             if(xmlHttp.status == 200) {
  26.                                                                                       //representing the OK status
  27.                                                                                       document.getElementById("locs").innerHTML = xmlHttp.responseText;
  28.                                                                                       }
  29.                                                             }
  30.  
  31.                                 }
  32.  
  33. function fun_get_xmlHttp_object()  {
  34.  
  35.                                     var xmlHttp = null;
  36.  
  37.                                     try {
  38.                                         //non-IE, modern browsers
  39.                                         xmlHttp = new XMLHttpRequest();
  40.                                         }
  41.                                         catch (e)  {
  42.                                                     //IE
  43.                                                     try {
  44.                                                         //IE 6 & 7
  45.                                                         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  46.                                                         }
  47.                                                         catch (e){
  48.                                                                   //IE 5.5+
  49.                                                                   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  50.                                                                   }
  51.                                                     }
  52.  
  53.                                     return xmlHttp;
  54.  
  55.                                     }
  56.  
Mar 7 '08 #7

Post your reply

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