So speichern und rufen Sie editierbare Daten ab

Lesezeit: 9 Minuten

So speichern und rufen Sie editierbare Daten ab
Samuel Visser

Ich möchte den Text einiger Seiten ändern können. Die Verwendung von contenteditable wäre perfekt für mich.
Das Problem ist, dass ich nur in PHP programmieren kann. Ich habe stundenlang im Internet gesucht, um es zum Laufen zu bringen, aber ich verstehe einfach nicht die Programmiersprachen, die verwendet werden, um die Daten ausreichend zu speichern, damit es funktioniert.

So möchte ich, dass es funktioniert:

  1. Der Administrator drückt auf die Schaltfläche „Bearbeiten“.
  2. div wird bearbeitbar.
  3. Wenn der Administrator mit der Bearbeitung fertig ist, drückt er auf die Schaltfläche „Speichern“.
  4. Die Daten werden in einer Datei oder Datenbank gespeichert (weiß nicht wirklich, was die beste Option wäre).
  5. Der bearbeitete Inhalt wird angezeigt, wenn die Seite geöffnet wird.

Das ist alles, was ich jetzt habe:

<div class="big_wrapper" contenteditable>
  PAGE CONTENT
</div>

Ich weiß, wie man das Teil macht, indem man das Div in ein contenteditable Div umwandelt, wenn der Administrator auf „Bearbeiten“ klickt.
Mein Problem ist, dass ich wirklich keine Ahnung habe, wie ich die bearbeiteten Daten speichern soll.
Ich weiß auch nicht, ob es schwierig wäre, die Daten aus einer Datei abzurufen, hängt davon ab, wie die Daten gespeichert werden. Wenn es in einer Datenbank gespeichert ist, hätte ich kein Problem, es abzurufen, aber ich weiß nicht, ob das möglich ist und ob das die beste Option ist.

Danke für Ihre Hilfe,

Samuel

BEARBEITEN:

@gibberish, vielen Dank für deine superschnelle Antwort!
Ich habe versucht, es zum Laufen zu bringen, aber es funktioniert noch nicht. Ich kann nicht herausfinden, was ich falsch mache.

Hier ist mein Code:
over_ons.php:

<div class="big_wrapper" contenteditable>
  PAGE CONTENT
</div>

<input type="button" value="Send Data" id="mybutt">

<script type="text/javascript">
  $('#mybutt').click(function(){
    var myTxt = $('.big_wrapper').html();
    $.ajax({
        type: 'post',
        url:  'sent_data.php',
        data: 'varname=" +myTxt+ "&anothervar=" +moreTxt
  });
});
</script>

sent_data.php:

<?php
 session_start();
include_once("./main.php');
include($main .'connectie.php');

$tekst=$_POST['myTxt'];

$query="UPDATE paginas SET inhoud='" .$tekst. "' WHERE id='1'";

mysql_query($query);
?>

Nochmals vielen Dank für Ihre großartige Hilfe!
Können Sie mir auch helfen, das div nur dann bearbeitbar zu machen, wenn der Benutzer eine Schaltfläche drückt?

LÖSUNG:

Ich habe über 2 Wochen gebraucht, um endlich alles zum Laufen zu bringen. Ich musste Javascript, jQuery und Ajax lernen. Aber jetzt funktioniert es einwandfrei. Ich habe sogar ein paar Extras für die Extravaganz hinzugefügt 🙂
Ich würde gerne teilen, wie ich das gemacht habe, wenn jemand das Gleiche tun möchte.

over_ons.php:

//Active page:
$pagina="over_ons"; ?>
<input type="hidden" id='pagina' value="<?php echo $pagina; ?>"> <!--Show active page to javascript--><?php
//Active user:
if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin'){
$editor = $_SESSION['gebruikersnaam']; ?>
<input type="hidden" id='editor' value="<?php echo $editor; ?>"> <!--Show active user to javascript--><?php  
} ?>

<!--Editable DIV: -->
<div class="big_wrapper" id='editable'>
    <?php
        //Get eddited page content from the database
        $query=mysql_query("SELECT inhoud FROM paginas WHERE naam_pagina="" .$pagina. """);
        while($inhoud_test=mysql_fetch_array($query)){
            $inhoud=$inhoud_test[0];
        }

        //Show content
        echo $inhoud;
    ?>
</div>

<!--Show edit button-->
<?php
if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin')
{?>
    <div id='sidenote'>
        <input type="button" value="Bewerken" id='sent_data' class="button" />
        <div id="feedback" />
    </div>
<?php }

Da dies eine ziemlich lange und komplizierte Datei ist, habe ich versucht, die meisten meiner Kommentare ins Englische zu übersetzen.
Wenn Sie etwas übersetzen möchten, das noch nicht übersetzt ist, ist die Originalsprache Niederländisch.

javascript.js:

//If the system is in edit mode and the user tries to leave the page,
//let the user know it is not so smart to leave yet.
$(window).bind('beforeunload', function(){
var value = $('#sent_data').attr('value'); //change the name of the edit button

if(value == 'Verstuur bewerkingen'){
    return 'Are you sure you want to leave the page? All unsaved edits will be lost!';
}
});

//Make content editable
$('#sent_data').click(function(){
    var value = $('#sent_data').attr('value'); //change the name of the edit button

    if(value == 'Bewerken'){
        $('#sent_data').attr('value', 'Verstuur bewerkingen');  //change the name of the edit button
        var $div=$('#editable'), isEditable=$div.is('.editable'); //Make div editable
        $div.prop('contenteditable',!isEditable).toggleClass('editable')
        $('#feedback').html('<p class="opvallend">The content from<BR>this page is now<BR>editable.</p>');
    }else if(value == 'Verstuur bewerkingen'){
                var pagina = $('#pagina').val();
                var editor = $('#editor').val();
                var div_inhoud = $("#editable").html();
                $.ajax({
                type: 'POST',
                url:  'sent_data.php',
                data: 'tekst=" +div_inhoud+ "&pagina=" +pagina+ "&editor=" +editor,
                success: function(data){
                Change the div back tot not editable, and change the button"s name
                    $('#sent_data').attr('value', 'Bewerken');  //change the name of the edit button
                    var $div=$('#editable'), isEditable=$div.is('.editable'); //Make div not editable
                    $div.prop('contenteditable',!isEditable).toggleClass('editable')
                    
                //Tell the user if the edditing was succesfully
                    $('#feedback').html(data);
                    setTimeout(function(){
                        var value = $('#sent_data').attr('value'); //look up the name of the edit button
                        if(value == 'Bewerken'){ //Only if the button's name is 'bewerken', take away the help text
                        $('#feedback').text('');
                        }
                        }, 5000);
                    }
                    }).fail(function() {
                    //If there was an error, let the user know
                        $('#feedback').html('<p class="opvallend">There was an error.<BR>Your changes have<BR>not been saved.<BR>Please try again.</p>');
                    });
    }
});

Und schlussendlich,
sent_data.php:

<?php
session_start();
include_once('./main.php');
include($main .'connectie.php');

//Look up witch page has to be edited
$pagina=$_POST['pagina'];
//Get the name of the person who eddited the page
$editor=$_POST['editor'];
//Get content:
$tekst=$_POST['tekst'];
$tekst = mysql_real_escape_string($tekst);

$query="UPDATE paginas SET naam_editer="" .$editor. "", inhoud='" .$tekst. "' WHERE naam_pagina="" .$pagina. """;

}
    if(mysql_query($query)){
        echo "<p class="opvallend">Successfully saves changes.</p>";
    }else{
        echo "<p class="opvallend">Saving of changes failed.<BR>
        Please try again.</p>";
    }
?>

1647175328 39 So speichern und rufen Sie editierbare Daten ab
cssyphos

Verwenden Sie eine clientseitige Sprache wie JavaScript (oder am besten jQuery), um zu verwalten, ob die Eingabefelder bearbeitet werden können.

Verwenden Sie AJAX, um die Felddaten zu erfassen und in eine PHP-Datei abzufeuern, die die Daten in Ihrer Datenbank speichern würde.

Hier ist ein sehr vereinfachtes Beispiel für die Verwendung von jQuery zur Verwaltung der Aktivierung/Deaktivierung der Eingabefelder:

jsFiddle-Demo

$('.editable').prop('disabled',true);

$('.editbutt').click(function(){
    var num = $(this).attr('id').split('-')[1];
    $('#edit-'+num).prop('disabled',false).focus();
});

$('.editable').blur(function(){
    var myTxt = $(this).val();
    $.ajax({
        type: 'post',
        url:  'some_php_file.php',
        data: 'varname=" +myTxt+ "&anothervar=" +moreTxt
    });
});

PHP-Datei: some_php_file.php

