473,394 Members | 1,879 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

Seeking help on why changing innerHTML...

scubak1w1
.... 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
6 1364
gits
5,390 Expert Mod 4TB
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
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
5,390 Expert Mod 4TB
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
938 Expert 512MB
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
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
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

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

Similar topics

10
by: Free-Ed, Ltd. | last post by:
I am going nuts trying to find a paragraph in a book that described how to change the text content (HTML) in a DIV. Actually I have an array of HTML strings that I want to drop into the DIV,...
55
by: Ton den Hartog | last post by:
Stupid basic question but I find it horribly imposible to find the answer elsewhere... :-( I want to have a piece of text in my HTML page and want to be able to change it in a Javascript...
8
by: Margaret MacDonald | last post by:
I'm a js novice trying to teach myself. I'm using Flanagan's 'Javascript, the definitive guide' from O'Reilly as a text. But either I'm dopier than usual or its layout doesn't match my learning...
16
by: chris | last post by:
im new to javascript but slowly getting better what i want to do is have some text on the screen and when an event happens for example click a button the text would change to what i want. how...
2
by: rpesq | last post by:
Hi, I Need help changing the content of a DIV. I sincerely researched the issue and have not found a solution except to scrap the idea and stick with the iframe code that I had been using. My...
4
by: engwar | last post by:
I'd like to know if it's possible to change the contents of a div tag based on something the user is doing. For example. If there is a text box on a page and the user types his or her name can I...
31
by: Greg Scharlemann | last post by:
Given some recent success on a simple form validation (mainly due to the kind folks in this forum), I've tried to tackle something a bit more difficult. I'm pulling data down from a database and...
1
by: Jarry | last post by:
If I take a website that has body text and <scripttags, I can do: document.body.innerHTML = document.body.innerHTML.replace("no","yes"); but if i want to change the script as such ...
7
by: wkeithwork | last post by:
I'm pulling my hair out... I have a few radio boxes where a user can choose different options and I want to show an explanation of each option after it's clicked. Here's what I have: <script...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.