2016-11-30 37 views
0

我将jquery确认小部件添加到一个超链接。尽管点击取消,并确认模式确定,它将重定向到链接。如何限制它。这里是我的代码片段magento中的jquery确认小部件2

HTML文件

<td class="col id" > 
    <a class="action edit" id="edit" href="<?php /* @escapeNotVerified */ echo $block->getEditUrl($_gridrecord->getEntityId()); ?>" data-ui-id="default-shipping-edit-link"> 
    <span> 
     <?php /* @escapeNotVerified */ echo __('Edit'); ?> 
    </span> 
    </a> 

jQuery脚本

<script type="text/javascript">// <![CDATA[ 
require([ 
     'jquery', 
     'Magento_Ui/js/modal/confirm' 
    ], 
    function($, confirmation) { 
     $('#edit').on('click', function(event){ 
       confirmation({ 
      title: 'Some title', 
      content: 'Some content', 
      actions: { 
       confirm: function(){}, 
       cancel: function(){ 
        return false; 
       }, 
       always: function(){} 
      } 
      }); 
     }); 
     } 
); 
// ]]></script> 

回答

0

试试这个:

<script type="text/javascript">// <![CDATA[ 
require([ 
     'jquery', 
     'Magento_Ui/js/modal/confirm' 
    ], 
    function($, confirmation) { 
     $('#edit').on('click', function(event){ 
      event.preventDefault; 
       confirmation({ 
      title: 'Some title', 
      content: 'Some content', 
      actions: { 
       confirm: function(){}, 
       cancel: function(){ 
        return false; 
       }, 
       always: function(){} 
      } 
      }); 
     }); 
     } 
); 
// ]]></script> 

<script type="text/javascript">// <![CDATA[ 
require([ 
     'jquery', 
     'Magento_Ui/js/modal/confirm' 
    ], 
    function($, confirmation) { 
     $('#edit').on('click', function(event){ 
       confirmation({ 
      title: 'Some title', 
      content: 'Some content', 
      actions: { 
       confirm: function(){}, 
       cancel: function(){ 
        return false; 
       }, 
       always: function(){} 
      } 
      return false; 
      }); 
     }); 
     } 
); 
// ]]></script> 

这不会重定向到您的链接。

+0

不,这不是working.actully重定向链接并显示此模式对话框的平行回事。 –

+0

任何人都可以请共享示例代码在超链接中使用的magento 2中的jquery小部件 –

1

你想要这样的东西。

<script type = 'text/javascript'> 
    require([ 
      'jquery', 
      'Magento_Ui/js/modal/confirm' 
     ], 
     function ($, confirmation) { 
     $('.cancel').click(function (event) { 
      event.preventDefault(); 

      var url = event.currentTarget.href; 
      confirmation({ 
       title: 'Cancel order', 
       content: 'Do you wish to cancel this order?', 
       actions: { 
        confirm: function() { 
         window.location.href = url; 
        }, 
        cancel: function() {}, 
        always: function() {} 
       } 
      }); 
      return false; 
     }); 
    }); 
</script> 

,关键是要叫event.preventDefault();return false。你不能从回调中做到这一点。这会杀死事件,因此您需要获取该URL并将其保存以供确认回拨。这个例子是添加一个确认到一个取消订单按钮,在magento CE 2.1.7中检查。

类似的答案阿布舍克达拉杰Shahdeo但我不能编辑或评论却又如此...

+0

是@chris lingwood您是对的,关键是event.preventDefault()。 –