You are not logged in.

  • Login

Datenbank mit Ajax modernisieren

Dear visitor, welcome to Coder Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Billie

Intermediate

  • "Billie" started this thread

Posts: 64

  • Send private message

1

Tuesday, November 25th 2008, 5:29pm

Datenbank mit Ajax modernisieren

Hallo Community :)

Möchte mich kurz vorstellen, heiße Billie und habe Grundkenntnisse in den Programmiersprachen C++, Visual Basic, PHP und schon vielleicht auch in Ajax.

Nun zu meinem Problem: Ich habe von Apache Friends den lokalen Server (XAMPP), darauf eine Datenbank mit einigen Tabellen. Viele der Tabellen haben bereits über 700 Datensätze.

Bis jetzt habe ich die Datenbank mit einer in PHP programmierten Oberfläche bearbeitet, sprich - ich kann die Datensätze löschen, editieren und einen neuen Datensatz einfügen. Wie erwähnt, alles in PHP.

Wegen der Größe ist die Bearbeitung der Datensätze nun immer langsamer geworden. Wenn ich beispielsweise einen Datensatz ändern möchte und ihn dann abspeichere, werden die ganzen anderen 700 Datensätze

ebenfalls aktualisiert und die Seite komplett neu geladen, obwohl ich nur einen Datensatz geändert habe. Nun möchte ich die gesamte Datenbank mit Ajax-Technologie modernisieren.

Ich erhoffe mir dadurch, dass wenn ein Datensatz gelöscht, editiert oder geändert wird, die gesamte Tabelle nicht nochmal aktualisiert dargestellt wird, sondern eben nur der eine betroffene Datensatz.

Nun hab ich bereits schon ein wenig in Ajax programmiert...in einem kleinem Programm kann ich einen neuen Datensatz per Ajax in eine kleine Testtabelle einfügen und mit einem kleinen separaten Skript kann ich "per" Ajax einen Datensatz auslesen.


Ich wollte euch nun fragen, ob ihr mir helfen könntet, einen Ansatz zu geben, wo ich in den reinen PHP-Skripten Ajax "einbinden" soll.

Keine Sorge, mein PHP ist recht einfach gestrickt und programmiert, für jede Tabelle in meiner Datenbank hab ich ein separates PHP Skript in dem alle Funktionen (Löschen usw.) stehen. ^^

Ich hoffe ihr könnt mir helfen und freue mich schon auf euer Feedback.

PS: Die Ansätze zum Einfügen/Auslesen eines Datensatzes mit Ajax hab ich aus diesem Forum :thumbup:

Snowflake

Professional

Posts: 370

  • Send private message

2

Tuesday, November 25th 2008, 5:55pm

Hey also Ajax kannst du natürlich für die Bearbeitung von bestimmten Datensätzen benutzen. Sprich löschen, bearbeiten, erstellen eines Eintrages der Datenbank.

Aber für mich hört sich das so an, als ob du immer die kompletten > 700 Einträge ausliest? Wenn ja würde sich vllt eine Aufteilung auf Seiten anbieten. z.B. pro Seite werden nur 50 Datensätze ausgelesen. Würde die Sache schonmal aufjedenfall beschleunigen.

Billie

Intermediate

  • "Billie" started this thread

Posts: 64

  • Send private message

3

Tuesday, November 25th 2008, 7:21pm

Quoted from "Snowflake"

Hey also Ajax kannst du natürlich für die Bearbeitung von bestimmten Datensätzen benutzen. Sprich löschen, bearbeiten, erstellen eines Eintrages der Datenbank.


Das hört sich schon einmal gut an :)

Quoted from "Snowflake"


Aber für mich hört sich das so an, als ob du immer die kompletten > 700 Einträge ausliest? Wenn ja würde sich vllt eine Aufteilung auf Seiten anbieten. z.B. pro Seite werden nur 50 Datensätze ausgelesen. Würde die Sache schonmal aufjedenfall beschleunigen.


Ja, wenn ich einen Datensatz ändere und speichere, wird die komplette Seite nochmal neu geladen, also liest er jeden Datensatz aus der Tabelle/Datenbank neu aus.

Wie bereits erwähnt dauert bei der jetzigen Programmierung der Neuaufbau der Seite mittlerweile extrem lange und wenn ich mehrere Datensätze ändern muss, wird das eine zeitintensive Angelegenheit.

Ich würde deshalb das ganze auf Ajax modernisieren...weil die Datenbank wächst stätig und das wäre die optimale Lösung.

Ich würde gerne einmal meinen jetztigen Standard-PHP-Skript posten und dann schon einmal die Ajax Grundzüge für Datenbanken.

Vielleicht könntet ihr mir dann helfen? :)

BennyBunny

Master

Posts: 966

  • Send private message

4

Tuesday, November 25th 2008, 7:32pm

