Question

我正在尝试使用其中的表单构建一个引导程序popover。（可能）特殊情况是onclick事件，由于我无法在其中转义单引号而导致问题。我尝试了几个转义序列（\＆＃39; - \\＆＃39; - ＆＃34;）但没有成功。仅限＆＃34;模板呈现正常，但仍然无法正常工作 - 虽然我看不到任何错误消息。 html代码（花括号来自smarty）：

<img src="edit.gif" alt="" data-toggle="popover" date-html="true" data-content="<textarea id='{$SUPPLIER.id}ta'>{$SUPPLIER.comment}</textarea><img src='disc.gif' alt='' onclick=&quot;alert($('{$SUPPLIER.id}ta').val);&quot;>">

所以我的下一次尝试是将popover内容放在一个隐藏的div中并使用一个函数获取它，但是没有显示弹出窗口：

//document ready

$('[data-toggle="popover"]').popover({
    html : true,
    content:function() {
        if($(this).data('container')) {
            //loads data from e.g. a hidden div
            var elem = $(this).data('container');
            //alert here shows correct content
            return $(elem).html();
        } else {
            return $(this).data('content');
        }
    }
});

//html
<img src="edit.gif" alt="" title="{get text="Set Comment"}" data-toggle="popover" data-container="#ta_container{$SUPPLIER.id}">
<div id="ta_container{$SUPPLIER.id}" class="hide">
    <textarea id="ta{$SUPPLIER.id}">{$SUPPLIER.comment}</textarea><img src="disc.gif" alt="" onclick="alert($('#ta{$SUPPLIER.orderpart_id}').val);">
</div>

Answer 1

这里有一个带有使用Bootstrap-Dialog插件的工作示例的snipplet。

$('.supplier-link').on('click', function(){
  // Get parameter
  var supplierId = $(this).attr('data-supplier-id');
  var supplierComment = $(this).attr('data-supplier-comment');
  // Open Dialog and provide param
  BootstrapDialog.show({
      title: 'Supplier ' + supplierId,
      message: '<textarea>' + supplierComment + '</textarea>',
      data: {
          'supId': supplierId
      },      
      buttons: [
        {
            label: 'Action with supplier',
            cssClass: 'btn-primary',
            action: function(dialogRef){
                alert('Do somehting with supplier id ' + dialogRef.getData('supId'));
            }
        }
      ]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet"/>


<span class="supplier-link" data-supplier-id="Your_Smarty_SupplierIdXX" data-supplier-comment="Your_Smarty_SupplierCommentXX">img of supplier XX</span>
<br>
<span class="supplier-link" data-supplier-id="Your_Smarty_SupplierIdYY" data-supplier-comment="Your_Smarty_SupplierCommentYY">img of supplier YY</span>

表单

1 个答案: