【问题标题】:Grails TagLib Get element ValueGrails TagLib 获取元素值
【发布时间】:2016-07-01 06:05:05
【问题描述】:

我有一个自己的 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 请求的数据属性?

【问题讨论】:

    标签: javascript jquery ajax grails


    【解决方案1】:

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

    这是我使用的一个示例,它使用隐藏 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>
    

    【讨论】:

      猜你喜欢
      • 2011-02-28
      • 1970-01-01
      • 2015-09-30
      • 1970-01-01
      • 2017-09-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多