2016-11-30 48 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()。 –