✔ Mehrere Requests

Paule94

Paule94

Grünschnabel
Hallo ,

Ich habe hier ein kleines problem mit meinem Code,
Es geht darum das sich die Buttons sich umfärben sollen je nach dem was xmlhttprequest zurück gibt...
Mit einem einzelnen ist es mir gelungen, leider habe ich jedoch null Javascript kenntnisse da ich es eigendlich fast garnicht brauche...

Ziel ist es das für jeden knopf ein einzelnes Request gemacht wird da die knöpfe ja unabhängig voneinander sein sollen.
Kriege es leider nur mit einem Request hin, wenn ich ein zweites hinmache klappts nicht mehr ,

Kann mir jemand helfen?



Hier mein Code bisher:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wohnungssteuerung</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link href="css/style.css"rel="stylesheet" type="text/css" />
</head>

<script type="text/javascript">
//Wohnzimner
var xmlHttpObject = false;

if (typeof XMLHttpRequest != 'undefined')
{
xmlHttpObject = new XMLHttpRequest();
}
if (!xmlHttpObject)
{
try
{
xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlHttpObject = null;
}
}
}


function loadContent()
{
xmlHttpObject.open('get','css/active.php?pin=21');
xmlHttpObject.onreadystatechange = handleContent;
xmlHttpObject.send(null);
return false;
}

function handleContent()
{
if (xmlHttpObject.readyState == 4)
{
document.getElementById('1').style.backgroundColor = xmlHttpObject.responseText;
}
}


setInterval(function(){
loadContent();


}, 100);
</script>

<body>

<h2 class="head">Lichtschalter</h2><br />
<font size="2">Knopf Grün* = Licht an</font><br />
<div class="content">
<form method="POST">
<table border="0px solid #000000; background:#000000;">
<tr>
<th>Licht</th>
</tr>
<tr>
<td><input id="1" class="input" style="width:100%; height:50px;border: 1px #000000 solid;background: <?php echo $light['21']; ?>" type="submit" name="light" value="Wohnzimmer" /></td>
</tr>
<tr>
<td><input id="2" style="width:100%; height:50px;border: 1px #000000 solid;background: <?php echo $light['16']; ?>"type="submit" name="light" value="Badezimmer" /></td>
</tr>
<tr>
<td><input style="width:100%; height:50px;border: 1px #000000 solid;background: <?php echo $light['20']; ?>"type="submit" name="light" value="Kueche" /></td>
</tr>
<tr>
<td><input style="width:100%; height:50px;border: 1px #000000 solid;background: <?php echo $light['22']; ?>"type="submit" name="light" value="Flur" /></td>
</tr>
</table>
</form>
</div> <br />
</body>
</html>
 
Benutze besser Code-Tags wenn Du Code postest.

Ich empfehle, lieber jQuery für Ajax zu benutzen. Ist dann wesentlich einfacher und übersichtlicher. Und so etwas wie dieses:
Code: 
if (typeof XMLHttpRequest != 'undefined')
{
xmlHttpObject = new XMLHttpRequest();
}
if (!xmlHttpObject)
{
try
{
xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlHttpObject = null;
}
}
}
erübrigt sich dann von vorn herein.
 
ehrklich gesagt werde ich daraus noch immer nicht schlau!

wäre es möglich mir ein vorgefertigtes script zu posten das beinhaltet das ich mehrere abfragen machen kann,

entschuldigung hatte den code tag gesucht aber nicht gefrunden

mfg
 
Habe gerade etwas ausgearbeitet. So einfach ist es mit jQuery:
Code: 
        function loadContent() {
            $("input[name='light']").each(function() {
                var th = $(this);
                $.ajax({
                    type: "POST",
                    url: "active.php",
                    data: {pin: $(this).data("pin")},
                    success: function(data) {
                        th.css("background-color", data)
                    },
                    dataType: "text"
                });
            });
        }
        setInterval(loadContent, 500);
    </script>
Getestet und funktioniert bei mir.
 
