edit-in-place, hoe maak je meer db-velden bewerkbaar

Goedenavond guys!

Ik heb net een heel lieve werkende edit-in-place-functie geïmplanteerd met jQuery en AJAX. Ik kan 1 db-veld bewerken. Ik zou graag meerdere db-velden kunnen bewerken. Dit zijn alle scripts:

Zoekopdracht bijwerken (handler.php)

  <?php
 include('../../core/additional/connect-db.php');

if (isset($_POST['id']) && isset($_POST['firstname'])) {
    $firstname = mysql_real_escape_string($_POST['firstname']);
    $id = mysql_real_escape_string($_POST['id']);

    $query = "UPDATE players SET firstname ='$firstname' WHERE id='$id'";   
    $result = mysql_query($query) or die ('Query couldn\'t be executed');
    if ($result) {echo 1;}
} 

?>

En de ajax in het hoofd

<script type="text/javascript"> 

    $(document).ready(function() 
    {
        $(".editable").hover(
            function()
            {
                $(this).addClass("editHover");
            }, 
            function()
            {
                $(this).removeClass("editHover");
            }
        );

        $(".editable").bind("dblclick", replaceHTML);
        $(".btnSave, .btnDiscard").live("click", handler);

        UI("Ready");

        function UI(state)
        {
            var status = {};
            status.Ready = "Ready";
            status.Post = "Saving your data. Please wait...";
            status.Success = "Success! Your edits have been saved.";
            status.Failure = "Attempts to save data failed. Please retry.";

            var background = {};
            background.Ready = "#E8F3FF";
            background.Post = "#FAD054";
            background.Success = "#B6FF6C";
            background.Failure = "#FF5353";

            $("#status").animate({opacity: 0}, 200, function (){$("#status").html(status[state]).css({background: background[state]}).animate({opacity: 1}, 200)});
        }

        function handler()
            {
                var selector="";
                var code="21";
                if ($(this).hasClass("btnSave"))
                    {
                        UI("Post");
                        var str = $(this).siblings("form").serialize();
                        $.ajax({
                                type: "POST",
                                async: false,
                                timeout: 100,
                                url: "core/actions/handler.php",
                                data: str,
                                success: function(msg){code = msg; $(".message_edit").show(); $(".message_edit").fadeOut(2500);},                   
                        }); 
                        if(code == 1)
                        {
                            UI("Success");
                            selector = "editBox";
                        }
                        else
                        {
                            UI("Failure");
                            selector = "buffer";
                        }
                    }
                else {selector = "buffer"}

                $(this).parent()
                       .html($(this).siblings("form")
                                    .children("."+selector)
                                    .val())
                       .removeClass("noPad editHover")                     
                       .bind("dblclick", replaceHTML);

                return false;
            } 

        function replaceHTML()
            {
                var buffer = $(this).html()
                                    .replace(/"/g, """);
                $(this).addClass("noPad")
                        .html("")
                        .html("<form class=\"editor\"><input type=\"text\" name=\"firstname\" class=\"editBox\" value=\"" + buffer + "\" /> <input type=\"hidden\" name=\"buffer\" class=\"buffer\" value=\"" + buffer + "\" /><input type=\"hidden\" name=\"id\" class=\"record\" value=\"" + $(this).attr("id") + "\" /></form>Save Cancel")
                        .unbind('dblclick', replaceHTML);       
            }

    }
    ); 

    </script>

Vervolgens wordt het veld weergegeven en bewerkbaar door dit te gebruiken:

<td class="editable" id="' .($id). '" width="180">' .($task). ' </td>

Ik kan misschien alle scripts kopiëren en hernoemen, maar ik ben er zeker van dat dit niet de ideale manier is om het te doen. Ik heb geprobeerd het script in het handler.php-bestand te kopiëren en de db-velden een andere naam te geven en deed hetzelfde voor het ajax-script. Maar het werkte niet. Ik hoop dat mijn 'probleem' voor u duidelijk is, suggesties?

Opmerking: ik denk dat de oplossing ergens in deze regel ligt (onderaan het ajax-script):

.html("<form class=\"editor\"><input type=\"text\" name=\"firstname\" class=\"editBox\" value=\"" + buffer + "\" /> <input type=\"hidden\" name=\"buffer\" class=\"buffer\" value=\"" + buffer + "\" /><input type=\"hidden\" name=\"id\" class=\"record\" value=\"" + $(this).attr("id") + "\" /></form>Save Cancel")

Alvast bedankt voor het helpen! :)

0
Moet je dit met jQuery doen, of kan je dit gewoon doen met basis javascript? Als uw hulpmiddel het moeilijk maakt, is dit een eenvoudig probleem om alleen met JavaScript te doen, als dat een optie is.
toegevoegd de auteur James Black, de bron
Hallo, bedankt voor je antwoord :) Ik gebruik dit jQuery-script het liefst omdat het echt goed werkt. Ik weet dat er een manier moet zijn om meer velden bewerkbaar te maken met hetzelfde script.
toegevoegd de auteur Maarten Hartman, de bron

1 antwoord

You may want to look at using the Jeditable jQuery plugin (http://www.appelsiini.net/projects/jeditable) and for a good example of various uses you can look at the demo page: http://www.appelsiini.net/projects/jeditable/default.html

Ik hoop ook dat je dat php-script niet echt gaat gebruiken om de database bij te werken, omdat dat kwetsbaar is voor SQL-injectieaanvallen, dus het is een slechte gewoonte.

En ik zie geen element met de klasse bewerkbaar in de html, alleen editBox .

En ten slotte, dien je alle elementen in elke keer dat er een verandering komt? Dat is tamelijk inefficiënt, omdat het een voordeel is om op locatie te bewerken door elke keer kleine wijzigingen aan te brengen.

1
toegevoegd
@MaartenHartman - Het heeft niets te maken met _POST, maar met het feit dat u de gegevens rechtstreeks in uw databasequery gebruikt. Hier is een artikel over het probleem: adamsinfo.com/&hellip ; en hier is een zelfstudie: forum.codecall.net/php-tutorials/…
toegevoegd de auteur James Black, de bron
Hallo James, bedankt voor je uitgebreide antwoord. Ik zal de Jeditable opnieuw proberen, heb het eerder geïmplanteerd, maar omdat ik een beginner ben, is het nog steeds een beetje verwarrend voor mij. Kan ik u voor het beveiligingsgedeelte wijzen op een geweldige tutorial? Het heeft iets te maken met _POST toch? Nogmaals bedankt voor je tijd en goede dag voor jou :)
toegevoegd de auteur Maarten Hartman, de bron