показывать поля ввода вместо текста при нажатии на ссылку «изменить» - PullRequest
1 голос
/ 01 апреля 2011

Я сейчас создаю бэкэнд. Что мне нужно, это некоторые jquery, чтобы вставить несколько различных полей формы. Я могу, например, иметь этот код:

<div>
    <div>
        Name
    </div>
    <div>
        Type
    </div>
    <div>
        <a class="edit" href="#">Edit</a>
    </div>
</div>

Этот код необходимо преобразовать, чтобы текст Name и Type вставлял значения двух полей ввода, когда я нажимаю a.edit

EDIT:

Я пробовал этот код - но когда я нажимаю "a.ff-save", он не предупреждает ??? В чем моя проблема?

<script type="text/javascript">
$(document).ready( function() {
    var this_form_id = $("input#form_id").val();
    $("#formfield-list div.formfield-ff:odd").css('background', '#f6f6f6');


    $("a.ff_add").click( function() {
        var name_val = $("input#new_field_name").val();
        var type_val = $("input#new_field_type").val();
        var demand_val = $("input#new_field_demand").val();
        $.ajax({
            type: "POST",
            url: "{pref_folder}/admix/forms/addFormField",
            data: ({ form_id: this_form_id, field_name: name_val, field_type: type_val, field_demand: demand_val }),
            success: function(text) {

                $.ajax({
                    type: "post",
                    url: "{pref_folder}/admix/forms/getFormFields",
                    data: { form_id: this_form_id },
                    success: function(t) {
                        $("#formfield-list").empty().append(t);
                        $("#formfield-list div.formfield-ff:odd").css('background', '#f6f6f6');
                    },
                    dataType: "html"
                });


                $(".add-succes-message").empty().append('<div class="msg">'+text+'</div>');
                $(".add-field-row").slideUp(500, function(){
                    $(".add-field-row").slideDown(500);
                }).delay(3500);
                $(".add-succes-message").slideDown(500, function(){
                    $(".add-succes-message").slideUp(500);
                }).delay(3500);

            },
            cache: false,
            async: false,
            dataType: "html"
        });
    });

    $("a.ff-save").click(function (){
        alert("ok");
    });

    $("a.ff-edit").click(function (){
        var fid = $(this).prev().val();

        var nameValue = $("#ff-"+fid+" div.ff-name").html().trim();
        var typeValue = $("#ff-"+fid+" div.ff-type").html().trim();
        var demandValue = $("#ff-"+fid+" div.ff-demand").html().trim();
        var typeInt;

        if( typeValue == "Tekstfelt, 1 linje" )
        {
            typeInt = 1;
        } else {
            typeInt = 0;
        }


        $("#ff-"+fid+" div.ff-name").html('<input type="text" name="name" class="jq-input" value="'+nameValue+'" />');
        $("#ff-"+fid+" div.ff-type").html('<input type="text" name="type" class="jq-input" value="'+typeInt+'" />');
        if( demandValue == "Ja")
        {
            $("#ff-"+fid+" div.ff-demand").html('<input type="checkbox" name="demand" class="jq-input" value="" checked="checked" />');
        } else {
            $("#ff-"+fid+" div.ff-demand").html('<input type="checkbox" name="demand" class="jq-input" value="" />');
        }

        $("#ff-"+fid+" .ff-edit, #ff-"+fid+".ff-delete").hide();
        $("#ff-"+fid+" div:last").html('<a href="#" class="ff-save">Save</a>');
    });

    $("a.ff-delete").click();
});
</script>

Ответы [ 3 ]

7 голосов
/ 01 апреля 2011

Проверьте этот плагин jQuery. Это именно то, что вы ищете.

JEditable

Если вы не склонны использовать плагин, попробуйте следующий код:

<div>
    <div>
        <label class="editable">Name</label>
        <input class="editable" type="text" name="name" style="display:none"/>
    </div>
    <div>
        <label class="editable">Type</label>
        <input class="editable" type="text" name="type" style="display:none"/>
    </div>
    <div>
        <a class="edit" href="#">Edit</a>
    </div>
</div> 
<script type="text/javascript">
    $(function(){
        $(".edit").click(function(){
            var $this = $(this);
            var text = $this.text();
            if(text=="Edit"){
                $this.text("Cancel");
            }
                        else{
                             $this.text("Edit");
                        }
            $(".editable").toggle();
        });

        $("input.editable").change(function(){
            $(this).prev().text($(this).text());

        });
    });
</script>

EDIT:

Чтобы привязать обработчик события click к элементу привязки, используйте функцию live jQuery. например:

$("a.ff-save").live("click", function (){         
 alert("ok");     
});
6 голосов
/ 07 сентября 2013

Я попробовал несколько разных подходов, и вот что я придумал:

HTML:

<span class="subject">
    <span class="text"> subject </span>
    <input class="input" type="text" name="subject" val="subject" hidden/>
</span>

Jquery:

function showInput(){
    $(this).off('click');
    $(this).siblings('input').each(function(){$(this).show();});
    $(this).siblings('input').focus();
    $(this).hide();
}
function hideInput(){
    $(this).hide();
    $(this).siblings('span').show();
    $(this).siblings('span').click(showInput);
}
$(function(){
    $('.text').click(showInput);
    $('.input').blur(hideInput);
}

Проще говоря, когда вы нажимаете на заданный текст, он превращается в поле ввода, а когда поле ввода теряет фокус, он снова превращается в обычный текст.

Я также сделал функции показа / скрытия отдельными вызываемыми функциями, чтобы можно было сбросить прослушиватель щелчков внутри функции hideInput.

1 голос
/ 01 апреля 2011

Я сделал что-то подобное на работе, вот мое решение:

HTML

<div id='container'>
    <div id='name' class='text'>
        Name
    </div>
    <div id='type' class='text'>
        Type
    </div>
    <div>
        <a class="edit" href="#">Edit</a>
    </div>
</div>

JQuery

function StartEditState() {
    var container = $('#container');
    container.find('a.edit').unbind('click').click(SaveEditState).html('Save'); //this changes edit button save button
    container.find('div.text').each(function() {
        $(this).html('<input class="new_val" type="text" value="' + $(this).html() + '" /><input class="orig_val" type="hidden" value="' + $(this).html() + '" />'); // this creates a hidden with the old value and an input that they can change
    });
    return false;
}

Чтобы сохранить значения, вам просто нужно сделать это $('#name input.new_val').val() (для имени используйте #type для типа) или для возврата к исходным значениям используйте $('#name input.orig_val').val()

Надеюсь, вам понравится.

...