在成功的 Ajax 调用上调用到模态的链接答案

【问题标题】：Call link to modal on successful Ajax call在成功的 Ajax 调用上调用到模态的链接
【发布时间】：2018-01-18 11:35:07
【问题描述】：

如果我现在想弹出一个特定的模式，我会添加这个 HTML 并点击链接...

<a data-deploy-menu="notification-modal-3" href="#">Demo</a>

但是我想删除链接并在成功的 ajax 调用上调用模式。 Somethinkg 像下面这样，但不确定如何去做。请问您能帮忙吗？

jQuery.ajax({

        url: "http://localhost/timesheets/mobile/add-timesheet.php",
        type: "POST",
        data: form.serialize(),
        crossDomain: true,
        datatype: "json",
        cache: false,
        success: function (data) {
            var jsArray = JSON.parse(data);
            console.log(jsArray);
            if ($.trim(jsArray.success) === 'yes') {
                $('#notification-modal-3').load;
            }
        },
        error: function (xhr, thrownError) {
            console.log(xhr.status);
            console.log(thrownError);
        }
    });
});

模态html如下...

    <div id="notification-modal-3" data-menu-size="345" class="menu-wrapper menu-light menu-modal">
    <h1 class="center-text">Test</h1>
    </div>

编辑：我有点得到这个工作..

所以我又添加了一个 href 链接。例如...

<a id="notification-modal-4" data-deploy-menu="notification-modal-3" href="#"></a>

所以链接实际上并没有显示在页面上然后在我使用的 ajax 调用中

$('#notification-modal-4').click();

但如果有更好的方法来做到这一点，我将不胜感激......

【问题讨论】：

您使用的是哪种弹出窗口？
您使用什么框架/插件来提供模态功能？它不是原生 JS，也不是 jQuery 的一部分……所以你需要告诉我们。并且可能它的文档已经有一个示例，说明如何使用 JS 代码而不是标记使其显示...您是否尝试查找它？
嗨，是的，我查过了。这是在 CodeCanyon 上购买的定制移动框架。我认为可能有一些通用代码可以用来调用
我通过使用各种 hack 让它工作了。见上文...
您可能应该向开发人员索取文档以查看是否有适当的方法来执行此操作，或者您可以自己在代码中设置断点并逐步跟踪单击链接时发生的情况。但是，是的，现在只需点击链接即可完成这项工作。

标签： javascript php mysql ajax

【解决方案1】：

基本上你可以在你的 ajax 成功代码中做到这一点：（希望我没有误会）

success: function (data) {
   var jsArray = JSON.parse(data);
   console.log(jsArray);
   if ($.trim(jsArray.success) === 'yes') {

       // fill up the modal with some content if it is dynamicaly
       $('#notification-modal-3').html('thank you');
       $('#notification-modal-3').show();
       // do some cleanup if needed like hide it if needed
       setTimeout(function() {
           $('#notification-modal-3').html('');
           $('#notification-modal-3').hide();
       }, 1000);

   }
},

通过在 ajax 调用中控制模式，您不需要任何（自动）链接点击。

【讨论】：