PS: Die Pins, Parameter für das PHP-Skript, habe ich als data-Attribute definiert:
HTML: 
    <table border="0px solid #000000; background:#000000;">
        <tr>
            <th>Licht</th>
        </tr>
        <tr>
            <td>
                <input id="1" class="input" style="width:100%; height:50px;border: 1px #000000 solid;background: <?php echo $light['21']; ?>" type="button" name="light" value="Wohnzimmer"
                data-pin="21" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="2" style="width:100%; height:50px;border: 1px #000000 solid;background: <?php echo $light['16']; ?>" type="button" name="light" value="Badezimmer"
                data-pin="16" />
            </td>
        </tr>
        <tr>
            <td>
                <input style="width:100%; height:50px;border: 1px #000000 solid;background: <?php echo $light['20']; ?>" type="button" name="light" value="Kueche"
                data-pin="20" />
            </td>
        </tr>
        <tr>
            <td>
                <input style="width:100%; height:50px;border: 1px #000000 solid;background: <?php echo $light['22']; ?>" type="button" name="light" value="Flur"
                data-pin="22" />
            </td>
        </tr>
    </table>
Ich hoffe, ich habe richtig verstanden, wie das mit den Pins funktioniert.
 
Jop korrekt... geht bei den pins aber auch um die richtige anssteuerung eines pins am RaspberryPi (Einplatinen PC für diverse projekte)

Hab aber e öszung mit Jquery gefunden

Ich poste hier nochmal die lösung

(Finde den code tag leider immernoch nicht)

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>


<script type="text/javascript">
//Wohnzimner



setInterval(function(){

$(function(){
$.get( "css/active.php?pin=21", function( data ) {
document.getElementById('1').style.backgroundColor = data; // can be a global variable too...
// process the content...
});
});
$(function(){
$.get( "css/active.php?pin=16", function( data ) {
document.getElementById('2').style.backgroundColor = data; // can be a global variable too...
// process the content...
});
});
$(function(){
$.get( "css/active.php?pin=20", function( data ) {
document.getElementById('3').style.backgroundColor = data; // can be a global variable too...
// process the content...
});
});
$(function(){
$.get( "css/active.php?pin=22", function( data ) {
document.getElementById('4').style.backgroundColor = data; // can be a global variable too...
// process the content...
});
});

}, 100);
</script>

<body>

<h2 class="head">Lichtschalter</h2><br />
<font size="2">Knopf Grün* = Licht an</font><br />
<div class="content">
<form method="POST">
<table border="0px solid #000000; background:#000000;">
<tr>
<th>Licht</th>
</tr>
<tr>
<td><input id="1" class="input" style="width:100%; height:50px;border: 1px #000000 solid;background: <?php echo $light['21']; ?>" type="submit" name="light" value="Wohnzimmer" /></td>
</tr>
<tr>
<td><input id="2" style="width:100%; height:50px;border: 1px #000000 solid;background: <?php echo $light['16']; ?>"type="submit" name="light" value="Badezimmer" /></td>
</tr>
<tr>
<td><input id="3" style="width:100%; height:50px;border: 1px #000000 solid;background: <?php echo $light['20']; ?>"type="submit" name="light" value="Kueche" /></td>
</tr>
<tr>
<td><input id="4"style="width:100%; height:50px;border: 1px #000000 solid;background: <?php echo $light['22']; ?>"type="submit" name="light" value="Flur" /></td>
</tr>
</table>
</form>
</div> <br />
</body>
</html>


Sind nur ausschnitte aus dem gesammt script, den php teil erspare ich euch ^^

Vielen dank,
Mfg
 
Ich finde es ja rationeller, alles mit einer Funktion zu erledigen. Nicht nur das, sondern man muss auch nur eine Stelle ändern, wenn das mal erforderlich wird.
Ich nehme an, das hat mit Hausautomatisierung zu tun, Lampen steuern und auslesen und so. Scheint momentan im Trend zu sein, denn man liest häufig Fragen, die sich darauf beziehen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück