magento 2中的jquery确认小部件_Jquery_Html_Magento2

magento 2中的jquery确认小部件

jquery html magento2

magento 2中的jquery确认小部件,jquery,html,magento2,Jquery,Html,Magento2,我将jquery确认小部件添加到一个超链接中。尽管在确认模式中单击“取消”和“确定”，它仍会重定向到链接。如何限制它。下面是我的代码片段 html文件 <td class="col id" > <a class="action edit" id="edit" href="<?php /* @escapeNotVerified */ echo $block->getEditUrl($_gridrecord->getEntityId()); ?>" d

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

//

试试这个：

<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){
             event.preventDefault;
                 confirmation({
             title: 'Some title',
             content: 'Some content',
             actions: {
                 confirm: function(){},
                 cancel: function(){
                   return false;
                 },
                 always: function(){}
             }
           });
       });
      }
);
// ]]></script>

//

或

//

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

您想要这样的链接

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


要求([
“jquery”，
“Magento_Ui/js/modal/confirm”
],
函数（$，确认）{
$（'.cancel'）。单击（函数（事件）{
event.preventDefault（）；
var url=event.currentTarget.href；
确认书({
标题：“取消订单”，
内容：“是否要取消此订单？”，
行动：{
确认：函数（）{
window.location.href=url；
},
取消：函数（）{}，
始终：函数（）{}
}
});
返回false；
});
});

关键是调用

event.preventDefault（）和返回false
。您不能通过回调来执行此操作。这将终止事件，因此您需要获取url并将其保存以供确认回调。本例是在magento CE 2.1.7中选中的取消订单按钮上添加确认
类似于阿披舍克·德纳拉吉·沙迪奥的回答，但我还不能编辑或评论，所以…
你想要这样的东西
<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>


要求([
“jquery”，
“Magento_Ui/js/modal/confirm”
],
函数（$，确认）{
$（'.cancel'）。单击（函数（事件）{
event.preventDefault（）；
var url=event.currentTarget.href；
确认书({
标题：“取消订单”，
内容：“是否要取消此订单？”，
行动：{
确认：函数（）{
window.location.href=url；
},
取消：函数（）{}，
始终：函数（）{}
}
});
返回false；
});
});

关键是调用event.preventDefault（）和返回false
。您不能通过回调来执行此操作。这将终止事件，因此您需要获取url并将其保存以供确认回调。本例是在magento CE 2.1.7中选中的取消订单按钮上添加确认
与阿披舍克·德纳拉吉·沙迪奥的回答类似，但我还不能编辑或评论，所以…
@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>


要求(
[
“jquery”，
“Magento_Ui/js/modal/modal”
],
作用(
$,
情态动词
) {
变量选项={
键入：“弹出窗口”，
回答：是的，
是的，
标题：“”，
按钮：[{
文本：$.mage._uu（'Close'），
类别：“”，
单击：函数（）{
这个.closeModal（）；
}
}]
};
var popup=modal（选项，$（'#header mpdal'）；
$（“#单击标题”）。在（'click'，function（）{
$（“#标头mpdal”）.modal（“openModal”）；
});
}
);   
@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>


要求(
[
“jquery”，
“Magento_Ui/js/modal/modal”
],
作用(
$,
情态动词
) {
变量选项={
键入：“弹出窗口”，
回答：是的，
是的，
标题：“”，
按钮：[{
文本：$.mage._uu（'Close'），
类别：“”，
单击：函数（）{
这个.closeModal（）；
}
}]
};
var popup=modal（选项，$（'#header mpdal'）；
$（“#单击标题”）。在（'click'，function（）{
$（“#标头mpdal”）.modal（“openModal”）；
});
}
);   
下面的代码将显示一个确认弹出窗口，您可以根据需要修改，添加事件以显示此确认弹出窗口
>     require([
>     'Magento_Ui/js/modal/confirm' ], function(confirmation) { // Variable that represents the `confirm` widget   //add your event here
> to fire it 
>           confirmation({
>               title: 'Test Conformation Wedget',
>               content: 'Are You Sure',
>               actions: {
>                   confirm: function(){},
>                   cancel: function(){},
>                   always: function(){}
>               }
>           });    // event close here
> 
> });

谢谢下面的代码将显示一个确认弹出窗口，您可以根据需要进行修改，添加事件以显示此确认弹出窗口
>     require([
>     'Magento_Ui/js/modal/confirm' ], function(confirmation) { // Variable that represents the `confirm` widget   //add your event here
> to fire it 
>           confirmation({
>               title: 'Test Conformation Wedget',
>               content: 'Are You Sure',
>               actions: {
>                   confirm: function(){},
>                   cancel: function(){},
>                   always: function(){}
>               }
>           });    // event close here
> 
> });

谢谢
不，它不起作用。实际重定向到链接并显示此模式框正在并行进行。任何人都可以共享超级链接中使用的magento 2中jquery小部件的示例代码。不起作用。实际重定向到链接并显示此模式框正在并行进行。任何人都可以共享jquery的示例代码magento 2中的小部件用于hyper-linkYes@chris lingwood您是对的，关键是event.preventDefault（）。Yes@chris lingwood您是对的，关键是event.preventDefault（）。虽然这可能会回答问题，但最好添加一些关于此答案如何帮助解决问题的说明。请阅读以了解更多信息。@RoshanaPitigala感谢您的建议，上面的代码用于使用小部件模型“Magento_Ui/js/modal/modal”在Magento 2中显示弹出窗口，而这可能会回答问题。最好添加一些关于此答案如何帮助解决问题的说明。请阅读了解更多信息。@RoshanaPitigala感谢您的建议，以上代码用于使用小部件模型“Magento_Ui/js/modal/modal”在Magento 2中显示弹出窗口