<?php 
    $myVar = $_POST["varname'];
    $secondVar = $_POST['anothervar'];
    //Now, do what you want with the data in the vars

Die Verwendung von AJAX ist ganz einfach. Ich habe ein sehr kurzes Beispiel dafür gegeben, wie es aussehen würde. Suchen Sie nicht in HTML oder jQuery nach der moreTxt Variable — Ich habe das hinzugefügt, um zu zeigen, wie Sie dem Ajax eine zweite Datenvariable hinzufügen würden.

Hier sind einige grundlegende Beispiele, um Sie mit Ajax vertraut zu machen:

AJAX-Anforderungsrückruf mit jQuery


Es gibt keinen kurzen Weg zum Erlernen von jQuery oder AJAX. Lesen Sie die Beispiele und experimentieren Sie.

Hier finden Sie einige hervorragende, kostenlose jQuery-Tutorials:

http://thenewboston.com

http://phpacademy.org


AKTUALISIEREN BEARBEITEN:

Um auf Ihre Kommentaranfrage zu antworten:

Um Daten von einem DIV an eine PHP-Datei zu senden, benötigen Sie zunächst eine Veranstaltung das löst den Code aus. Wie Sie bereits erwähnt haben, kann dies ein Eingabefeld sein blur() Ereignis, das ausgelöst wird, wenn Sie ein Feld verlassen. Auf einen <select>es kann die sein change() Ereignis, das ausgelöst wird, wenn Sie eine Auswahl treffen. Aber auf einem DIV … nun, der Benutzer kann nicht mit einem div interagieren, richtig? Der Auslöser muss etwas sein, das der Benutzer tutwie z. B. das Klicken auf eine Schaltfläche.

Der Benutzer klickt also auf eine Schaltfläche – Sie können den Inhalt des DIV mithilfe von abrufen .html() Befehl. (Bei Eingabefeldern und Auswahlsteuerelementen würden Sie verwenden .val()aber für DIVs und Tabellenzellen müssen Sie verwenden .html(). Code würde so aussehen:

So senden Sie DIV-Inhalte, nachdem auf eine Schaltfläche geklickt wurde:

HTML:

<div class="big_wrapper" contenteditable>
    PAGE CONTENT
</div>
<input id="mybutt" type="button" value="Send Data" />

jQuery:

$('#mybutt').click(function(){
    var myTxt = $('.big_wrapper').html();
    $.ajax({
        type: 'post',
        url:  'some_php_file.php',
        data: 'varname=" +myTxt+ "&anothervar=" +moreTxt
    });

});

  • Ich habe versucht, jQuery und AJAX zu lernen, indem ich Totorials folge. Ich habe gelernt, dass das Blur-Event nur bei Eingabefeldern funktioniert. Und ich möchte kein Eingabefeld, sondern ein div. Was ist der beste Weg, um Daten vom div an die PHP-Datei zu senden? Übrigens machst du in deinem Beispiel ein Eingabefeld mit einem Button editierbar. Ich habe viele Dinge versucht, um das div so zu machen, dass es nur bearbeitet werden kann, wenn man auf eine Schaltfläche drückt, aber es konnte nicht funktionieren. Für mich ist es auch in Ordnung, nur PHP zu verwenden, um das div editierbar zu machen, aber vielleicht ist es mit jQuery einfach und vielleicht können Sie mir erklären, wie man ein div mit einem Button in jQuery editierbar macht?

    – Samuel Visser

    12. September 2014 um 18:44 Uhr


  • Ich habe den Teil, in dem ich das div bearbeitbar mache, nachdem ich auf die Schaltfläche geklickt habe, jetzt erledigt, nur mit PHP und einem Formular, wie ich es gewohnt bin. Jetzt müssen Sie nur noch die Schaltfläche “Daten gesendet” zum Laufen bringen und den Text im div an die PHP-Datei senden. (Übrigens, ich habe die PHP-Datei ohne jQuery getestet und es funktioniert. Ich weiß also mit Sicherheit, dass die Daten noch nicht an die PHP-Datei gesendet werden, wenn dies der Fall ist, werden die Daten in der Datenbank sein.)

    – Samuel Visser

    12. September 2014 um 20:15 Uhr

  • Bitte, bitte, bitte … Lesen Sie meine vollständige Antwort oben sorgfältig durch. Versuch es. Probieren Sie dann jeden dieser AJAX-Links aus – experimentieren Sie ein wenig. Ich verspreche, Sie hätten alles in etwa 45 Minuten erledigt (davon 30 Minuten zum Lernen/Testen) und Sie werden mit dem Endergebnis sehr zufrieden sein. Sie haben jetzt viele Stunden an diesem Problem gearbeitet – was haben Sie zu verlieren?

    – cssyphos

    12. September 2014 um 20:47 Uhr


  • Ich verstehe nicht wirklich warum, aber das Hinzufügen von

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy