可编辑多个链接

时间:2011-03-28 14:35:07

标签: javascript jquery inline jeditable

尝试使jeditable编辑多个链接,并在提交时更新结果

function inlineEditData(linkId){
    $('.inlineLinkEdit_' + linkId).editable('crudDocumentationLink.htm', {  
        event     : 'editclick',
        submit    : 'Save',
        cancel    : 'Cancel',
        indicator : '<img src="images/indicator.gif">',
        width     : 600,
        onsubmit  : function(value, settings) {
            $('.inlineLink_' + linkId).href=value;
            $('.inlineLink_' + linkId).innerHTML=value;
            $('.inlineLink_' + linkId).show();
            $('.inlineLinkEdit_' + linkId).hide();
            $('.inlineLinkTrigger_' + linkId).show();
        },
        onreset  : function(value, settings) {
            $('.inlineLink_' + linkId).show();
            $('.inlineLinkEdit_' + linkId).hide();
            $('.inlineLinkTrigger_' + linkId).show();
        }
    });
}

function editLink(linkId){
    $('.inlineLink_' + linkId).hide();
    $('.inlineLinkEdit_' + linkId).show();
    $('.inlineLinkTrigger_' + linkId).hide();

    inlineEditData(linkId);

    $('.inlineLinkEdit_' + linkId).trigger('editclick');
}

和html:

<a href="${document.link}" class="inlineLink_${document.id}" id="inlineEdit_${document.id}">${document.link}</a>
<span style="display:none;" class="inlineLinkEdit_${document.id}" id="inlineEdit_${document.id}">${document.link}</span>
<span class="inlineLinkTrigger_${document.id}" onclick="editLink(${document.id})" style="cursor:pointer;">edit</span>

编辑工作。但我希望根据用户输入更新页面上的值。那我的代码有什么问题?

1 个答案:

答案 0 :(得分:0)

最后我设法做到了(问题在于正确设置文本)。 我将“onsubmit”更改为“callback”,并在其中输入前两行。

$('.inlineLink_' + linkId).attr({"href":$('.inlineLinkEdit_' + linkId).text()});
$('.inlineLink_' + linkId).text($('.inlineLinkEdit_' + linkId).text());