2016-03-20 18 views
2

Ich bin ziemlich neu zu Ajax und ich bin unsicher, warum meine Funktion nicht feuert. Ich habe eine Tabelle dynamisch mit Werten aus einer MySQL-Datenbank aufgebaut. Ich versuche, die Tabelle inline bearbeiten zu können. Die Teile der Tabelle I gebaut bearbeiten möchten wie folgt ....Javascript funktioniert nicht onblur oder onclick

<tr class="table-row"> 
    <td><?php echo $row['idcpu']; ?></td> 
    <?php 
    echo "<td contenteditable=\"true\" onBlur=\"saveToDatabase(this,'name','".$row['idcpu']."');\" onClick=\"showEdit(this);\">".$row['name']." </td>"; 
    echo "<td contenteditable=\"true\" onBlur=\"saveToDatabase(this,'description','".$row['idcpu']."');\" onClick=\"showEdit(this);\">".$row['description']."</td>"; 
    echo "<td contenteditable=\"true\" onBlur=\"saveToDatabase(this,'price','".$row['idcpu']."');\" onClick=\"showEdit(this);\">".$row['price']."</td>"; 
    echo "<td contenteditable=\"true\" onBlur=\"saveToDatabase(this,'quantity','".$row['idcpu']."');\" onClick=\"showEdit(this);\">".$row['quantity']."</td>"; ?> 
</tr> 

Und Javascript als so .....

<script> 
    function saveToDatabase(editableObj,column,id) { 
     $(editableObj).css("background","#FFF url(Loading_icon.gif) no-repeat right"); 
     $.ajax({ 
      url: "update/cpu.php", 
      type: "POST", 
      data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id, 
      success: function(data){ 
       $(editableObj).css("background","#FDFDFD"); 
      } 
     }); 
    } 
</script> 

Ich habe viele verschiedene Wege versucht, die der Ausgabe Code zu HTML, also weiß ich, dass das nicht das Problem ist, aber ich könnte einfach etwas verpasst haben, das ich benötige, wie ich sagte, dass ich ziemlich neu bin. Jede Hilfe würde sehr geschätzt werden

+0

Anstelle von 'contenteditable' verwenden Sie' textarea' oder 'input'. 'contenteditable' ist sehr komplex und überhaupt nicht freundlich. 'textarea' und' input' sind Standard, zuverlässig und es gibt ein paar Crossbrowser-Möglichkeiten, um sie zu manipulieren. – zer00ne

+0

Ich habe angefangen, jetzt Input zu verwenden, während ich es geschafft habe, meinen onclick zu arbeiten, mein onblur feuert immer noch nicht die Funktion saveToDatabase. Der Hintergrund ändert sich nicht, es wird kein Bild geladen und die PHP-Seite läuft nicht – JackGroves

+0

Für Formularelemente anstelle von 'innerHTML' verwenden Sie' obj.value' für JS oder '$ (obj) .val()' für jQuery. Anstelle von Onblur verwenden Sie 'onchange'. Es gibt Details für die Verwendung von Formularen, mit denen Sie vertraut sein müssen. Diese Ressource ist ein guter Anfang: http://www.dyn-web.com/tutorials/forms/ – zer00ne

Antwort

0

Ihr Code scheint gut zu funktionieren. Sie können hier einen Blick:

JSBin Example

ich es mit Chrome v49 getestet haben.

Als @ Zer00ne erwähnt, sollten Sie versuchen, <input> verwenden, indem Sie es in die <td> Elemente verschachteln und den Ajax-Aufruf bei Eingabeänderung ausführen. Browser Support ist viel besser.

+0

Ich habe es geändert, so dass ich jetzt Texteingabe anstelle von contenteditable benutze. Obwohl Sie sagen, dass es funktioniert, sind die Felder, die ich bearbeite, editierbar, aber die Änderung wird nicht beibehalten. Die PHP-Datei, die ich referenziere, läuft nicht und die css-Änderungen werden nicht ausgeführt. Erwarte ich, dass mein Code etwas anderes tut? Ich brauche es nur, um die Werte an das PHP-Skript zu senden. – JackGroves

+0

Ich glaube, ich habe vergessen zu erwähnen, dass meine PHP-Seite ein Skript ausführt, das die Datenbank mit den eingegebenen Informationen aktualisiert – JackGroves

Verwandte Themen