#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    721
    Rep Power
    7

    Replacing table rows with returned rows


    Aight. I got a page, which seems to be working rather well, for the most part, except when I wish to replace something.
    The code below sends a request to a PHP for an updated response. Once that comes back, it should fill in/replace the empty INPUT boxes currently laid on the page.

    The blank ones start out exactly as desired, but the ones that are supposed to replace them get added oddly, and above where the target is referenced. The boxes are filled w/ correct info, so I figure the response from the fetch is correct. Any help is greatly appreciated. Thank you.

    Page viewed:
    html4strict Code:
    <TABLE id="sick" style="display: none;">
      <TR>
        <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>
          </SELECT>
        </TD>
      </TR>
      <DIV id="userInfo">
        <TR>
          <TD style="text-align: right;"><H3>Department:&nbsp;</H3></TD>
          <TD colspan="2">
            <INPUT type="text" name="dept" value="" disabled />
          </TD>
        </TR>
        <TR>
          <TD style="text-align: right;"><H3>Manager:&nbsp;</H3></TD>
          <TD colspan="2">
            <INPUT type="text" name="mgr" value="" disabled />
          </TD>
        </TR>
      </DIV>
    </TABLE>

    Fetching javascript function:
    javascript Code:
    function live(str) {
      if(str == "") {
        document.getElementById("userInfo").innerHTML = "";
        return;
      } 
      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;
        }
      }
      xmlhttp.open("GET","modules/tore/live.php?q="+str,true);
      xmlhttp.send();
    }

    Fetching php file: (live.php)
    php-brief Code:
    $statement = $link->prepare("SELECT `Department`, `Manager` FROM `userpass` WHERE `Username` = ?");
    $statement->bind_param('s', $q);
    $statement->execute();
    $statement->bind_result($col1,$col2);
    while ($statement->fetch()) {
      $var['department'] = $col1;
      $var['manager'] = $col2;
    }
    $statement->close();
     
    echo '                                <TR>
                                    <TD style="text-align: right;"><H3>Department:&nbsp;</H3></TD>
                                    <TD colspan="2">
                                      <INPUT type="text" name="dept" value="' . $var['department'] . '" disabled />
                                    </TD>
                                  </TR>
                                  <TR>
                                    <TD style="text-align: right;"><H3>Manager:&nbsp;</H3></TD>
                                    <TD colspan="2">
                                      <INPUT type="text" name="mgr" value="' . $var['manager'] . '" disabled />
                                    </TD>
                                  </TR>';
    Attached Images
    Last edited by Triple_Nothing; September 2nd, 2013 at 12:20 PM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    721
    Rep Power
    7
    Sorry to bump this. I guess if no one sees anything wrong with this, lemme just make sure I understand the whole idea right...

    1.) User selects an option from the drop-down
    2.) onChange, the value of that selection gets submitted to my live.php
    3.) live.php return 2 filled in text boxes and should replace any HTML within the userInfo DIV tag.

    Correct?

    I know most is right since what live.php is suppose to return DOES display on the page, just floats on its own instead of replacing the current items.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Your markup contains a serious error. Non-table related elements may only go outside a table or within a table-cell, not as a wrapper for some of the rows. What you want is a <tbody> element, which is intended for creating sections of rows. (There are also <thead> and <tfoot> elements.)

    Also you're mixing HTML and XHTML syntax. The ending slash for elements that are empty by definition is an XHTML thing, but XHTML requires both lowercase element/tag names and all attributes to be given a value.
    Code:
    <INPUT type="text" name="dept" value="" disabled />
    XHTML:
    Code:
    <input type="text" name="dept" value="" disabled="disabled" />
    HTML:
    Code:
    <INPUT type="text" name="dept" value="" disabled>
    My recommendation (lowercase HTML):
    Code:
    <input type="text" name="dept" value="" disabled>
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    721
    Rep Power
    7
    Thank you very much for laying that out. After I learned the basic HTML, I never really looked much into the differences between kinds of HTML. Well, as per my topic...

    Here' the full code to my page. The overall is 2 actions. First action is the checkSick() when they choose Type. Upon the selection of Sick, the 3 auto-filled textboxes turn into a drop-down & 2 text inputs via a display: show/hide of 2 tables.

    The second action is the choice of Name. This makes a fetch to the db and should simply fill in the 2 boxes below the drop-down, which I was intending to dow with the table row replacement.

    At first I figure my echo in the live call would just replace table rows, but I guess not. From some responses to other topics around the net, it sounds I should make my live call return 2 variables or something, and apply them to the current boxes. Is this so? How do I ruturn variables and use them with my call?

    php-brief Code:
    <TABLE id="profile">
      <TR>
        <TD colspan="3" style="text-align: right;"><SPAN id="easter"></SPAN><INPUT type="button" value=" Close " onClick="parent.location='?loc=tore'" /></TD>
      </TR>
      <TR>
        <TD style="text-align: right;"><H3>Type of Absence:&nbsp;</H3></TD>
        <TD colspan="2">
          <?php
            if($action == "add" || $action == "edit") {
              echo '<SELECT name="type" id="type" onchange="checkSick();">
            <OPTION value="appt">Appointment</OPTION>
            <OPTION value="bereavement">Bereavement</OPTION>
            <OPTION value="jury">Jury Duty</OPTION>
            <OPTION value="military">Military</OPTION>
            <OPTION value="sick">Sick</OPTION>
            <OPTION value="vacation">Vacation</OPTION>
            <OPTION value="wopay">Time Off Without Pay</OPTION>
            <OPTION value="other">Other</OPTION>
          </SELECT>' . "\n";
            } else {
              echo $var['type'] . "\n";
            }
          ?>
        </TD>
      </TR>
      <TR>
        <TD style="text-align: left;">
          &nbsp;<BR />
          <TABLE id="personal">
            <TR>
              <TD style="text-align: right;width: 110px;"><H3>Name:&nbsp;</H3></TD>
              <TD colspan="2">
                <?php
                  if($action == "add" || $action == "edit") {
                    echo '<INPUT type="text" name="name" value="' . $var['empName'] . '" disabled />' . "\n";
                  } else {
                    echo $var['empName'];
                  }
                ?>
              </TD>
            </TR>
            <TR>
              <TD style="text-align: right;"><H3>Department:&nbsp;</H3></TD>
              <TD colspan="2">
                <?php
                  if($action == "add" || $action == "edit") {
                    echo '<INPUT type="text" name="dept" value="' . $var['department'] . '" disabled />' . "\n";
                  } else {
                    echo $var['department'];
                  }
                ?>
              </TD>
            </TR>
            <TR>
              <TD style="text-align: right;"><H3>Manager:&nbsp;</H3></TD>
              <TD colspan="2">
                <?php
                  if($action == "add" || $action == "edit") {
                    echo '<INPUT type="text" name="mgr" value="' . $var['manager'] . '" disabled />' . "\n";
                  } else {
                    echo $var['manager'];
                  }
                ?>
              </TD>
            </TR>
          </TABLE>
          <TABLE id="sick" style="display: none;" border="1">
            <TR>
              <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>
                </SELECT>
              </TD>
            </TR>
              <TR>
                <TD style="text-align: right;"><DIV id="userInfo"><H3>Department:&nbsp;</H3></TD>
                <TD colspan="2">
                  <INPUT type="text" name="dept" value="" disabled />
                </TD>
              </TR>
              <TR>
                <TD style="text-align: right;"><H3>Manager:&nbsp;</H3></TD>
                <TD colspan="2">
                  <INPUT type="text" name="mgr" value="" disabled />
                </DIV></TD>
              </TR>
          </TABLE>
        </TD>
      </TR>
      <TR>
        <TD colspan="3">&nbsp;<BR /><H3>Comments for Absence:</H3>
          <?php
            if($action == "add" || $action == "edit") {
              echo '<TEXTAREA name="comment" cols="75" rows="5">' . (isset($var['reason']) ? $var['reason'] : '') . '</TEXTAREA><BR />&nbsp;' . "\n";
            } else {
              echo $var['reason'] . "<BR />&nbsp;";
            }
          ?>
        </TD>
      </TR>
      <TR>
        <TD><H3>Dates of Absence:</H3></TD>
        <TD>
          <?php
            if($action == "add" || $action == "edit") {
              echo 'From: <INPUT type="text" name="start" id="start" value="' . (isset($var['start']) ? $var['start']->format('m/d/Y') : '') . '" onchange="dateCount()" class="datepicker" />' . "\n";
            } else {
              echo 'From: ' . $var['start']->format('m/d/Y');
            }
          ?>
        </TD>
        <TD>
          <?php
            if($action == "add" || $action == "edit") {
              echo 'To: <INPUT type="text" name="end" id="end" value="' . (isset($var['end']) ? $var['end']->format('m/d/Y') : '') . '" onchange="dateCount()" class="datepicker" />' . "\n";
            } else {
              echo 'To: ' . $var['end']->format('m/d/Y');
            }
          ?>
        </TD>
      </TR>
      <TR>
        <TD colspan="3">
          Paid Off Days: <SPAN id="holDays">0</SPAN> of the days in your range are Paid Holidays and will not be charged Vacation Days.
        </TD>
      </TR>
      <TR>
        <TD colspan="3">
          Vacation Days: You will be using <SPAN id="vacDays">0</SPAN> Day(s) of vacation.<BR />&nbsp;
        </TD>
      </TR>
      <TR>
        <?php if($action == "edit") { ?><TD>
          <INPUT type="button" value=" Delete " onClick="parent.location='?loc=tore&action=confirm&id=<?php echo $toreID; ?>'">
        </TD>
        <TD colspan="2" align="center">
        <?php } else { ?><TD colspan="3" align="center">
          <?php }
            if($action == "edit" || $action == "view") {
              echo '<INPUT type="hidden" name="selectedID" value="' . $toreID . '" />';
            }
          ?><INPUT type="submit" value=" <?php echo $submit; ?> " />
        </TD>
      </TR>
    </TABLE>
    Last edited by Triple_Nothing; September 2nd, 2013 at 12:26 PM.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Your revised code isn't valid either. You can't just insert beginning and end tags wherever it might be most convenient. Each element can only have one parent. I'm sorry, but I can't help someone who writes "tag soup".

    Use the validator: http://validator.w3.org/

    P.S. Why did you continue trying to use a <div> anyway?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    721
    Rep Power
    7
    Well, if seemed I just needed some tag to define and replace the content of. DIV and SPAN were the only 2 that came to mind.

IMN logo majestic logo threadwatch logo seochat tools logo