✔ Daten von MySQL Datenbank mit AJAX abrufen

forsterm · 25. Juni 2006

Hallo,
ok benutze nun folgenden Code:

Code:

<?php
    require('connect.php');
    
    if (isset($_GET['link'])){
        if ($_GET['link'] == 'edit'){
            $sql = 'SELECT * FROM tabelle WHERE id = '.intval($_GET['id']);
            $query = mysql_query($sql) or die(mysql_error());
            $ds = mysql_fetch_object($query);
            
            die('

                        <td><input type="text" name="feld1" value="'.$ds->feld1.'" size="20"></td>
                        <td><input type="text" name="feld2" value="'.$ds->feld2.'" size="20"></td>
                        <td><input type="text" name="feld3" value="'.$ds->feld3.'" size="20"></td>
                        <td><input type="text" name="feld4" value="'.$ds->feld4.'" size="20"></td>
                        <td><input type="submit" value="Speichern" name="Speichern"><br><input type="submit" value="Abbrechen" name="Abbrechen"></td>
                        <input type="hidden" name="id" value="'.$ds->id.'">
                    
            ');
            exit;
        }
    }
    
?>
<html>
    <head>
        <script type="text/javascript">
        <!--
         lock = false;
         req  = false;
            
         if(window.XMLHttpRequest) 
          {
           try 
            {
             req = new XMLHttpRequest();
            } 
           catch(e) 
            {
             req = false;
            }
           } 
          else if(window.ActiveXObject) 
           {
            try 
             {
              req = new ActiveXObject("Msxml2.XMLHTTP");
             } 
            catch(e) 
             {
              try 
               {
                req = new ActiveXObject("Microsoft.XMLHTTP");
               } 
              catch(e) 
               {
                req = false;
               }
             }
           }
                
                
        function edit(id) 
        {
         if(!req)
          {
           alert('Dein Browser kann das nicht! :o(');
           return;
          }
                
         if(lock)
          {
           alert('Warte bitte, bis die letzte Anfrage verarbeitet wurde');
           return;
          }
                
           //Die Anfrage senden
           lock = id;
           req.onreadystatechange = new Function('f','get_http_response(' + id + ')');
           req.open("GET", '<?php echo $_SERVER['PHP_SELF']; ?>?link=edit&id='+ id + '&amp;' + new Date().getTime(), true);
           req.send(true);
        }
        
        //Antwort verarbeiten
        function get_http_response(id)
        {
         //Wenn Anfrage fertig
         if(req.readyState == 4)
          {   
           //Wenn Status OK
           if(req.status == 200)
            {
             //Antwort ausgeben
             //alert(req.responseText);
             
             document.getElementById(id).innerHTML = req.responseText;
            }
           //Ansonsten
           else
            {
             //Statuscode ausgeben
             alert(req.statusText);
            }
           //Request beenden
           if(document.all && !window.opera)
            {
             req.abort();
            }
           lock = false;
          }
        }
        //-->
        </script>
    </head>
    <body>
<?php    
    $sql = 'SELECT * FROM tabelle';
    $query = mysql_query($sql) or die(mysql_error());
    
    echo '<table border="1" bordercolor="#000000" width="100%" style="border-collapse: collapse">';
    while ($ds = mysql_fetch_object($query)){
        echo '<tr id="'.$ds->id.'">
                    
                        <td>'.$ds->feld1.'</td>
                        <td>'.$ds->feld2.'</td>
                        <td>'.$ds->feld3.'</td>
                        <td>'.$ds->feld4.'</td>
                        <td><a href="#" onclick="edit('.$ds->id.')">edit</a></td>
                    
                </tr>';
    }
    echo '</table>';
?>
    </body>
</html>

So sieht das ganze nun aus. Nun zu den Problemen. Wie kann ich verhindern, dass
man zwei Datensätze gleichzeitig bearbeiten kann? Sprich so etwas sollte nicht möglich sein.
Wenn man nun auf "Abbrechen" klick dann sollen die Formularfelder wieder verschwinden wie kann man das realisieren?
Und zu guter letzt wie kann ich die Daten wieder speichern, da ich ja kein html Formular mehr habe?

Danke schon mal für deine bisherige Hilfe.

mfg
forsterm

Sven Mintel · 26. Juni 2006

Erstmal: so einfach wirds leider nicht

Falls die Sache auch im IE funktionieren soll, kann man leider den Inhalt der <tr> nicht per innerHTML ändern.

Zu dem Vermeiden der doppelten Ausführung: speichere den Originalzustand der zu bearbeitenden Sachen in einer Variable, dann kannst du ihn bei Bedarf wiederherstellen....zum Beispiel, wenn eine andere Reihe bearbeitet werden soll, aber auch, wenn mit dem Request etwas schiefgeht....oder auch beim "Abbrechen"

Zum Speichern: du musst die Inhalte der vorhandenen an die URL ranhängen, an die du den XMLHttpRequest sendest, dann kann das PHP-Skript sie dort verarbeiten.

forsterm · 26. Juni 2006

Sven Mintel hat gesagt.:
Zu dem Vermeiden der doppelten Ausführung: speichere den Originalzustand der zu bearbeitenden Sachen in einer Variable, dann kannst du ihn bei Bedarf wiederherstellen....zum Beispiel, wenn eine andere Reihe bearbeitet werden soll, aber auch, wenn mit dem Request etwas schiefgeht....oder auch beim "Abbrechen"

Hallo,
ok diesen Teil hab ich glaube ich nicht ganz verstande, wo muss ich denn da die Variable speichern?
Hab es mal so versucht, das funktioniert auch soweit, nur wenn ich dem a - Tag das href - Attribut einfüge, dann bekomme ich das Problem mit den Anführungszeichen.
Desswegen muss ich doch wohl deine Variante verwenden, nur wie?

Sven Mintel hat gesagt.:
Falls die Sache auch im IE funktionieren soll, kann man leider den Inhalt der <tr> nicht per innerHTML ändern.

Das ist mir noch gar nicht aufgefallen, dass das im IE nicht funktioniert. Ist eigentlich sehr viel Aufwand, es so umzuschreiben, dass - am besten - in allen vorwiegen aber nur im IE und FF funktionert?

mfg
forsterm

Sven Mintel · 26. Juni 2006

Naja...Variablen kannst du ja erstellen, wo und wie du willst, angenommen, du willst etwas ändern:

Code:

puffer=document.getElementById('irgendwas').innerHTML;

...wenn du jetzt abbrichst und das Original wiederherstellen wills, dann dreh die Sache einfach um:

Code:

document.getElementById('irgendwas').innerHTML=puffer;

..und alles ist wieder beim alten.

Zum IE... mehr Aufwand ist es schon, aber noch erträglich, würd ich mal sagen.
Am einfachsten würde es sich machen, wenn man nicht immer komplette Reihen, sondern nur Zellen ändert....da würde deine Variante wieder klappen, weil man im IE zwar nicht die Tabellenstruktur ansich(tr, td, etc.) per innerHTML ändern kann...den Inhalt von Tabellenzellen aber sehr wohl.

Als Mod hat man hier im Forum bspw. diverse Möglichkeiten, etwas durch Doppelklick auf einen Text zu ändern....

man klickt doppelt rauf, der Text erscheint in einem Input
man ändert den Text und dann [ENTER]...der Text steht in der DB und aus dem Input wird wieder Text
man verlässt das Input ohne [ENTER]...aus dem Input wird wieder Text, ohne etwas in die DB zu schreiben

Das liesse sich weitaus einfacher umsetzen als die Variante mit den Links, und für meinen Geschmack ist es auch bedienfreundlicher

forsterm · 26. Juni 2006

Sven Mintel hat gesagt.:
Als Mod hat man hier im Forum bspw. diverse Möglichkeiten, etwas durch Doppelklick auf einen Text zu ändern....

man klickt doppelt rauf, der Text erscheint in einem Input

man ändert den Text und dann [ENTER]...der Text steht in der DB und aus dem Input wird wieder Text

man verlässt das Input ohne [ENTER]...aus dem Input wird wieder Text, ohne etwas in die DB zu schreiben

Das liesse sich weitaus einfacher umsetzen als die Variante mit den Links, und für meinen Geschmack ist es auch bedienfreundlicher

Hallo,
das hört sich sehr gut an, daran hatte ich aus schon gedacht, nur wie kann ich das umsetzen?
Kannst du mir da ein paar Tipps oder vielleicht ein kleines Beispiel geben?

mfg
forsterm

Gumbo · 27. Juni 2006

Hier hab ich ein nettes Beispiel zum Auf-der-Stelle-Bearbeiten.

forsterm · 27. Juni 2006

Gumbo hat gesagt.:
Hier hab ich ein nettes Beispiel zum Auf-der-Stelle-Bearbeiten.

Hallo,
das sieht ja schon mal sehr gut aus. Könntest du eventuell das PHP Script, welches da im Hintergrundläuft hier posten?
Damit ich das ganze leichter nachvolziehen kann.

mfg
forsterm

Gumbo · 27. Juni 2006

Das Beispiel ist nicht von mir sondern von Drew McLellan, der dazu auch eine Beschreibung/Erklärung geschrieben hat.

Sven Mintel · 28. Juni 2006

Hier ein Skript von mir:

PHP:

<?php
  require('connect.php');
  
  define('SEPP','_');

  $fields = array('feld1',
                  'feld2',
                  'feld3',
                  'feld4');

  if(isset($_GET['f']))
    {
      if(!isset($_GET['s']))die('alert("Fehler:[STRING]")');
      if(!in_array($_GET['f'],$fields))die('alert("Fehler:[FELD]")');
      if(!isset($_GET['i']) || !is_numeric($_GET['i']))die('alert("Fehler:[ID]")');
      
      $fields = $_GET['f'];
      $sql    = 'UPDATE `tabelle` 
                 SET `'.$fields.'` = "' .mysql_real_escape_string($_GET['s']).'
                " WHERE id= '.intval($_GET['i']);
    }
  else
    {
      $fields = implode(',',$fields).',id';
      $sql    = 'SELECT '.$fields.' FROM tabelle';
    }
 

  $my_query = mysql_query($sql) 
                or die(alert(unescape("rawurlencode($sql)")));


  if(isset($_GET['f']))
  {
    if(mysql_affected_rows()==1)
      {
        echo 'RQ1.buffer=unescape("'.
              rawurlencode('<span class="uip"  ondblclick="editdata(this)" id="'.
              intval($_GET['i']).SEPP.$fields.'">'.
              htmlentities($_GET['s']).'</span>') .'");
             ';
      }
    echo 'RQ1.clear();';
    exit();
    
  }
    
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
<!--

.uip{
  border:0px none;
  margin:0;padding:0;
  font:12px Monospace;
}
input.uip{
  height:100%;
  background-color:#d1d1d1;
  color:#000;
}
span.uip{
  display:block;
  width:100%;
}
-->
</style>
<script type="text/javascript">
<!--
IE    = (window.ActiveXObject);
SEPP  = '<?php echo SEPP;?>';

function AJAXMNGR()
{
 this.init();
}

AJAXMNGR.prototype.init=function()
{
  if(window.XMLHttpRequest) 
  {
   try 
    {
     this.req = new XMLHttpRequest();
    } 
   catch(e) 
    {
     this.req = false;
    }
   } 
  else if(IE) 
   {
    try 
     {
      this.req = new ActiveXObject("Msxml2.XMLHTTP");
     } 
    catch(e) 
     {
      try 
       {
        this.req = new ActiveXObject("Microsoft.XMLHTTP");
       } 
      catch(e) 
       {
        this.req = false;
       }
     }
   }
   
}



AJAXMNGR.prototype.update=function()
{
 if(this.req.readyState == 4)
  {   
   if(this.req.status == 200)
    {
     eval(this.req.responseText);
     this.clear();
    }
   else
    {
     alert('Fehler:['+this.req.statusText+']'+this.req.statusText);
    }
  }
}

AJAXMNGR.prototype.clear=function(sended)
{
 if(typeof this.objParent != 'undefined')
    {
      if(IE)this.req.abort();
      this.objParent.innerHTML=this.buffer;
    }
  delete this.objParent;
  delete this.buffer;
}


AJAXMNGR.prototype.keypress=function(e)
{
 if(e.keyCode==13)
  {
    this.sendData();
  }
}

AJAXMNGR.prototype.sendData=function(e)
{
 if(IE)this.req.abort();
 args = this.objParent.firstChild.id.split(new RegExp(SEPP));
 this.req.onreadystatechange = new Function('RQ1.update()');
 this.req.open("GET", 
                '<?php echo $_SERVER['PHP_SELF']; ?>?i='+
                args[0]+'&f='+ args[1] + '&s=' + 
                this.objParent.firstChild.value + '&' + new Date().getTime(), true);
 this.req.send(true);
}

   
function editdata(obj)
{
  
  if(typeof RQ1=='undefined')
    {
      RQ1= new AJAXMNGR();
    }
  RQ1.clear();
  
  objParent     = obj.parentNode;
  RQ1.buffer    = objParent.innerHTML;
  uip_style     = ' style="width:'+obj.offsetWidth+';height:'+obj.offsetHeight+';" ';
  uip_keypress  = ' onkeypress="return RQ1.keypress(event)"';
  uip_blur      = ' onblur="RQ1.clear()" ';
  uip_id        = ' id="'+obj.id+'"';
  
  objParent.innerHTML=  '<input class="uip" value="'+obj.innerHTML+'"'+uip_style+uip_keypress+uip_blur+uip_id+'>';  
  setTimeout('RQ1.objParent.firstChild.focus()',100);
  RQ1.objParent=objParent;
}
//--> 
</script> 
</head>
<body>
    
<?php
if(mysql_num_rows($my_query)>0)
  {
?>

<table border="1" bordercolor="#000000"  style="border-collapse: collapse">

<?php
    while ($ds = mysql_fetch_object($my_query))
            {
              echo '<tr>
                    <td><span class="uip" ondblclick="editdata(this)" id="'.$ds->id.SEPP.'feld1">'.htmlentities($ds->feld1).'</span></td>
                    <td><span class="uip" ondblclick="editdata(this)" id="'.$ds->id.SEPP.'feld2">'.htmlentities($ds->feld2).'</span></td>
                    <td><span class="uip" ondblclick="editdata(this)" id="'.$ds->id.SEPP.'feld3">'.htmlentities($ds->feld3).'</span></td>
                    <td><span class="uip" ondblclick="editdata(this)" id="'.$ds->id.SEPP.'feld4">'.htmlentities($ds->feld4).'</span></td></tr>';
           }
?>

</table>

<?php
  }

?>
</body>
</html>

ist alles inklusive, falls die DB bei dir so aussieht, wie ich denke, sollte es sofort lauffähig sein. Falls Fragen sind, frage

forsterm · 28. Juni 2006

Sven Mintel hat gesagt.:
ist alles inklusive, falls die DB bei dir so aussieht, wie ich denke, sollte es sofort lauffähig sein. Falls Fragen sind, frage

Hallo,
vielen vielen Dank das hat wunderbar funktioniert, echt genial. So nun dürfte das Thema erledigt sein. Sollten dennoch irgendwelche Fragen auftreten, dann meld ich mich wieder. ;-]

Also nochmals vielen Dank Sven.

mfg
forsterm

✔ Daten von MySQL Datenbank mit AJAX abrufen

forsterm

Erfahrenes Mitglied

Sven Mintel

Mitglied

forsterm

Erfahrenes Mitglied

Sven Mintel

Mitglied

forsterm

Erfahrenes Mitglied

Gumbo

Erfahrenes Mitglied

forsterm

Erfahrenes Mitglied

Gumbo

Erfahrenes Mitglied

Sven Mintel

Mitglied

forsterm

Erfahrenes Mitglied

Neue Beiträge