1. No Profile Picture
    Super Moderator
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2009
    Hartford, WI
    Rep Power

    Placement of AJAX response

    I am running an AJAX process to query my DB and return 2 textboxes with the queried items to take place of text boxes currently on the page. Everything runs fine EXCEPT where the coding seems to land. I intend it to replace the innerHTML within a DIV tag, but the original 2 blank text boxes remain, and the 2 new ones appear even above the drop-down calling this function. If I make a different selection from my drop-down, the 2 textboxes returned from AJAX do update. Any ideas? Thanks in advance.

    SELECT box triggers and DIV to be replaced...
                                  <TABLE id="sick" style="display: none;">
                                      <TD style="text-align: right;width: 110px;"><H3>Name:&nbsp;</H3></TD>
                                      <TD colspan="2">
                                        <SELECT style="width: 150px;" onchange="live(this.value)">
                                          <OPTION>Select a name...</OPTION>
                                          <OPTION value="msanchez">Maria</OPTION>
                                          <OPTION value="ddeitsch">Dave</OPTION>
                                    <DIV id="userInfo">
                                      <TD style="text-align: right;"><H3>Department:&nbsp;</H3></TD>
                                      <TD colspan="2">
                                        <INPUT type="text" name="dept" value="" disabled />
                                      <TD style="text-align: right;"><H3>Manager:&nbsp;</H3></TD>
                                      <TD colspan="2">
                                        <INPUT type="text" name="mgr" value="" disabled />
                            function live(str) {
                              if(str == "") {
                                document.getElementById("userInfo").innerHTML = "";
                              if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                                xmlhttp = new XMLHttpRequest();
                              } else { // code for IE6, IE5
                                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                              xmlhttp.onreadystatechange = function() {
                                if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                                  document.getElementById("userInfo").innerHTML = xmlhttp.responseText;
    And the live.php returning the 2 new boxes...
    PHP Code:
    $q $_GET['q'];
    $statement $link->prepare("SELECT `Department`, `Manager` FROM `userpass` WHERE `Username` = ?");
      while (
    $statement->fetch()) {
    $var['department'] = $col1;
    $var['manager'] = $col2;
    '                                <TR>
                                      <TD style="text-align: right;"><H3>Department:&nbsp;</H3></TD>
                                      <TD colspan="2">
                                        <INPUT type="text" name="dept" value="' 
    $var['department'] . '" disabled />
                                      <TD style="text-align: right;"><H3>Manager:&nbsp;</H3></TD>
                                      <TD colspan="2">
                                        <INPUT type="text" name="mgr" value="' 
    $var['manager'] . '" disabled />

    Last edited by Triple_Nothing; April 3rd, 2013 at 01:36 PM.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    USA (verifiably)
    Rep Power
    What you're describing is the result of the browser automatically correcting invalidly nested elements. It seems you need a reminder of what was said in one of your previous threads:
    Originally Posted by Triple_Nothing
    Originally Posted by Kravvitz
    <tr> elements may not be direct children of a <div> element. Perhaps you should be using <tbody> elements instead of the <div>s.
    Kravvitz was right with his first comment. I was placing the 'id' in my DIV tags, and found out the inner TR and TD items were not direct children of such. So, I just made individual tables of the 2 sets of 3 rows I was trying to swap, and applied the 'id' to the TABLE tag of each one. This worked out just fine.
    I should forewarn you that in IE the innerHTML is readonly on <tbody> elements.

    What I would recommend is changing your PHP to output a JSON object and then use DOM methods like createElement() and appendChild() to build the new elements instead of using innerHTML. Though in this case, it's even much simpler to just update the values of the two text fields directly.

    Also it would be better to use a <th> (table header) element instead of a <td> that only contains an <h3>.
    Last edited by Kravvitz; April 3rd, 2013 at 02:26 PM.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo