Need a "update div" example with comments or explanation

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
cSheffield90
Forum Newbie
Posts: 4
Joined: Mon Jul 11, 2016 6:46 pm

Need a "update div" example with comments or explanation

Post by cSheffield90 »

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

Code: Select all

    <!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>
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Need a "update div" example with comments or explanation

Post by Celauran »

cSheffield90 wrote:I have no experience with AJAX, JQUERY or JAVASCRIPT and it looks like that is what I need help with.
Spend a day on codecademy and you'll understand jQuery. At least enough to finish your project. No book required. https://www.codecademy.com/learn/jquery

At a glance I'd recommend having a separate endpoint -- it can just be a plain .php file accessed directly -- that feeds the data to your app. Call the endpoint on load to get your initial values, and have some JS call the endpoint repeatedly on a timer to update values. You could either send back rendered markup or simply a JSON array/object containing the values.

Start with getting a basic understanding of jQuery, and I'll be happy to help you through the rest step by step.
User avatar
Christopher
Site Administrator
Posts: 13592
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Need a "update div" example with comments or explanation

Post by Christopher »

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.
(#10850)
Post Reply