PHP Developers Network
http://forums.devnetwork.net/

Need a "update div" example with comments or explanation
http://forums.devnetwork.net/viewtopic.php?f=13&t=142742
Page 1 of 1

Author:  cSheffield90 [ Wed Jul 13, 2016 9:29 pm ]
Post subject:  Need a "update div" example with comments or explanation

FYI: I have done a lot of searching and have come up with a lot of examples but I dont understand how, what, when, where and why.

Im on the last steps of finishing my project that has taken me almost a year. I had to learn how to use C++, Python, HTML and PHP by reading a lot of books. Now I just need to do one more thing and my project will be finished. The only thing is I am not sure if I have it in me to read two or three more books just do get one thing done. I have no experience with AJAX, JQUERY or JAVASCRIPT and it looks like that is what I need help with. I have spent days trying to decipher the Greek examples everyone has posted online.

So on my webserver I have a index.php (main file), a data.txt (data file) and a css file containing code for a temperature gauge 'tempGauge.css'

in my index.php file I use some php code to collect the data from 'data.txt' and I display it using a div containing all the calls to the tempGauge.css.

Everything works just fine but now I need to know how to periodically recollect the data in 'data.txt' and refresh the div containing the temp gauge. I have seen lots of examples online but none are clear and none are commented. I have no experience in javascript/ajax/jquery. Can anyone guide me thru the steps? Can anyone post any code with comments so I can understand what is going on? Also if there are scripts where do I add them to my index.php file? using 5 different languages in one file is too much for my head. Thanks to anyone who attempts to help me. You are the best!

NOTE: I intend to clean up the php with loops when everything is in working order

Syntax: [ Download ] [ Hide ]
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>  

