Блог

Добрый вечер, ребята!

Мне только что удалось внедрить действительно удобную рабочую функцию редактирования на месте с помощью jQuery и AJAX. Я могу отредактировать 1 поле БД. Я хотел бы иметь возможность редактировать несколько полей БД. Это все сценарии:

Запрос на обновление (handler.php )

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

if (isset($_POST['id']) amp;amp; 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;}
} 

?>
  

И ajax в голове

 <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, "amp;quot;");
                $(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><a href="#" class="btnSave">Save</a> <a href="#" class="btnDiscard">Cancel</a>")
                        .unbind('dblclick', replaceHTML);       
            }

    }
    ); 

    </script>
  

Затем поле отображается и редактируется с помощью этого:

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

Я мог бы скопировать и переименовать все скрипты, но я уверен, что это не идеальный способ сделать это. Я попытался скопировать скрипт в handler.php файл и переименовал поля БД, и сделал то же самое для сценария ajax. Но это не сработало. Я надеюсь, что моя «проблема» вам понятна, есть предложения?

Примечание: я думаю, что решение находится где-то в этой строке (внизу сценария ajax):

 .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><a href="#" class="btnSave">Save</a> <a href="#" class="btnDiscard">Cancel</a>")
  

Заранее спасибо за помощь! 🙂

Возможно, вы захотите рассмотреть возможность использования Jeditable плагина jQuery (http://www.appelsiini.net/projects/jeditable ) а хороший пример различных применений вы можете посмотреть на демонстрационной странице: http://www.appelsiini.net/projects/jeditable/default.html

Кроме того, я надеюсь, что вы на самом деле не собираетесь использовать этот php-скрипт для обновления базы данных, поскольку он уязвим для атак с использованием SQL-инъекций, так что это плохая практика.

И я не вижу ни одного элемента с классом editable в html, просто editBox .

И, наконец, вы отправляете все элементы каждый раз, когда требуется внести изменения? Это довольно неэффективно, поскольку одним из преимуществ редактирования на месте является просто отправка небольших изменений каждый раз.