Warum liest du denn eigentlich alle Einträge auf einmal aus, also wie SnowFlake schon meinte. Mehrere Seiten und pro Seite 20 Einträge o.ä.
Latest blogs Latest blogs: Oracle übernimmt Sun, Java SE 6 Update 12 verfügbar, Java 1.6.0 Update 10

student2312

Intermediate

Posts: 121

  • Send private message

5

Tuesday, November 25th 2008, 8:24pm

Falls du wirklich alle 700 auf einer Seite haben willst könntest du die Datensätze in DIV Elemente packen und diese bei Bedarf ansprechen:

Folgende Struktur in der PHP Schleife erstellen, die die Datenbank ausliest:

HTML Code

 
1
2
3

<div id="DATEN_1"><span>Datensatz</span><a onClick="ajax('loeschen','1')">LÖSCHEN</a></div>
<div id="DATEN_2"><span>Datensatz</span><a onClick="ajax('loeschen','2')">LÖSCHEN</a></div>
<div id="DATEN_3"><span>Datensatz</span><a onClick="ajax('loeschen','3')">LÖSCHEN</a></div>

Dann Ajax:

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

function ajax(was,id){ 
     ajaxid = id;
     action = was; 
    //erstellen des requests
                 var req = null;
 
                try{
                    req = new XMLHttpRequest();
                }
                catch (ms){
                    try{
                        req = new ActiveXObject("Msxml2.XMLHTTP");
                    } 
                    catch (nonms){
                        try{
                            req = new ActiveXObject("Microsoft.XMLHTTP");
                        } 
                        catch (failed){
                            req = null;
                        }
                    }  
                }
 
                if (req == null)
                      alert("Error creating request object!");
 
                  //anfrage erstellen (GET, url mit den GET Variablen,
                  //request ist asynchron      
                  req.open("GET", 'AJAX.php?action='+action+'&id='+ajaxid, true);
 
                //Beim abschliessen des request wird diese Funktion ausgeführt
                req.onreadystatechange = function(){ 
 
                    switch(req.readyState) {
                            case 4:
                            if(req.status!=200) {
                                alert("Fehler:"+req.status); 
                            }else{    
                                //schreibe die antwort in den div container mit der richtigen id
                                document.getElementById('DATEN_'+ajaxid).innerHTML = req.responseText; // HIER WIRD DIE DIV NEU BEFÜLLT: bei Delete mit nichts, bei edit mit aktuellen Daten
                            }
                            break;
 
                            default:
                                return false;
                            break;     
                        }
                    };
 
                  req.setRequestHeader("Content-Type",
                                      "application/x-www-form-urlencoded");
                req.send(null);
}


In der AJAX.php kannst du nun je nach ankommender action handeln.

PHP Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
//AJAX.php
...
$id  = $_GET['id'];
switch ($_GET['action']){
case 'loeschen':
dbquery("DELETE....");
// Keine Ausgabe => Div wird leer
break;
case 'editieren':
dbquery("UPDATE....");
//Wichtig, das wird der akutualisierte Inhalt!!
echo '<span>Datensatz</span><a onClick="ajax(\"loeschen\",\"'.$id.'\")">LÖSCHEN</a>'; 
break;
 
}
?>


So grob könnte das funktionieren.
Ansonsten kann ich dir nur das Wiki empfehlen ;)

This post has been edited 2 times, last edit by "student2312" (Nov 25th 2008, 8:30pm)

Billie

Intermediate

  • "Billie" started this thread

Posts: 64

  • Send private message

6

Tuesday, November 25th 2008, 8:52pm

Quoted from "BennyBunny"

Warum liest du denn eigentlich alle Einträge auf einmal aus, also wie SnowFlake schon meinte. Mehrere Seiten und pro Seite 20 Einträge o.ä.


Die Unterteilung würde auch funktionieren, allerdings würden das viele Seiten werden und da nicht nur ich mit der Datenbank arbeite, müssten die anderen Benutzer den richtigen Datensatz auf den einzelnen Seiten

immer suchen. Außerdem betrachte ich das als gute Gelegenheit meine (noch mageren :S ) Ajax-Kenntnisse zu erweitern und Viel zu lernen.

@student2312

Danke für den Ansatz...ich werde jetzt damit arbeiten und versuchen es richtig umzusetzen, könnte aber etwas schwieriger für mich werden.

Aber schon mal Danke an Alle, die so schnell antworten konnten! :thumbup:

Snowflake

Professional

Posts: 370

  • Send private message

7

Tuesday, November 25th 2008, 9:49pm

Hey. Also das mit der Seitenaufteilung und dem durchsuchen jeder einzelnen Seite, könnte man natürlich auch mit einer (Ajax)-Suche, vereinfachen. Das der User einfach eingibt was für ein Datensatz er gerne hätte.


Aber da du sagst, du hast nicht so viel Ahnung von Ajax, also es ist wichtig, dass jeder Datensatz aus der Datenbank ein eigenes Element hat (div,span,p usw.) mit einer nicht doppelt vorkommenden ID.
Das hat dir student2312 ja schon verdeutlicht denke ich.
Wenn du was von diesem Codeschnipel den student2312 dir gepostet hast nicht verstehst, musst du bescheid sagen. Ich denke hier wird dir versucht alles zu erklären.


Aber um das mal ein bisschen zu verdeutlichen:

HTML Code

 
1

<div id="DATEN_1"><span>Datensatz</span><a onClick="ajax('loeschen','1')">LÖSCHEN</a></div>

Das Div hat die ID "DATEN_1" beim klick auf den link, wird die funktion ajax aufgerufen, und die parameter löschen und 1 übergeben.
Mit denen arbeitet man in der Funktion ajax() weiter.

Das "löschen" wird als $_GET['action'] an die PHP Datei weitergegeben, um zu unterscheiden welche Aktion du ausführen willst. (löschen, bearbeiten u.s.w)
Und die ID wird übergeben, damit du dort in PHP weiter arbeiten kannst. Also den bestimmten bearbeiten.
Die Funktion ajax() arbeitet auch damit weiter und zwar am ende des Ajax Request hilft dir diese ID nur das Div-Element "DATEN_1" zu aktualisieren.


Und wenn du das alles schon wusstest, auch gut :P

student2312

Intermediate

Posts: 121

  • Send private message

8

Tuesday, November 25th 2008, 11:24pm

Ja die Erklärungen sind etwas kurz gekommen, aber Fußball Champions League stand kurz bevor 8)
So wie oben würde ich es lösen, es geht sicher auch etwas eleganter.
Das wichtige ist, dass Du die Schleife findest, die Dir die Datensätze liefert und darin jeden Datensatz mit einer DIV mit eindeutiger ID umgibst.
So kannst du drauf zugreifen. Snowflake hat ja schon einige Erklärungen geliefert warum und wie.
Vor dem Javascript Code nicht erschrecken, der Großteil ist eine standard Vorlage.
Wichtige Teile des Javascripts:
Hier wird die Datei aufgerufen, die deinen Request bearbeitet. Die Parameter werden mittels normaler GET Funktion übergeben.

JavaScript Code

 
1

req.open("GET", 'AJAX.php?action='+action+'&id='+ajaxid, true);

Der Teil schaut verwirrend aus, bedeutet aber nichts anderes als, dass die AJAX.php eine Antwort auf den Request gegeben hat.

JavaScript Code

 
1
2
3
4
5

switch(req.readyState) {
                            case 4:
                            if(req.status!=200) {
                                alert("Fehler:"+req.status); 
                            }else{  //Daten kommen verarbeitet zurück

Hier wird die Ausgabe der AJAX.php in das gewünschte DIV Element eingefügt.

JavaScript Code

 
1

document.getElementById('DATEN_'+ajaxid).innerHTML = req.responseText;


Wichtig für die AJAX.php:
Mit der Datenbank verbinden

PHP Quellcode

 
1
2

$conn = mysql_connect('localhost','root') or exit(mysql_error());
mysql_select_db('MeineDatenbank', $conn) or exit(mysql_error());

Wenn die Get Variable ankommt die Daten verarbeiten.

PHP Quellcode

 
1
2
3

if(isset($_GET['action'])){
//Hier die Aktionen (z.B. mit switch)
}


Alles was du auf der Ajax.php ausgibst wird an die Original Datei zurückgeschickt und das Seite Neu Laden entfällt.

PHP Quellcode

 
1
2
3

echo 'das zum Beispiel';
//oder auch
echo '<span>DATENSATZ</span><a onClick="....></a>';


Mir fällt grad auf, dass du zum editieren von Datensätzen evtl. Probleme mit der GET übergabe bekommst . Brauchst du das Script nur zum löschen oder auch zum editieren?

Billie

Intermediate

  • "Billie" started this thread

Posts: 64

  • Send private message

9

Wednesday, November 26th 2008, 3:45pm

Quoted from "student2312"



Mir fällt grad auf, dass du zum editieren von Datensätzen evtl. Probleme mit der GET übergabe bekommst . Brauchst du das Script nur zum löschen oder auch zum editieren?


Ich möchte damit editieren, löschen und einen komplett neuen Datensatz einfügen können.

Also, ich habe jetzt eine kleine Testdatenbank angelegt, in der ganz simpel nur eine ID und ein Herstller steht...also z.B ID=1 Hersteller=HP. Davon ein paar Datensätze zum testen, damit es übersichtlich bleibt.

Ich arbeite jetzt mit zwei PHP-Skripten, einmal die verbindung.php, in der halt die Zugangsdaten zum localen Server sind.

PHP Quellcode

 
1
2
3
4
5
6
7
8
9

<?
         $dbuser="root";
         $dbpass="";
         $dbhost="localhost";
         $dbname="database";
 
         $Verbindung=mysql_connect($dbhost,$dbuser,$dbpass) or die ("DB Verbindung gescheitert");
         $db=mysql_select_db($dbname,$Verbindung) or die ("DB wurde nicht gefunden");
?>


Und dann habe ich noch ein Skript, in dem alle Funktionen zum löschen, editieren, neuen Datensatz einfügen und speichern usw. drin sind. Ich hab den einzelnen Abschnitten/Funktionen Überschriften gegeben...

PHP Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

<html>
<body>
<?
 
         include ("verbindung.php");
 
//**************Funktion zum Auslesen der Datensätze**************************************************************************
 
         function datenarray ($Abfrage)
         {
                 $res = mysql_query ($Abfrage);
                 while($daten=mysql_fetch_array($res))
                 {
                         $speicher[]=$daten;
                 }
                 return $speicher;
         }
 
//*************Löschen********************************************************************************************************
 
         if($_POST["cmd_loeschen"] && $_POST["opt_haken"])
        {
                $loeschsatz=$_POST["opt_haken"];
                foreach($loeschsatz as $delete_id)
                {
                        $Abfrage="delete from pc where id = $delete_id";
                        echo "$Abfrage<br>";
                        $res=mysql_query($Abfrage);
                }
              }
 
//*************Einfügen*******************************************************************************************************
 
        if($_POST["cmd_einfuegen"])
        {
                 mysql_query("insert into pc (`id`,`hersteller`) values('".$_POST["txt_id"]."','".$_POST["txt_hersteller"]."')");
                $res=mysql_query($sql);
              }
 
//*************Ändern und Speichern*******************************************************************************************
         if($_POST["cmd_aendern"])
        {
                 $auswahl=$_POST['opt_haken'];
                 echo "<form action='' method='post'>";
                    foreach($_POST['opt_haken'] as $id)
                    {
                                $abfrage= mysql_query("select * from pc where id=$id");
 
                                $data= mysql_fetch_array($abfrage);
                                echo"<br><br>Hersteller: <input type='Text' name='txt_hersteller[$id]' value='".$data['hersteller']."' size='20' maxlength='30'><br>";
                                echo"<br>ID: <input type='Text' name='txt_id[$id]' value='".$data['id']."'size='8' maxlength='6'><br>";
                    }
                    echo"<br><input type='Submit' name='cmd_speichern' value='Speichern'>";
                    echo"</form>";
        }
 
        elseif($_POST["cmd_speichern"])
        {
                foreach($_POST["txt_hersteller"] as $changeid => $neu)
                {
                         $Abfrage="update pc set hersteller='$neu' where id=$changeid";
                         mysql_query($Abfrage);
                }
 
                foreach($_POST["txt_id"] as $changeid => $neu)
                {
                         $Abfrage="update pc set id='$neu' where id=$changeid";
                         mysql_query($Abfrage);
                 }
         }
//****************************************************************************************************************************
            $Abfrage = "select * from pc order by id";
            $daten = datenarray($Abfrage);
            $anz = count($daten);
 ?>
 
         <h2>Tabelle: PC</h2>
         <form action="" method="post">
 <?
 
         echo"<table border=1>";
         echo"<tr>
                 <th></th>
                 <th>ID</th>
                 <th>Hersteller</th>
         </tr>";
 
           for ($i=0;$i<$anz;$i++)
           {
                 echo "<tr>
                         <td><input type='checkbox' name='opt_haken[]' value='".$daten[$i]["id"]."'></td>
                         <td>".$daten[$i]["id"]."</td>
                         <td>".$daten[$i]["hersteller"]."</td>
                 </tr>";
           }
                 echo "</table>";
 
 
           echo "<br><input type='Submit' name='cmd_loeschen' value='Löschen'></input>";
           echo "<br><br><input type='Submit' name='cmd_aendern' value='Ändern'>";
           echo "<br><br><h4>Neuen Datensatz einfügen</h4>";
           echo "Hersteller:  <input type='text' name='txt_hersteller' value='$abschluesse'size='20' maxlength='50'></input>";
           echo "<br>ID:<input type='text' name='txt_id' size='20' maxlength='5'>";
           echo "<br><br><input type='Submit' name='cmd_einfuegen' value='Einfügen'>";
?>
</body>
</html>


Ich werde dann jetzt mal versuchen, das umzusetzen, was ihr mir geschrieben habt :)

This post has been edited 1 times, last edit by "Billie" (Nov 26th 2008, 4:21pm)

Billie

Intermediate

  • "Billie" started this thread

Posts: 64

  • Send private message

10

Wednesday, November 26th 2008, 5:12pm

Also ich habe jetzt mal ein wenig rumporbiert und die ersten Schwierigkeiten bekommen. Wie ihr an meinem Quellcode erkennen könnt, frage ich einfach ab, ob ein Häkchen gesetzt und ein Button gedrückt wurde. Das Frage ich dann mit "if" für die einzelnen Operationen ab. Dann habe ich das Problem, jeden Datensatz in ein Div Feld zu packen...ich versteh 100%ig wozu man das braucht, allerdings weiss ich nicht, wie ich das bei mir einbinden soll und das jedes Div eine andere ID bekommt. Bei mir liefert die funktion "datenarray" die Datensätze, allerdings geh ich davon aus, dass ich irgendwo in Zeile 72-73 die Div-Elemente erstellen muss?

Denn JavaScript Code habe ich einfach übernommen, in der Art und Weise hatte ich ihn bei meinen bisherigen Ajax Anwendungen ebenfalls...scheint also irgendwo standard zu sein. @student 2312 - Danke für die ausführliche Beschreibung, wieder mehr verstanden :thumbup:

Nun zur AJAX.php...bei eurer Vorgabe stehen in dem Skript auch die Befehle, um den Datensatz zu bearbeiten (DELETE, UPDATE....), allerdings hab ich da wegen den if-Abfragen Probleme.

Könnt ihr mir da nochmal helfen?

student2312

Intermediate

Posts: 121

  • Send private message

11

Wednesday, November 26th 2008, 8:19pm

Hm ich bin wirklich nicht sicher, ob das mit AJAX am besten gelöst ist... Löschen und Hinzufügen wäre kein Problem, aber wenn du Editieren willst, wird es dann schon deutlich aufwendiger weil du zu jedem Datensatz ein Textfeld brauchst, dass dann erscheint. Im Moment ist das ja so bei dir:

Datensatz1
Datensatz2
...
Datensatz700
___________
löschen/editieren/hinzufügen -> Klickt man editieren wird die Seite neu geladen und es erscheinen die benötigten Textfelder:

edit1
edit56 -> Abschicken -> cmd_speichern und die Daten werden eingetragen
Datensatz1
Datensatz2
...
Datensatz700
___________
löschen/editieren/hinzufügen

Da mit Ajax die Seite nicht neu lädt, müsstest du z.B. mit createElement() dynamisch Textfelder erstellen oder du versteckst unter den einzelnen Datensätzen 700 Textfelder, die dann bei Bedarf eingeblendet werden. Ich glaube ohne Javascript Vorkenntnisse wird das Alles sehr sehr aufwendig die dann richtig zu erzeugen und in den Ajax request zu integrieren (ich wüsste aus dem Stehgreif auch nicht wie das am besten zu lösen wäre).

Ich glaube es ist fast sinnvoller das bestehende Format noch zu optimieren. Ich finde deine aktuelle Lösung eigentlich sehr ordentlich. Einige Vorschläge dazu:
- Seitenzahlen - z.B in 100ter Schritten. Ich denke (ohne zu wissen was die Daten sind), dass tendentiell eher die neueren Daten verändert werden und seltener Nr. 695.
- Deine verschiedenen Optionen fixieren: mit der CSS Eigenschaft position:fixed hast du die Optionen immer verfügbar und musst nicht jedesmal ganz nach unten scrollen:

PHP Quellcode

 
1
2
3
4
5
6
7
8

echo '<div style="position:fixed;bottom:50px;">';
           echo "<br><input type='Submit' name='cmd_loeschen' value='Löschen'></input>";
           echo "<br><br><input type='Submit' name='cmd_aendern' value='Ändern'>";
           echo "<br><br><h4>Neuen Datensatz einfügen</h4>";
           echo "Hersteller:  <input type='text' name='txt_hersteller' value='$abschluesse'size='20' maxlength='50'></input>";
           echo "<br>ID:<input type='text' name='txt_id' size='20' maxlength='5'>";
           echo "<br><br><input type='Submit' name='cmd_einfuegen' value='Einfügen'>";
echo '</div>';

- eine Suchfeld, was die Hersteller durchsucht - Wenn man doch mal die Nr 695 sucht.

Denke das sind sinnvolle Erweiterungen, die die Ajax Vorteile kompensieren können und wohl deutlich umgänglicher sind.

Was auch noch eine Möglichkeit wäre:
Auf der Seite werden NUR z.B. die neuesten 100-200 Daten gezeigt. Und falls man doch alle 700 sehen will ist am Ende ein button hierfür. So würde im Normalfall nur das aktuelle geladen und falls man wirklich mal alle auf einmal sehen will kann man das bei Bedarf machen. Dadurch würden beim editieren etc nicht immer alle geladen werden.

PS: Wenn man auf editieren klickt, ist es glaube ich überflüssig nochmal alle Datensätze drunter zu laden, man will ja nur editieren.
Das könntest du in Zeile 72 einfügen:

PHP Quellcode

 
1
2
3

if(!isset($_POST["cmd_aendern"])){
#Datensätze laden#
}

This post has been edited 2 times, last edit by "student2312" (Nov 26th 2008, 8:38pm)

Billie

Intermediate

  • "Billie" started this thread

Posts: 64

  • Send private message

12

Wednesday, November 26th 2008, 10:47pm

Quoted from "student2312"

Hm ich bin wirklich nicht sicher, ob das mit AJAX am besten gelöst ist... Löschen und Hinzufügen wäre kein Problem, aber wenn du Editieren willst, wird es dann schon deutlich aufwendiger weil du zu jedem Datensatz ein Textfeld brauchst, dass dann erscheint.


Da gebe ich Dir recht, die Geschichte mit dem Editieren ist sicherlich kompliziert.

Ich würde trotzdem gerne versuchen, zunächst nur das Löschen und Hinzufügen eines Datensatzes in Ajax zu lösen, weil ich habe auch Tabellen, die jetzt nicht so groß sind und über 700 Datensätze haben, wobei hier der der größte Vorteil mit Ajax sein würde.

Das würde ich dann zunächst auf einer kleinen Datenbank, wie oben gepostet, testen.

Ich bin mir nicht sicher, kann ich das in das bestehende PHP-Skript "einbauen" oder soll ich erstmal klein anfangen? Ich würde am liebsten erstmal klein anfangen und nur Löschen und Hinzufügen machen...danach kann man vielleicht noch mit dem Editieren schauen, allerdings würde ich mich sehr über Löschen und Hinzufügen freuen :)

philippgerard

Professional

Posts: 292

  • Send private message

13

Thursday, November 27th 2008, 1:03am

Editieren per Ajax wird üblicherweise als "in place editing" bezeichnet, ein Howto wie das geht findest Du bspw. hier: http://tool-man.org/examples/edit-in-place.html

student2312

Intermediate

Posts: 121

  • Send private message

14

Thursday, November 27th 2008, 1:12am

Ich kann dir einen Vorschlag machen, wie du deine Struktur aufbauen kannst, ansonsten ist im wiki ein wirklich hervorragendes Beispiel wie man mittels Ajax Daten via POST verschicken kannst. Ich schaffe heute nur löschen (ist schon spät).
Schritt 1 wichtige Elemente kennzeichnen, damit wir später darauf zugeifen können:

PHP Quellcode

 
1
2
3
4
5
6
7
8
9
10

echo"<table border=1 id='tabelle'>";
           for ($i=0;$i<$anz;$i++)
           {
                 echo "<tr id='spalte".$daten[$i]["id"]."'>
                         <td><input type='checkbox' name='opt_haken[]' value='".$daten[$i]["id"]."'></td>
                         <td>".$daten[$i]["id"]."</td>
                         <td>".$daten[$i]["hersteller"]."</td>
                 </tr>";
           }
                 echo "</table>";

Dann brauchst du aus dem Wiki die Funktionen ajaxPost() und getFormData()
Funktion erweitern um die Aktion:

JavaScript Code

 
1

function ajaxPost(url, postData, callback, action) {


So rufst du die Funktionen auf:

PHP Quellcode

 
1
2
3
4
5

echo "<br><input type='button' name='cmd_loeschen' value='Löschen' onClick='ajaxPost(\'ajax.php\', \'ajax&\'+getFormData(\'opt_haken\'),\'tabelle\',\'loeschen\');'>";
           echo "<br><br><input type='Submit' name='cmd_aendern' value='Ändern'>";
           echo "Hersteller:  <input type='text' name='txt_hersteller' value='$abschluesse'size='20' maxlength='50' id='insert_text'>";
           echo "<br>ID:<input type='text' name='txt_id' size='20' maxlength='5' id='insert_text'>";
echo "<br><br><input type='button' name='cmd_einfuegen' value='Einfügen' onClick='ajaxPost(\'ajax.php\', \'ajax&\'+getFormData(\'opt_haken\')+\'&neuer_text=\'+insert_text.value,\'tabelle\',\'einfuegen\');'>";

In der ajaxPost Funktion die Aktionen verarbeiten:

JavaScript Code

 
1

req.open('POST', url+'?myaction='+action, true);

in der ajax.php kommt die action und die Daten an:

PHP Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$action = $_GET['myaction'];
switch($action){
case 'loeschen':
if($_POST['opt_haken']){
$loeschsatz=$_POST["opt_haken"];
                foreach($loeschsatz as $delete_id)
                {
                        $Abfrage="delete from pc where id = $delete_id";
                        echo "$Abfrage<br>";
                        $res=mysql_query($Abfrage);
                }
}
break;
case 'einfuegen':
break;
}

Nun musst du die Elemente noch aus der Oberfläche löschen dazu wieder in die Ajax Funktion:

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

req.onreadystatechange =  function() {
		if (req.readyState == 4 && req.status == 200) {
                      if(action == 'loeschen'){
                /*Elemente verstecken - wieder mit einem Teil der getFormData Funktion (umständlich)*/
                for(var i=0; i<document.getElementById('tabelle').elements.length; i++) {
		var el = form.elements[i];
		var type = (el.type || '');
 
		if(type.match(/^(text|hidden|textarea)$/i) || (type.match(/^(radio|checkbox)$/i) && el.checked)) {
			add(el.name, el.value);
		} else if(el.nodeName.match(/^select$/i)) {
			for(var j=0; j<el.options.length; j++) {
				if(el.options[j].selected) {
                                        /*Sollte die gewünschten Spalten verstecken*/
					document.getElementById('spalte'+el.options[j].value).style.display = 'none';
				}
			}
		} 
	}
 
                       }
		}
	};

Soviel als Tip von meiner Seite, jetzt musst Du schauen, wie du das am besten bei Dir integrierst. Vorsicht, es hat sich sicher der ein oder andere Syntax Fehler eingeschlichen - ist ungetestet und teilweise etwas umständlich ^^.
Für den Javascript debug: firebug

Viel Erfolg

Billie

Intermediate

  • "Billie" started this thread

Posts: 64

  • Send private message

15

Thursday, November 27th 2008, 10:59am

Ich habe Deine Vorschläge versucht zu integrieren und habe bis jetzt folgendes.

Die JavaScript-Datei

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

function ajaxPost(url, postData, callback, action) {
 
         var req;
         try {
                 req = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
             } catch (e) {
                 req = null;
 
                 if (req == null)
                      alert("Error creating request object!");
        }
        req.onreadystatechange = function() {
                if (req.readyState == 4 && req.status == 200) {
                         if(action == 'loeschen'){
 
                         for(var i=0; i<document.getElementById('tabelle').elements.length; i++) {
                                 var el = form.elements[i];
                                 var type = (el.type || '');
 
                                 if(type.match(/^(text|hidden|textarea)$/i) || (type.match(/^(radio|checkbox)$/i) && el.checked)) {
                                         add(el.name, el.value);
                                 } else if(el.nodeName.match(/^select$/i)) {
                                 for(var j=0; j<el.options.length; j++) {
                                         if(el.options[j].selected) {
                                         document.getElementById('spalte'+el.options[j].value).style.display = 'none';
                                 }
                        }
 
                        if(typeof callback == 'string') callback = document.getElementById(callback);
                        if(callback) callback.innerHTML = req.responseText;
                }
        }
 
                       }
                }
        };
 
        req.open('POST', url+'?myaction='+action, true);
        req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        req.send(postData);
 
        return false;
}


und so sieht z.Z die PHP-Datei aus

PHP Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<html>
<body>
<?
 
         include ("verbindung.php");
 
//**************Funktion zum Auslesen der Datensätze**************************************************************************
 
         function datenarray ($Abfrage)
         {
                 $res = mysql_query ($Abfrage);
                 while($daten=mysql_fetch_array($res))
                 {
                         $speicher[]=$daten;
                 }
                 return $speicher;
         }
 
//*************Operationen****************************************************************************************************
 
         $action = $_GET['myaction'];
         switch($action){
         case 'loeschen':
         if($_POST['opt_haken']){
                 $loeschsatz=$_POST["opt_haken"];
                         foreach($loeschsatz as $delete_id)
                         {
                                 $Abfrage="delete from tabelle where id = $delete_id";
                                 echo "$Abfrage<br>";
                                 $res=mysql_query($Abfrage);
                         }
                 }
                 //break;
                 //case 'einfuegen':
                 //break;
         }
 
//*************Einfügen*******************************************************************************************************
 
        if($_POST["cmd_einfuegen"])
        {
                 mysql_query("insert into pc (`id`,`hersteller`) values('".$_POST["txt_id"]."','".$_POST["txt_hersteller"]."')");
                $res=mysql_query($sql);
              }
 
//****************************************************************************************************************************
 
            $Abfrage = "select * from tabelle order by id";
            $daten = datenarray($Abfrage);
            $anz = count($daten);
 ?>
 
         <h2>Tabelle: Hersteller</h2>
         <form action="" method="post">
 <?
 
         echo"<table border=1 id='tabelle'>";
 
 
           for ($i=0;$i<$anz;$i++)
           {
                 echo "<tr id='spalte".$daten[$i]["id"]."'>
                         <td><input type='checkbox' name='opt_haken[]' value='".$daten[$i]["id"]."'></td>
                         <td>".$daten[$i]["id"]."</td>
                         <td>".$daten[$i]["title"]."</td>
                 </tr>";
           }
                 echo "</table>";
 
 
echo "<br><input type='button' name='cmd_loeschen' value='Löschen' onClick='ajaxPost(\'ajax.php\', \'ajax&\'+getFormData(\'opt_haken\'),\'tabelle\',\'loeschen\');'>";
           echo "<br><br><input type='Submit' name='cmd_aendern' value='Ändern'>";
           echo "Hersteller:  <input type='text' name='txt_hersteller' value='$abschluesse'size='20' maxlength='50' id='insert_text'>";
           echo "<br>ID:<input type='text' name='txt_id' size='20' maxlength='5' id='insert_text'>";
echo "<br><br><input type='button' name='cmd_einfuegen' value='Einfügen' onClick='ajaxPost(\'ajax.php\', \'ajax&\'+getFormData(\'opt_haken\')+\'&neuer_text=\'+insert_text.value,\'tabelle\',\'einfuegen\');'>";
?>
</body>
</html>


Ich habe aus der PHP Datei das Editieren und Speichern erstmal entfernt, damit es übersichtlicher wird.

Beim Ausführen werden schon mal die Datensätze geladen, wenn ich jedoch nun einen Datensatz löschen will, zeigt Firebug einen Fehler in der ersten Zeile der ajax.php an ("illegal character" => ajaxPost(\ ajax.php Linie1)

student2312

Intermediate

Posts: 121

  • Send private message

16

Thursday, November 27th 2008, 1:52pm

hast du das so geschrieben

JavaScript Code

 
1

ajaxPost(\'ajax.php\',\'...\')

?

Billie

Intermediate

  • "Billie" started this thread

Posts: 64

  • Send private message

17

Thursday, November 27th 2008, 3:24pm

Quoted from "student2312"

hast du das so geschrieben

JavaScript Code

 
1

ajaxPost(\'ajax.php\',\'...\')

?


Das fehlt mir im JavaScript-Code komplett ?(

An welche Stelle kommt der Befehl? weil ich habe ihn nur im Php-Teil bei den Buttons unten (onClick)

student2312

Intermediate

Posts: 121

  • Send private message

18

Thursday, November 27th 2008, 3:37pm

Ja, da gehört es auch hin.
Funktioniert es mit /" statt /'?

Billie

Intermediate

  • "Billie" started this thread

Posts: 64

  • Send private message

19

Thursday, November 27th 2008, 8:23pm

Quoted from "student2312"

Ja, da gehört es auch hin.
Funktioniert es mit /" statt /'?


Wenn ich es mit /" ausprobiere, bekomme ich folgende Fehlermeldung

ajaxPost is not defined
onclick(click clientX=41, clientY=188)lOA7BsQY...j2Q%3D%3D (Linie 2)
[Break on this error] ajaxPost("ajax.php", "ajax&" + g...ta("opt_haken"), "tabelle", "loeschen");

Meines Wissens sollte /' richtig sein.

Ich habe folgenden Code jetzt auch in den Java-Skript Code eingefügt, allerdings kommt immer noch die gleiche Fehlermeldung.

Ich bin mir aber nicht sicher, ob ich das richtig gemacht habe...ich weiß, ich nerve euch schon ^^

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

function ajaxPost(url, postData, callback, action) {
 
         var req;
         try {
                 req = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
             } catch (e) {
                 req = null;
 
                 if (req == null)
                      alert("Error creating request object!");
        }
        req.onreadystatechange = function() {
                if (req.readyState == 4 && req.status == 200) {
                         if(action == 'loeschen'){
 
                         ajaxPost(\'ajax.php\', \'ajax&\'+getFormData(\'opt_haken\'),\'tabelle\',\'loeschen\');   <== den hier meine ich
                         for(var i=0; i<document.getElementById('tabelle').elements.length; i++) {
                                 var el = form.elements[i];
                                 var type = (el.type || '');
 
                                 if(type.match(/^(text|hidden|textarea)$/i) || (type.match(/^(radio|checkbox)$/i) && el.checked)) {
                                         add(el.name, el.value);
                                 } else if(el.nodeName.match(/^select$/i)) {
                                 for(var j=0; j<el.options.length; j++) {
                                         if(el.options[j].selected) {
                                         document.getElementById('spalte'+el.options[j].value).style.display = 'none';
                                 }
                        }
 
                        if(typeof callback == 'string') callback = document.getElementById(callback);
                        if(callback) callback.innerHTML = req.responseText;
                }
        }
 
                       }
                }
        };
 
        req.open('POST', url+'?myaction='+action, true);
        req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        req.send(postData);
 
        return false;
}

student2312

Intermediate

Posts: 121

  • Send private message

20

Friday, November 28th 2008, 12:05pm

Nene, da gehört es nicht hin, nur in den PHP Teil! Das Ding mit dem /" ist ja nur weil es verschachtelte Anführungszeichen sind.
Und das ajaxPost wird auch nur im PHP Teil aufgerufen, und nicht noch einmal in der Funktion.

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function ajaxPost(url, postData, callback, action) {
         var req;
         try {
                 req = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
             } catch (e) {
                 req = null;
 
                 if (req == null)
                      alert("Error creating request object!");
        }
        req.onreadystatechange = function() {
                if (req.readyState == 4 && req.status == 200) {
                         if(action == 'loeschen'){
                         for(var i=0; i<document.getElementById('tabelle').elements.length; i++) {
                                 var el = tabelle.elements[i];
                                 var type = (el.type || '');
                                 if(type.match(/^(checkbox)$/i) && el.checked)) { //Nicht ganz sicher hier
                                  document.getElementById('spalte'+el.value).style.display = 'none';
                                 }
                        }
                     }
             }
        }      
 
        req.open('POST', url+'?myaction='+action, true);
        req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        req.send(postData);
 
        return false;
}

So könnte der JS Teil ausschauen (ohne Garantie, pass auf Syntaxfehler auf), jetzt musst du die Funktion noch richtig aufrufen.

Similar threads

Tagging

Social bookmarks