<html>
    <head>
        <title>opGrow Controller Station</title>
        <link rel=”stylesheet” type=”text/css” href=”common.css” />
        <p><b>opGrow Monitoring Station</b></p>
        <?php
            $lines = file("data.txt");
            $coolOnValue = $lines[4];
            $coolOffValue = $lines[5];
            $heatOnValue =$lines[6];
            $heatOffValue = $lines[7];
            $humidOnValue = $lines[8];
            $humidOffValue = $lines[9];
            $dehumidOnValue = $lines[10];
            $dehumidOffValue =$lines[11];
            $pumpOnMinsValue = $lines[12];
            $pumpOffMinsValue = $lines[13];
            $pumpOnMoisValue = $lines[14];
            $pumpOffMoisValue = $lines[15];
            $co2OnValue = $lines[16];
            $co2OffValue = $lines[17];
        ?>
    </head>

    <body>
    <table border="3" ALIGN = "Left">
    <td>
    <table border="0" style="background-color:#FFFFFF;border-collapse:collapse;border:0px solid #FFCC00;color:#000000;width:100%" cellpadding="3" cellspacing="3">
        <tr>
            <td>    <h2 ALIGN = "Center">RoomTemperature</h2>

                <div ALIGN = "Center" class="container">
                    <div class="de">
                    <div class="den">
                    <div class="dene">
                        <div class="denem">
                        <div class="deneme">
                            <?php echo (isset($currTempValue))?$currTempValue:'';?><span></span><strong>&deg;</strong>
                        </div>
                        </div>
                    </div>
                    </div>
                    </div>
                </div>
                </br>
            </td>
            <td>
                <h2 ALIGN = "Center">Room Humidity</h2>

                <div ALIGN = "Center" class="container">
                    <div class="de">
                    <div class="den">
                    <div class="dene">
                        <div class="denem">
                        <div class="denemeHUM">
                            <?php echo (isset($currHumidValue))?$currHumidValue:'';?><span></span><strong>%</strong>
                        </div>
                        </div>
                    </div>
                    </div>
                    </div>
                </div>
                </br>
            </td>
            <td>
                <h2 ALIGN = "Center">Grow Medium Moisture</h2>

                <div ALIGN = "Center" class="container">
                    <div class="de">
                    <div class="den">
                    <div class="dene">
                        <div class="denem">
                        <div class="denemeHUM">
                            <?php echo (isset($currMoisValue))?$currMoisValue:'';?><span></span><strong>%</strong>
                        </div>
                        </div>
                    </div>
                    </div>
                    </div>
                </div>
                </br>
            </td>
            <td>
                <h2 ALIGN = "Center">Room CO2 Content</h2>

                <div ALIGN = "Center" class="container">
                    <div class="de">
                    <div class="den">
                    <div class="dene">
                        <div class="denem">
                        <div class="denemeCO2">
                            <?php echo (isset($currCO2Value))?$currCO2Value:'';?><span></span><strong>ppm</strong>
                        </div>
                        </div>
                    </div>
                    </div>
                    </div>
                </div>
                </br>
            </td>
        </tr>
    </table>
    </td>
    </table>
        setTimeout
        <form action="" method="post">  
        <table border="0" style="background-color:#FFFFFF;border-collapse:collapse;border:0px solid #FFCC00;color:#000000;width:100%" cellpadding="3" cellspacing="3">
            <tr>
                <td><label for='coolOn'>Cooling Turn On         </label><input type='text' name='coolOn' id='coolOn'            value="<?php echo (isset($coolOnValue))?$coolOnValue:'';?>" size="1" maxlength="2" /> </td>
                <td><label for='humidOn'>Humidifier Turn On     </label><input type='text' name='humidOn' id='humidOn'          value="<?php echo (isset($humidOnValue))?$humidOnValue:'';?>" size="1" maxlength="2" /> </td>
                <td><label for='pumpOnMins'>Pump Turn On (mins) </label><input type='text' name='pumpOnMins' id='pumpOnMins'    value="<?php echo (isset($pumpOnMinsValue))?$pumpOnMinsValue:'';?>" size="1" maxlength="2" /> </td>
                <td><label for='co2On'>CO2 Turn On              </label><input type='text' name='co2On' id='co2On'              value="<?php echo (isset($co2OnValue))?$co2OnValue:'';?>" size="1" maxlength="2" /> </td>
            </tr>
            <tr>
                <td><label for='coolOff'>Cooling Turn Off           </label><input type='text' name='coolOff' id='coolOff' value="<?php echo (isset($coolOffValue))?$coolOffValue:'';?>" size="1" maxlength="2" /></td>
                <td><label for='humidOff'>Humidifier Turn Off       </label><input type='text' name='humidOff' id='humidOff' value="<?php echo (isset($humidOffValue))?$humidOffValue:'';?>" size="1" maxlength="2" /></td>
                <td><label for='pumpOffMins'>Pump Turn Off (mins)   </label><input type='text' name='pumpOffMins' id='pumpOffMins' value="<?php echo (isset($pumpOffMinsValue))?$pumpOffMinsValue:'';?>" size="1" maxlength="2" /></td>
                <td><label for='co2Off'>CO2 Turn Off                </label><input type='text' name='co2Off' id='co2Off' value="<?php echo (isset($co2OffValue))?$co2OffValue:'';?>" size="1" maxlength="2" /></td>
            </tr>
            <tr>
                <td><label for='heatOn'>Heating Turn On         </label><input type='text' name='heatOn' id='heatOn' value="<?php echo (isset($heatOnValue))?$heatOnValue:'';?>" size="1" maxlength="2" /></td>
                <td><label for='dehumidOn'>Dehumidifier Turn On </label><input type='text' name='dehumidOn' id='dehumidOn' value="<?php echo (isset($dehumidOnValue))?$dehumidOnValue:'';?>" size="1" maxlength="2" /></td>
                <td><label for='pumpOnMois'>Pump Turn On (mois.)</label><input type='text' name='pumpOnMois' id='pumpOnMois' value="<?php echo (isset($pumpOnMoisValue))?$pumpOnMoisValue:'';?>" size="1" maxlength="2" /></td>
                <td></td>
            </tr>
            <tr>
                <td><label for='heatOff'>Heating Turn Off           </label><input type='text' name='heatOff' id='heatOff' value="<?php echo (isset($heatOffValue))?$heatOffValue:'';?>" size="1" maxlength="2" /></td>
                <td><label for='dehumidOff'>Dehumidifier Turn Off   </label><input type='text' name='dehumidOff' id='dehumidOff' value="<?php echo (isset($dehumidOffValue))?$dehumidOffValue:'';?>" size="1" maxlength="2" /></td>
                <td><label for='pumpOffMois'>Pump Turn Off (mois)   </label><input type='text' name='pumpOffMois' id='pumpOffMois' value="<?php echo (isset($pumpOffMoisValue))?$pumpOffMoisValue:'';?>" size="1" maxlength="2" /></td>
                <td><label for ="submitButton"></label><input name="submit" type="submit" /></td>
            </tr>
        </table>
        </form>
        <img id="graph" src ="output.jpg" WIDTH = 640 HEIGHT = 480 alt = "My updating graph" />


    <?php
        if (isset($_POST['submit']))
        {
            $tempString = "";
            $lines[4] = $_POST['coolOn'];
            $lines[4] .="\n";
            $lines[4] = $_POST['coolOff'];
            $lines[4] .="\n";
            $lines[4] = $_POST['heatOn'];
            $lines[4] .="\n";
            $lines[4] = $_POST['heatOff'];
            $lines[4] .="\n";
            $lines[4] = $_POST['humidOn'];
            $lines[4] .="\n";
            $lines[4] = $_POST['humidOff'];
            $lines[4] .="\n";
            $lines[4] = $_POST['dehumidOn'];
            $lines[4] .="\n";
            $lines[4] = $_POST['dehumidOff'];
            $lines[4] .="\n";
            $lines[4] = $_POST['pumpOnMins'];
            $lines[4] .="\n";
            $lines[4] = $_POST['pumpOffMins'];
            $lines[4] .="\n";
            $lines[4] = $_POST['pumpOnMois'];
            $lines[4] .="\n";
            $lines[4] = $_POST['pumpOffMois'];
            $lines[4] .="\n";
            $lines[4] = $_POST['co2On'];
            $lines[4] .="\n";
            $lines[4] = $_POST['co2Off'];
            $lines[4] .="\n";
            echo "<meta http-equiv='refresh' content = '0'>";
            for ($i=0;$i<18;$i++)
            {
                $temp .=$lines[$i];
            }
            $numChars = file_put_contents("data.txt", $temp);
        }
    ?>
</body>

Author:  Celauran [ Thu Jul 14, 2016 6:14 am ]
Post subject:  Re: Need a "update div" example with comments or explanation


Author:  Christopher [ Thu Jul 14, 2016 2:13 pm ]
Post subject:  Re: Need a "update div" example with comments or explanation

I agree with everything Celauran says, so do that. Two points:

1. Since you say you know PHP but not Javascript -- post the rendered page so we can see all the HTML that the Javascript is working with. The PHP is irrelevant to Javascript.

2. Please show us and example with just one <div> because that would be simpler to discuss.

Page 1 of 1 All times are UTC - 5 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/