javascript - Grails TagLib 获取元素值

Question

我有一个自己的 TagLib 和一个名为 boxLink 的标签生成远程链接并打开模态:

Closure boxLink = { attrs, body ->
    Integer modalId = OwnUtil.getRandomNumber(1000)
    Map params = attrs.params ? attrs.params : [:]
    params.put('modalId', modalId)
    Map linkParams =  params


    out << '<a href="#" class="modalBoxLink ' + attrs.class
    if (attrs.title)
        out << ' tooltipSpan" title="' + attrs.title
    out << '" onclick="'
    out << remoteFunction(controller: attrs.controller, action: attrs.action, onLoading: attrs.onClick + ';loadingSpinner()', onComplete: 'removeSpinner()',
            onSuccess: 'viewModalBox(data,' + modalId + ');initForm();', onFailure: 'errorAlert();', params: linkParams)

    out << '">'
    out << body()
    out << '</a>'
}

在某些情况下，我需要读取表单元素的值以将其放入 AJAX 请求的数据中，所以我尝试了这个

if(attrs.elementid){
    def elParam = attrs.elementid
    if(attrs.elementname)
        elParam = attrs.elementname     
    linkParams.put(elParam,"document.getElementById('${attrs.elementid}').value")
 }

这会生成 ajax 请求的这个数据值

data:{'modalId': '357','application': 'document.getElementById('elementid').value'}

如何通过获取 HTML 元素的值来设置 ajax 请求的数据属性？

Answer 1

标签库在服务器上执行，您希望生成的代码在客户端上起作用。这只能通过 javascript 实现。为此，您最好使用 jQuery 和 ajaxForm。您可以将函数绑定(bind)到模式打开或其他一些操作，并在表单中设置隐藏字段的值。

这是我使用的一个示例，它使用隐藏 div 中的 html 填充模式，并将数据添加到两个隐藏字段。请注意，我在这里没有使用 ajaxForm，但这是相同的想法。

<script type="text/javascript">
function configModal() {
    $(".clickable-row").click(function() {
        var row = $(this)
        var modal = $('#notificationModal');
        var title = row.find('td').find('a').html();
        var html = row.find('.notification-content').html();
        var notificationId = row.attr('id');
        modal.find('.modal-body').html( html );
        modal.find('.modal-title').html( title );
        modal.find('#modal-form').find('input[name=id]').attr('value', notificationId)
        modal.find('#modal-form').find('input[name=isDeleted]').attr('checked', row.hasClass('deleted'));
        modal.modal();

        $.post("${createLink(controller: 'notification', action: 'update')}",
                { id : notificationId, isRead : true },
                function() { row.addClass('read'); });
    });
}
$(document).ready(configModal);
</script>