Seeking help on why changing innerHTML...

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • scubak1w1
    New Member
    • Feb 2008
    • 53

    Seeking help on why changing innerHTML...

    .... 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.ht m>:
    [CODE=html]
    <html>

    <head>
    <script type="text/javascript">
    function changeText() {
    document.getEle mentById('site_ info').innerHTM L = 'Fred Flinstone';
    }
    </script>
    </head>

    <body>

    <p>
    Welcome to the site <b id='juicy_text' >dude</b>
    </p>

    <input type='button' onclick='change Text()' value='Change Text'/>

    </body>

    </html>[/CODE]

    -------------
    DOESN'T WORK ON THIS PAGE - <test.php>

    [CODE=html]<html>

    <head>

    <title>Try Adjusting based on Selection and PostgreSQL connection</title>

    <script language="JavaS cript" src="select_sit e.js"></script> //not included as irrevalant for this forced test

    <script type="text/javascript">
    function fun_manual_chan ge_text() {
    document.getEle mentById('juicy _text').innerHT ML = 'Fred Flinstone';
    }
    </script>

    </head>

    <body>

    <?php

    //set up the PostgreSQL database connection used throughout
    $db_connect=pg_ connect("host=[munge] dbname=[munge] user=[munge] password=[munge]") or die(pg_last_err or($db_conn));

    //SUM of SITE data for analytical data showing on web page
    $SQL_Query = " SELECT site_id, site_id_abrev
    FROM d_site
    WHERE country<>'NA'
    ORDER BY site_id
    ";
    $query_result=p g_query($db_con nect, $SQL_Query);
    $counter=0;
    while($row_data =pg_fetch_array ($query_result) ) {
    $counter+=1;
    $ary_sites[$counter] = $row_data["site_id"];
    $ary_abbrevs[$counter] = $row_data["site_id_ab rev"];
    }

    ?>

    <h2 align="center" style="color:gr een">Try AJAX with Strathmore Data out of PostgreSQL</h2>

    <form>

    <b>Select a Site:</b><br />

    <select name="sites" onchange="fun_g et_site_details (this.value)">
    <?php
    $counter=0;
    foreach($ary_si tes as $dummy) {
    $counter+=1;
    print "<option value=\"".$ary_ abbrevs[$counter]."\">".$ary_sit es[$counter]."</option>";
    }
    ?>
    </select>

    <br />
    <br />

    <input type='button' onclick='fun_ma nual_change_tex t' value='Change Text Manually'/>

    </form>

    <br />
    <br />

    <p>
    <b>Site Info.:</b><br />
    <div id='site_info'>
    Some info for the selected site will be listed here...
    </div>
    </p>

    </body>

    </html>[/CODE]
    Last edited by eWish; Mar 4 '08, 01:52 AM. Reason: Please use Code tags
  • gits
    Recognized Expert Moderator Expert
    • May 2007
    • 5388

    #2
    1. where is the node with id="juicy_text " in your php-page?
    2. you assign:

    onclick='fun_ma nual_change_tex t'

    which should be

    onclick='fun_ma nual_change_tex t();'

    kind regards

    Comment

    • scubak1w1
      New Member
      • Feb 2008
      • 53

      #3
      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.respons etext

      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.ph p>

      Code:
      <html>
      
        <head>
          
          <title>Try Adjusting based on Site Selection and PostgreSQL connection</title>
          
          <script language="JavaScript" src="select_locations.js"></script>
        
        </head>
      
        <body>
          
          <?php
            
            //set up the PostgreSQL database connection used throughout
            $db_connect=pg_connect("host=[munge] dbname=[munge] user=[munge] password=[munge]") or die(pg_last_error($db_conn));
          
            //SUM of SITE data for analytical data showing on web page
            $SQL_Query =  " SELECT d_site.site_id, d_site.site_id_abrev
                            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
                            GROUP BY d_site.site_id, d_site.site_id_abrev
                            ORDER BY d_site.site_id
                          ";
            $query_result=pg_query($db_connect, $SQL_Query);
            $counter=0;
            while($row_data=pg_fetch_array($query_result)) {
                                                           $counter+=1;
                                                           $ary_sites[$counter] = $row_data["site_id"];
                                                           $ary_abbrevs[$counter] = $row_data["site_id_abrev"];
                                                           }
            
          ?>
          
          <h2 align="center" style="color:darkgreen">Try AJAX with [munge] (Analytical) Data out of PostgreSQL</h2>
          
          <form>
            
            <b>First, Select a Site:</b><br />
            
            <select name="sites" onchange="fun_get_locations(this.value)">
              <?php
                $counter=0;
                foreach($ary_sites as $dummy) {
                                              $counter+=1;
                                              print "<option value=\"".$ary_abbrevs[$counter]."\">".$ary_sites[$counter]."</option>";
                                              }
              ?>
            </select>
            <br />
            <br />
            
            <b>Then, Select a Location:</b><br />
            <select name="locations">
              <div id="options_locations">
                <option>[select the site to populate this pulldown]</option>
              </div>
            </select>
            
            <br />
            <br />
          
          </form>
          
        </body>
      
      </html>

      -----------------
      'JS' PAGE <select_locatio ns.js>

      Code:
      var xmlHttp;
      
      function fun_get_locations(str) {
                                            
                                          xmlHttp = fun_get_xmlHttp_object();
                                            
                                          if(xmlHttp == null)  {
                                                              alert("Browser does not support AJAX!");
                                                              return;
                                                              }
                                          
                                          var url
                                          url = "get_available_locations.php";
                                          url = url + "?site_abbrev=" + str;
                                          xmlHttp.onreadystatechange = fun_state_changed();
                                          xmlHttp.open('GET',url,true);
                                          xmlHttp.send(null);
                                          alert('url: '+ url);
                                          alert('Response: '+xmlHttp.responseText);
                                            
                                          }
      
      function fun_state_changed() {
                                    if(xmlHttp.readystate == 4)   {
                                                                  document.getElementByID('options_locations').innerHTML = xmlHttp.responseText;
                                                                  }
                                    }
      
      function fun_get_xmlHttp_object()  {
                                            
                                          var xmlHttp = null;
                                            
                                          try {
                                              //non-IE, modern browsers
                                              xmlHttp = new XMLHttpRequest();
                                              }
                                              catch (e)  {
                                                          //IE
                                                          try {
                                                              //IE 6 & 7
                                                              xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                                                              }
                                                              catch (e){
                                                                        //IE 5.5+
                                                                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                                                                        }
                                                          }
                                            
                                          return xmlHttp;
                                            
                                          }

      -----------------
      'PHP' PAGE FOR LOCATION SELECTION <get_available_ locations.php>

      Code:
      <?php
      
        //grab the site abbreviation value 'off' the URL
        $site_abbrev = $_GET['site_abbrev'];
          
        //set up the PostgreSQL database connection used throughout
        $db_connect=pg_connect("host=Strathmore dbname=strathmore_data user=LAN_access password=Juicy42") or die(pg_last_error($db_conn));
          
        //SUM of LOCATION data for analytical data showing on web page, for the user-selected site
            $SQL_Query =  " SELECT d_location.location_id
                            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
                            WHERE d_site.site_id_abrev = '".$site_abbrev."'
                            GROUP BY d_location.location_id
                            ORDER BY d_location.location_id
                          ";
        $query_result=pg_query($db_connect, $SQL_Query);
        while($row_data=pg_fetch_array($query_result))  {
                                                        $locations_at_selected_site[] = $row_data["location_id"];
                                                        }
          
        //put the locations into the <select> field for the locations pulldown
        foreach($locations_at_selected_site as $location_string)  {
                                                                  print "<option value=\"$location_string\">$location_string</option>";
                                                                  }
        
      ?>

      Comment

      • gits
        Recognized Expert Moderator Expert
        • May 2007
        • 5388

        #4
        hi ...

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

        [CODE=javascript]xmlHttp.onready statechange = fun_state_chang ed;[/CODE]
        kind regards

        Comment

        • nathj
          Recognized Expert Contributor
          • May 2007
          • 937

          #5
          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

          Comment

          • scubak1w1
            New Member
            • Feb 2008
            • 53

            #6
            I commented out the call to xmlHttp.onready statechange function and moved the innerHtml out of the fun_state_chang ed function and it works... now to find out why! :-)

            Thanks for your prompting...

            -----------------
            Code:
            #
            function fun_get_locations(str) {
            #
                                                 
            #
                                                xmlHttp = fun_get_xmlHttp_object();
            #
                                                 
            #
                                                if(xmlHttp == null)  {
            #
                                                                    alert("Browser does not support AJAX!");
            #
                                                                    return;
            #
                                                                    }
            #
                                               
            #
                                                var url
            #
                                                url = "get_available_locations.php";
            #
                                                url = url + "?site_abbrev=" + str;
            #
                                                //xmlHttp.onreadystatechange = fun_state_changed();
            #
                                                xmlHttp.open('GET',url,true);
            #
                                                xmlHttp.send(null);
            #
                                                //alert('url: '+ url);
            #
                                                //alert('Response: '+xmlHttp.responseText);
            #
                                                 document.getElementByID('options_locations').innerHTML = xmlHttp.responseText;
            #
                                                }
            #
             
            #
            function fun_state_changed() {
            #
                                          if(xmlHttp.readystate == 4)   {
            #
                                                                        document.getElementByID('options_locations').innerHTML = xmlHttp.responseText;
            }

            Comment

            • scubak1w1
              New Member
              • Feb 2008
              • 53

              #7
              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.rea dystate == 4)" to "if(xmlHttp.rea dyState == 4)"

              argh!! :-)

              Thanks everyone!

              Off to build the real page...

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

              [CODE=js]
              var xmlHttp;

              function fun_get_locatio ns(str_selected ) {

              xmlHttp = fun_get_xmlHttp _object();

              if(xmlHttp == null) {
              alert("Browser does not support AJAX!");
              return;
              }

              var str_url
              str_url = "get_available_ locations.php";
              str_url = str_url + "?site_abbr ev=" + str_selected;

              xmlHttp.onready statechange = fun_state_chang ed;
              xmlHttp.open("G ET",str_url,tru e);
              xmlHttp.send(nu ll);

              }

              function fun_state_chang ed() {
              if(xmlHttp.read yState == 4) {
              //i.e., if the data is retrieved from the server
              if(xmlHttp.stat us == 200) {
              //representing the OK status
              document.getEle mentById("locs" ).innerHTML = xmlHttp.respons eText;
              }
              }

              }

              function fun_get_xmlHttp _object() {

              var xmlHttp = null;

              try {
              //non-IE, modern browsers
              xmlHttp = new XMLHttpRequest( );
              }
              catch (e) {
              //IE
              try {
              //IE 6 & 7
              xmlHttp = new ActiveXObject(" Msxml2.XMLHTTP" );
              }
              catch (e){
              //IE 5.5+
              xmlHttp = new ActiveXObject(" Microsoft.XMLHT TP");
              }
              }

              return xmlHttp;

              }
              [/CODE]

              Comment

              Working...