AJAX updating <div> met respons uit PHP file,

[Ron]

hoi iedereen
als deel van een project werk ik op het moment aan de automatisering van een kantoorpand,
dit moet via een webinterface gebeuren.

de integratie met de mysql database werkt, alleen krijg ik via AJAX geen updates meer in mn <div>
dit betekend dat de huidige streeftemperatuur pas na een reload weer te zien is

code op de pagina:

code:

<div align="center">
<button class="buttonup" type="button" onclick="tempup()"></button>
<script language="javascript">
function tempup() {
$("#targettemp").load("targettemp.php");
$.ajax({
url: "tempup.php", //the page containing php script
type: "POST", //request type
})
$(document).ready(function () {
$("#targettemp").load("targettemp.php");
});
}
</script>

<h4 class="target-temp panel-body" id="targettemp ">
<?php
require 'dbconnection.php';
$con;
$dbcon;
$temp = "SELECT `target temp` FROM Temperature WHERE homeid = 'BG0001' ";
$query = mysql_query($temp);
$results = mysql_result($query, 0);
echo "$results &#8451;";
?>
</h4>

<div align="center">
                        <button class="buttondown" type="button" onclick="tempdwn()"></button>
                        <script language="javascript">
function tempdwn() {
$("#targettemp").load("targettemp.php");
$.ajax({
url: "tempdwn.php", //the page containing php script
type: "POST", //request type
})
$(document).ready(function () {
$("#targettemp").load("targettemp.php");
});
}
                        </script>
</div>
</div>

tempdwn.php

code:

 <?php
     require 'dbconnection.php';
        $con;
        $dbcon;
        $query = mysql_query("SELECT `target temp` FROM `Temperature` WHERE homeid = 'BG0001' ");
        $huidigetemp = mysql_result($query, 0);               
        $newtemp = $huidigetemp - 1;
        mysql_query("UPDATE Temperature SET `target temp`= $newtemp WHERE homeid = 'BG0001'  ");
        ?>

targettemp.php:

code:

<?php  
require 'dbconnection.php';
                $con;
                $dbcon;

                $temp = "SELECT `target temp` FROM Temperature WHERE homeid = 'BG0001' ";
                $query = mysql_query($temp);
                $results = mysql_result($query, 0);
                echo "$results &#8451;";
                ?>

elke hulp zou zeer gewaardeerd worden

[n2theb]

Ik zie dat je pas dingen laat zien als je op een knop klikt, klopt dat? Wat gebeurt er nu als je op de knop klik? Hoe bedoel je dat je pas wat ziet als je refresh?

Wat mij opvalt is .. je load de targettemp voordat je tempdwn.php aanroept.. dit betekent dat de nieuwe temperatuur veranderd nadat jij het laat zien.. En daarna laat je nog een keer targettemp in. Ook laat je de targettemp pas in als je op de knop klikt.

Laat als eerst gewoon standaard buiten de functions de targettemp in zodat je altijd een waarde ziet.

JavaScript:

function tempdwn() {
$.ajax({
url: "tempdwn.php", //the page containing php script
type: "POST", //request type
});
$("#targettemp").load("targettemp.php");
}

$(document).ready(function () {
$("#targettemp").load("targettemp.php");
});

Update: correctie ik zie dat je deze in het midden inlaad..

Heb je console log al geprobeerd in JavaScript om te kijken of er uberhaubt een waarde terugkomt?

[ Voor 12% gewijzigd door n2theb op 08-01-2016 11:00 ]

[OkkE]

Wat n2theb al zegt, je haalt de temp op voor je 'm veranderd hebt via de AJAX. Verder staat er 2x een $(document).ready() wat maar één keer hoeft -- en misschien, aan je code te zien, niet doet wat jij denkt dat het doet.

Kijk eens naar de complete parameter van die .ajax() functie, roep daar in de .load() functie. Dan weet je zeker dat de nieuwe temp wordt opgehaald. En je kunt ook direct een melding laten zien wanneer je AJAX request is mislukt.

-- edit --

Om het allemaal nog iets netter (IMHO) te maken, zou ik het trouwens zo doen.

change-temp.php:
Accepteert 1 parameter, dat kan zijn een string “up” of “down” (en misschien in de toekomt ook een int met een directe waarde). Na het berekenen van de nieuwe temp sla je die op in de database en print je deze ook direct als enige output, daar door kun je de nieuwe waarde direct als resultaat binnen je AJAX ophalen en deze gebruiken om (via de eerder genoemde complete functionaliteit) de temp notatie binnen je pagina te updaten.

[ Voor 45% gewijzigd door OkkE op 08-01-2016 11:17 ]

[Ron]

code:

 <div class="panel-body">
                                        <div align="center">
                                            <button class="buttonup" type="button" onclick="tempup()"></button>
                                            <script language="javascript">
                                                function tempup() {
                                                    $.ajax({
                                                        type: "POST",
                                                        url: "change-temp.php",
                                                        data: {direction: 'up'},
                                                        success: function(result){
                                                            str = result;
                                                            $("#targettemp").html(str)
                                                           
                                                        }
                                                    });
                                                }                                                 
                                            </script>
                                            
                                                    <h4  class="target-temp panel-body" id="targettemp "> 
                                                        </h4>
                                            
                                            <div align="center">
                                                <button class="buttondown" type="button" onclick="tempdwn()"></button>
                                                <script language="javascript">
                                                    function tempdwn() {
                                                        $.ajax({
                                                            type: "POST",
                                                            url: "change-temp.php",
                                                            data: {direction: 'down'},
                                                            success: function(result){
                                                                $("#targettemp").html(result);

                                                            }
                                                        });
                                                    }

                                        </script>
                                            </div>
                                        </div>
                                    </div>

nieuwe code om temperatuur te veranderen, ik krijg echter nogsteeds de return value niet te zien in de targettemp header

[ Voor 21% gewijzigd door Ron op 08-01-2016 21:08 ]

[Ron]

Vraag mag gesloten worden.
Wat bleek, ik had bij het id-veld per abuis een spatie achter het id staan.
Bedankt voor de tips, ik gebruik nu één change-temp file en het werkt perfect