JQuery переключение элементов для редактирования

Question

JQuery переключение элементов для редактирования

0

Привет, я пытаюсь создать скрипт редактирования в jquery, который изменяет содержимое p на поля ввода и позволяет людям редактировать их, а затем возвращаться к контенту.

мой код:

<div class="addressblock">
<div class="data">
<p name="bedrijfsnaam">company name</p>
<p name="tav">to whom</p>
<p name="adres">street and number</p>
<p name="postcode">1234AB</p> 
<p name="woonplaats">city</p>
<p name="land2" >Land</p>
</div>
<a href="#_" class="editinv" id="00001" name="edit">Edit</a>
</div>

JQuery =

$(document).ready(function () { 

$(".editinv").click(function() {

    var editid = $(this).attr("id");
    var edit_or_text = $(this).attr("name");

    if(edit_or_text == "edit"){


    $(this).closest('div').find('p').each(function(){

    var el_naam = $(this).attr("name");
    var el_content = $(this).text();

    $(this).replaceWith( "<input type='text' name='"+el_naam+"' id='" + el_id + "' value='"+el_content+"' />" );


});
$(".editinv").replaceWith( "<a href='#_' class='editinv' name='done' id='"+editid+"'>Done</a>" );

}

if(edit_or_text == "done"){

    $(this).closest('div').find('input').each(function(){

    var el_naam = $(this).attr("name");
    var el_content = $(this).attr("value");

    $(this).replaceWith( "<p name='"+el_naam+"' id='" + el_id + "'>'"+el_content+"' </p>" );


});
$(".editinv").replaceWith( "<a href='#_' class='editinv' name='edit' id='"+editid+"'>Bewerken</a>" );

}

});
});

При нажатии на редактирование он отлично меняет поля ввода и изменяет кнопку редактирования на кнопку "Готово". Щелчок по нажатой кнопке никогда не регистрируется, хотя класс тот же.

У кого-нибудь есть идеи?

Заранее спасибо!

EDIT: я создал JSfiddle проблемы http://jsfiddle.net/hBJ5a/

ITs довольно просто, почему элемент не принимает второй клик и не возвращается после уже измененного?

Snuur 23 окт. 2013, в 12:49

Источник

0

Изменения в вашей скрипке: jsfiddle.net/SAERE/2
Sorprop 23 окт. 2013, в 10:46

Теги:

javascript

jquery

html

3 ответа

Ещё вопросы

Изменения в вашей скрипке: jsfiddle.net/SAERE/2

Michael Besteck · Answer 1 · 2013-10-23T09-45-00.000Z

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
        var clickHandler = function() {
            var editid = $(this).attr("id");
            var edit_or_text = $(this).attr("name");
            if (edit_or_text == "edit") {
                $(this).closest('div').find('p').each(function() {
                    var el_id = $(this).attr("id");
                    var el_naam = el_id; //$(this).attr("name");
                    var el_content = $(this).text();
                    $(this).replaceWith("<input type='text' name='" + el_naam + "' id='" + el_id + "' value='" + el_content + "' />");
                });
                $(".editinv").replaceWith("<a href='#_' class='editinv' name='done' id='" + editid + "'>Done</a>");
            }
            else /* if (edit_or_text == "done") */ {
                $(this).closest('div').find('input').each(function() {
                    var el_id = $(this).attr("id");
                    //var el_naam = el_$(this).attr("name");
                    var el_content = document.getElementById(el_id).value;
                    // Attribute "name" not allowed on element "p" at this point
                    //$(this).replaceWith("<p name='" + el_naam + "' id='" + el_id + "'>'" + el_content + "' </p>");
                    $(this).replaceWith("<p id='" + el_id + "'>" + el_content + "</p>");
                });
                $(".editinv").replaceWith("<a href='#_' class='editinv' name='edit' id='" + editid + "'>Bewerken</a>");
            }
            document.getElementById("00001").onclick = clickHandler;
        }

        $(document).ready(function() {
            document.getElementById("00001").onclick = clickHandler;
        });
    </script>
    <style type="text/css">

    </style>
</head>
<body>
    <div class="addressblock">
        <div class="data">
            <!-- Attribute "name" not allowed on element "p" at this point -->
            <p id="bedrijfsnaam">company name</p>
            <p id="tav">to whom</p>
            <p id="adres">street and number</p>
            <p id="postcode">1234AB</p> 
            <p id="woonplaats">city</p>
            <p id="land2">Land</p>
        </div>
        <a href="#_" class="editinv" id="00001" name="edit">Edit</a>
    </div>
</body>
</html>

Протестировано с помощью Firefox 24.0/Linux

Хорошо, спасибо, но почему вы меняете el_naam на el_id? Идентификатор для всей записи адреса, имена для отдельных частей. Как это я не могу знать, что поле, что при публикации правильно?
Атрибут "name" не соответствует стандарту как используется, см. Комментарий "Атрибут 'name', запрещенный для элемента 'p' на данный момент", он взят из проверки синтаксиса моей IDE NetBeans. В теге «input» атрибут «name» является допустимым. Если вы хотите реализовать более одного «адресного блока», вы можете, например, объединить идентификатор типа «bedrijfsnaam» с идентификатором тега «a», например «bedrijfsnaam00001». Если мой ответ помог вам, я буду рад по поводу upvote.

Sivachandran · Answer 2 · 2013-10-23T09-32-00.000Z

попробуйте jQuery редактируемый плагин

demo: http://www.appelsiini.net/projects/jeditable/default.html

SidOfc · Answer 3 · 2013-10-23T07-45-00.000Z

Обратите внимание: если вы измените имя всех тегов <p> на одно и то же имя и попытаетесь вернуть их обратно, нет никакого способа, чтобы javascript знал, какое значение должно идти туда.

Вы должны добавить дополнительный параметр к тэгам <p> которые будут указывать тип.

например

<p data-type="text" name="bedrijfsnaam">compname</p>

когда изменено превратится в:

<input type="text" name="bedrijfsnaam" data-type="edit" value="compname" />

когда вы нажимаете кнопку для изменения назад, вы должны просто использовать ту же самую функцию, которую используете в настоящее время, чтобы изменить <p> на <input>, но затем отмените порядок.

например

function inputToParagraph() {

    var inputs = $('input[data-type="edit"]');
    inputs.each(function() {
        $(this).replaceWith('<p data-type="text" name="'+$(this).attr('name')+'">'+$(this).attr('value')+'</p>');
    });
}

Конечно, у вас должны быть другие действия, связанные с вашей отправкой, ajax-запрос, вероятно, также обновит базу данных.

ПРИМЕЧАНИЕ. Не проверены, но знаете, что функция выше, если указаны все attr, будет работать. Он будет напрямую заменять входы с помощью тегов P с заданными атрибутами.

Вы должны будете убедиться, что когда вы сделаете <p> в <input>, вам нужно будет убедиться, что входы также получают правильные атрибуты.