Question

我将jquery确认小部件添加到一个超链接。尽管在确认模式中单击取消和确定，它仍会重定向到链接。如何限制它。这是我的代码片段

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>

Answer 1

试试这个：

<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>

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

Answer 2

你想要这样的东西。

<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中检查。

与Abhishek Dhanraj Shahdeo相似的答案，但我无法编辑或评论......

Answer 3

@vijay b选中此项，您将获得有关小部件的一些线索

 <a href="#" id="click-header">
    View Video
</a>
<div id="header-mpdal" style="display:none;">
    <div class="videoWrapper">
        <iframe allow="encrypted-media" allowfullscreen="" frameborder="0" gesture="media" height="315" src="https://www.youtube.com/embed/P45AMKIW0ok" width="560">
        </iframe>
    </div>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: '',
                buttons: [{
                    text: $.mage.__('Close'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#header-mpdal'));
            $("#click-header").on('click',function(){ 
                $("#header-mpdal").modal("openModal");
            });

        }
    );   
</script>

Answer 4

下面的代码将显示一个确认弹出窗口，您可以根据需要进行修改，并添加事件以显示此构造弹出窗口。

$this->db->select_max('ELDI_Orden');
$this->db->where('ELDI_SuDiccionario',1);

/*If u want using with post 
   $eld_id = $this->input->post('eldi_sudiccionario');
   $this->db->where('ELDI_SuDiccionario',$eld_id);
*/

$res = $this->db->get('elementos_diccionario')->row()->ELDI_Orden;

$eldi_key = url_title($this->input->post('eldi_key'), 'underscore', TRUE);
$eldi_orden = $res+1;

$datos = array(
            'ELDI_Key' => $eldi_key,
            'ELDI_Orden' => $eldi_orden,
            'ELDI_Display' => $this->input->post('eldi_display'),
            'ELDI_SuDiccionario' => $this->input->post('eldi_sudiccionario'),
        );

$this->db->insert('elementos_diccionario', $datos);

谢谢

magento中的jquery确认小部件2

4 个答案: