Hi Forum,

nach langer Zeit der Schule und wohlverdientem Urlaub melde ich mich nun zurück. Mit einer etwas nervigen 0-8-15-Frage. Trau mich ja schon gar nicht zu fragen. Wieder eine dieser nooby "Wie geht das Ajax inhalte nachladen bla..." :- /

Egal ich trau mich einfach mal.

Folgender fall:

Spaßeshalber versuche ich mich grade an einem Kostenrechner, der anhand von irgenwelchen XML-Files, die Verbrauchswerte für Strom oder Gas oder Wasser oder Fernwärme oder sonstige Energieformen wie Gülle enthält. Ja anhand dieser Verbrauchswerte werden Diagramme (Balkendiagramme) erstellt, die den Energieverbrauch eines Tages veranschaulichen sollen, also von 0 bis 23 Uhr. der User Wählt einen Tag aus und das Diagramm wird erstellt und angezeigt. Soweit so gut.

Nun, habe ich gedacht es wäre doch auch schön wenn Oma Else nicht nur sehen würde wieviel sie wann von welcher Energiesparte verbraucht hat, sondern auch gleich noch sehen würde was der Spaß gekostet hat, als Sie Nachts, warum auch immer, den 2500 Watt Fön ne Stunde laufen lies.

Also bekommt Oma else die Möglichkeit persönliche Einstellungen zu Treffen. Sie gibt an was ihr Strom und Wasser kostet.

Nach dem Speichern merkt sie, das unter den normalen Verbrauchdiagrammen der Text "Klicken Sie hier um das Kostendiagramm auszuklappen" angezeigt wird. Sie klickt und ----

--- nichts passiert.

So schöner Roman (ich schweife gerne ab ).

Ich möchte eine Art ausklapptext implementieren. Habe im Wiki " Inhalte mit Ajax un PHP nachladen" gefunden. Ich möchte allerdings, dass das Pic bzw das Script das das Bild erstellt, bei einem Klick auf "+" (bildchen) aufklappt, sobald das aufgeklappt ist, das "+" zu einem "-" wird. Klickt man auf Minus klappt das Bild wieder zu.
Ihr kennt das sicher von irgenwelche News scripts oder anderen Seiten.

In wiefern muss ich den Code aus dem Wiki verändern, das bei einem Klick nicht nur nachgeldaen wird, sondern bei einem zweitklick das nachgeladene wieder verschwindet ?!

Hoffe das ist nicht sehr aufwendig und lässt sich schnell realisieren.

*solle mich echt mal mit js un der ajax materie befassen grml*

Grüße
Timo

ps danke schonmal

Hi Snowflake,

danke für deinen Beitrag. Ich denke damit lässt sich was anfangen.

Kämpfe nur damit, es überhaupt zu schaffen, dass sobald jemand auf einen der 4 links klickt, den inhalt der func datei in einem Div anzuzeigen.. :- /

grüße

Ohhkay...

Soweit bin ich nun:

habe vier links mit je einer anderen id (0-3). Je anchdem was für einen link man klickt, wird ein anderes "bild" ( echo ('<img alt="Kostenberechnung" src="BkostS.php">'); in dem entsprechenden Div (0-3) angezeigt.

soweit so gut

nun widme ich mich dem eigentlichen ausklapptext.

So kauen wird das mal zusammen durch ?!

Ich habe vier links, die die funktion sendRequest aufrufen und ihr jeweils ein anderes "digit" übergeben. Die func wird nachgeladen. Jenachdem was für ein "digit" gesendet wurde, wird ein anderes "bild" nachgeladen und in einem Div zwischen 0-3 angezeigt.


formular.html


Die funktion ausm Wiki zum nachladen


Die links und die Divs


Allso und wie muss ich den Code nun ändern? *jokling*

// das div element
element=document.getElementById('');
//das bild sprich der img tag. ihm muss eine eindeutige id zugewiesen werden
picture=document.getElementById('');

if(element.style.display=='none'){
picture.src='minus.jpg';
//ajax request bzw. aufruf der funktion des ajax requests
}else{
picture.src='plus.jpg';
element.style.display='none';
}

Hab ich dich richtig verstanden,

die links sollen nicht direkt die funtkion sendrequest aufrufen, sondern eine andere funktion, nennen wir sie mal klapptext.
Diese funktion liest erstmal "element" und "picture" aus.
Wenn das Div auf display "none" steht, wird die source des bilds von + auf minus geändert und 2. die funktion sendRequest aufgerufen. Falls nicht, wird das bild auf + geändert und der display status zurück auf none.

Hast du nicht vergessen, wenn die bedingung true ist, also die sendRequest function ausgeführt wird, den displaystatus "none" zurückzusetzen? sonst springt er ja nie in den else teil?!

sorry aber ich bin nicht so der hammer coder muss alles immer nochmal für dummies durchgehen

Yess!

also, kaum zu glauben aber ich als voller js noob habe es doch tatsächlich hinbekommen.. sicher nicht die schönste lösung aber es geht zumindest mal

bin gerne für vorschläge offen wie das ding schöner (kürzer) zu lösen ist.

erstmal die links, die zum aufklappen gedrückt werden müssen:


hier die divs:


und der js code:


ich schau mal das cih den code kleiner krieg

danke schonmal grüße

ohhkay so sieht die funktion jetzt aus.. schon schöner





danke snowflake für deinen beitrag

grüße

Hi Forum,

es funzt zwar nun alles, allerdings ist mir ein schönheitsfehler aufgefallen als ich mit dem IE getestet hab. Im prinzip wär mir das egal, nur das kleine hässliche gelbe Dreieck mit ausrufezeichen im IE stört mich sehr.
"Fehler auf der Seite".

Folgende Fehlermeldung konnte ich mit Firebug entlocken

Leerer String an getElementById() übergeben.
onreadystatechange()()
[Break on this error] ...ById(update).innerHTML = update[i+1];
tagesansicht.php# (Linie 78)
document.getElementById(update[i]) is null
[Break on this error] ...ById(update[i]).innerHTML = update[i+1];

Das sind meine Dummydateien:

formular.html

Quellcode

1. <html><head>
3. <script type="text/javascript">
4. <!--
5. function sendRequest(digit) {
6. var req;
7. try {
8. req = window.XMLHttpRequest?new XMLHttpRequest():
9. new ActiveXObject("Microsoft.XMLHTTP");
10. } catch (e) {
11. //Kein AJAX Support
12. }
14. req.onreadystatechange = function() {
15. if ((req.readyState == 4) && (req.status == 200)) {
16. var update = new Array();
17. var response = req.responseText;
18. if(response.indexOf('||' != -1)) {
19. update = response.split('||');
20. for(i=0; i<update.length; i+=2)
21. document.getElementById(update[i]).innerHTML = update[i+1];
22. }
23. }
24. };
25. req.open('POST', 'func.php');
26. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
27. req.send('s='+digit);
28. }
29. //-->
30. </script>
32. <script tyspe="text/javascript">
33. <!--
34. function klapptext(nr)
35. {
36. var element;
37. var picture;
40. element=document.getElementById('content'+nr);
41. picture=document.getElementById('pic'+nr);
43. if(element.style.display=='none')
44. {
45. picture.src='minus.JPG';
46. sendRequest(nr);
47. element.style.display='inline';
48. }
49. else
50. {
51. picture.src='plus.jpg';
52. element.style.display='none';
53. }
54. }
55. //-->
56. </script>
58. <style type="text/css">
59. <!--
60. div {
61. float:left;
62. width:25%;
63. font-size:12px;
64. background-color:#e5e5e5;
65. margin:10px;
66. height:200px;
67. width:30px;
68. }
69. //-->
70. </style>
71. </head>
72. <body>
74. <p />
75. <a href="#" onClick="klapptext('0')"><img id="pic0" src="plus.JPG" height="11,5px" width="10px"/> Feld 1 Nachladen</a><br />
76. <a href="#" onClick="klapptext('1')"><img id="pic1" src="plus.JPG" height="11,5px" width="10px"/>Feld 2 Nachladen</a><br />
77. <a href="#" onClick="klapptext('2')"><img id="pic2" src="plus.JPG" height="11,5px" width="10px"/>Feld 3 Nachladen</a><br />
78. <a href="#" onClick="klapptext('3')"><img id="pic3" src="plus.JPG" height="11,5px" width="10px"/>Feld 4 Nachladen</a><br />
80. <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="example">
82. <div id="content0" style="display:none">
83. </div>
85. <div id="content1" style="display:none">
86. </div>
88. <div id="content2" style="display:none">
89. </div>
91. <div id="content3" style="display:none">
92. </div>
94. </form>
96. </body></html>

Alles anzeigen

func.php

Quellcode

1. <?
2. function dummyOutput($htmlID)
3. {
4. echo $htmlID.'||';
6. if($_POST['s'] == '0')
7. {
8. echo "Ja es geht ! :)";
9. }
11. if($_POST['s'] == '1')
12. {
13. echo "<img src='kunst.jpg'>";
14. }
16. if($_POST['s'] == '2')
17. {
18. echo "drittes";
19. }
21. if($_POST['s'] == '3')
22. {
23. echo "viertes";
24. }
26. echo '||';
27. }
29. $htmlID = 'content';
32. dummyOutput($_POST['s'], $htmlID);
34. ?>

Alles anzeigen

was verursacht den fehler?

in der function sendRequest in der zeile mit

Quellcode

1. document.getElementById(update[i]).innerHTML = update[i+1];

inhalt.

Der gelesene Inhalt wird erst in ein Array gesplittet und dann wird dem HTML Element "content2" der Inhalt des nächsten Array Elements zugeordnet

*aufm schlauch steh*

grüße

Hi snowflake...

gebe ich update mit alert aus erscheint kein alert fenster... also ist update zwar gesetzt aber leer. Das wusste ich aber schon dank firebug

document.getElementById(update) is null

, wie vorher auch schon beschrieben.

Ich habe eben den code aus dem wiki halt meinen bedürftnissen angepasst, es funzt ja auch alles nur gibt es diesen komischen error... *immernochaufmschlauchsteh*

hat einer evtl eine lösung? meinen quellcode habe ich im vorherigen post von mir schon geschrieben...

danke schonmal

grüße
Timo

hej danke d0nut klappt nun wunderbar. hätt mir aber auch auffallen können

So ich will nicht schon wieder einen Fred eröffnen, deshalb häng ich das einfach hier ran, in der Hoffung, dass der ausgelutschte Thread hier doch noch von jemand gelesen wird

UPDATE d0nut: ich stehe auf viele kleine Threads -> AJAX: Passwort ändern funktion