Div nach submit zyklisch aktualisieren

Html · 19. Mai 2010

Guten Tag. Folgendes Problem: Ich habe ein bash-cgi Skript welches mir eine html-seite erzeugt. Durch das Absenden eines Formulars lese ich in dem Skript Daten von einem TCP-Socket und gebe diese dann auf der Seite aus. Der Benutzer kann in dem Formular aber auch eine checkbox aktivieren und nach dem absenden wird darauf hin ein <meta refresh .. > hinzugefügt der immer wieder die Seite aktualisiert und die Daten des Sockets so zyklisch gelesen und ausgeben werden. Nun ich habe noch nie was mit ajax gemacht, doch bisher immer davon gelesen das man dies zum refreshen der Seite nutzen kann ohne diese neuzuladen.

Im Prinzip müsste nach dem Absenden des Forumulars (in Abhängigkeit der getroffenen Auswahl) immer wieder der Teil wiederholt werden wo die Daten aus dem Socket gelesen werden und dann die Daten im Div aktualisiert werden.

Ich hänge hier mal den Code mit an:

HTML:

#!/bin/sh

#Header senden
echo "Content-type: text/html\n"

modus="Single Reading"

#Skriptname auslesen
name=$( basename $0 )

#Auswertung Parameterübergabe                  
submit=`echo "$QUERY_STRING" | sed -n 's/^.*send=\([^&]*\).*$/\1/p' | sed "s/%20/ /g"`
periodic=`echo "$QUERY_STRING" | sed -n 's/^.*periodic=\([^&]*\).*$/\1/p' | sed "s/%20/ /g"`
refreshtime=`echo "$QUERY_STRING" | sed -n 's/^.*refreshtime=\([^&]*\).*$/\1/p' | sed "s/%20/ /g"`

Teil wo Daten nach submit gelesen werden

#Sende Anfrage und hole Daten von RS232
if [ "$submit" = "true" ] 
then
#info=$( echo "(print)" | nc 192.168.1.10 9000 )
#echo "(set-repl-prompt! \"\")" | nc 192.168.1.10 9000
echo "(read_ISO)" | nc 192.168.1.10 9000 
info=$( nc 192.168.1.10 9001 )
fi



#Auswahl ob refresh gesetzt ist
if [ "$periodic" = "true" ] 
then
meta_refresh='<meta http-equiv="refresh" content="'$refreshtime'; URL=RFID.sh?periodic=true&refreshtime='$refreshtime'&send=true">'
flag="checked='true'"
modus="Cycle Reading"
fi


#Beginn Html
echo '<html>'
echo '<head>'
echo '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">'
echo $meta_refresh
echo '<title></title>'
echo '<link rel="stylesheet" type="text/css" href="http://localhost/webif/style.css">'
echo '</head>'
echo '<body>'
echo '<div id="container">'

#Header
echo '<div id="header">'
echo '</div>'

#Navigationsleiste
echo '<div id="nav">'
echo '<ul>'
echo '<li><a href="RFID.sh">Daten lesen</a></li>'
echo '<li><a href="RFID.sh">Passwort ändern</a></li>'
echo '</ul>'
echo '</div>'

echo '<div id="wrapper">'
echo '<div id="content">'

#ab hier beginnt der Inhalt

echo '<div id="links">'
echo '<h1>Einstellungen:</h1>'

echo '<form name="input" action="RFID.sh" method="GET">'
echo '<label>Modus: '$modus'</label><br><br><br>'
echo '<label for="periodic">zyklisch:</label>'
#echo '<input type="checkbox" name="periodic" id="periodic" value="true" '$flag' onclick="if(!this.checked) this.form.submit();"><br>'
echo "<input type='checkbox' name='periodic' id='periodic' value='true' "$flag" onClick=\" if(!this.checked) self.location.href='RFID.sh'\"><br>"
echo '<label for="intervall">Intervall:</label>'
echo '<select name="refreshtime">'
echo '<option value="1"'

if [ "$refreshtime" = "1" ] 
then 
echo "selected" 
fi 

echo '>1sec</option>'

echo '<option value="2"' 
if [ "$refreshtime" = "2" ] 
then 
echo "selected" 
fi 
echo '>2sec</option>'
echo '<option value="3"' 
if [ "$refreshtime" = "3" ] 
then 
echo "selected" 
fi 
echo '>3sec</option>'
echo '</select><br><br>'
echo '<input type="hidden" name="send" value="true">'
echo '<input type="submit" value="RFID-Tags lesen">'
echo '</form>' 

echo '</div>'

echo '<div id="scroll">'
echo '<h1>empfangene Daten:</h1>'
echo '<ul id="ausgabe">'
#echo $meldung

Teil wo Daten nach submit ausgegeben werden

#Trennzeichen setzen und empfangene Daten untereinander ausgeben
IFS=$'.'
for i in $info; do echo "<li>"$i"</li>"; done
unset IFS

echo '</ul>'
echo '</div>'

echo '<br style="clear:both;">'

#Ende Inhalt

echo '</div>'

echo '</div>'

echo '<div id="footer">'

echo '</div>'

echo '</body>'
echo '</html>'

Nun meine Frage ob ajax dafür das Richtige ist und wie man die ganze Sache angeht?

Sven Mintel · 19. Mai 2010

Moin,

erstmal das Erfreuliche voraus: ja, AJAX ist dafür genua das Richtige

das Unerfreuliche: ich hab von diesem bash-cgi keine Ahnung, kann dir also nur beschreiben, wie es vor sich ginge:

Empfehlen würde ich dort die Nutzung eines Frameworks, das erspart dir die Einarbeitungszeit in AJAX und JS.
Gut eignen würde sich dafür jQuery

Ablauf:

Überwache den Sendevorgang per http://api.jquery.com/submit/
Dort starte einen AJAX-Request: http://api.jquery.com/load/
(bei dieser Methode wird das Zielelement direkt befüllt)
Prüfe weiterhin, ob die Checkbox aktiviert ist, wenn ja, starte ein Timeout für eine weitere Funktion: http://api.jquery.com/delay/
Diese weitere Funktion muss nichts weiter machen, als neu zu submitten: http://api.jquery.com/triggerHandler/

Dein Skript müsste für 2 Fälle etwas parat haben.

1. Das normale HTML-Dokument mit dem beschriebenen Skript....dies sollte es ausgeben, wenn keine Daten gesendet wurden

2. Die Daten, die im Zielelement angezeigt werden sollen, sofern Daten gesendet wurden.

Ich hoffe, meine Ausführen waren halbwegs verständlich.:-(

Div nach submit zyklisch aktualisieren

Html

Erfahrenes Mitglied

Sven Mintel

Mitglied

Neue Beiträge