如何在加载ajax模式时不重新加载

how to not reload when loading ajax modal

本文关键字：加载 新加载 ajax 模式      更新时间：2023-09-26

当用户点击如下下拉菜单时，我会在屏幕上显示模式警报：

$(document).ready(function(){
    $('#id_state').change(function(e){
        var selection = $("#id_state").val();
        if(selection == 1){
            event.preventDefault(); 
            var entryType = 'diabetes';
            var data = new Object();
            data.entryType = entryType;
            programAlertModal(programAlertModalCallback, data); 
            return false; 
        }
     });
     $('#id_state').trigger('change');
});

然后在此处调用程序警报模式：

programAlertModal:function(callback, data){
            var entryType = data.entryType;
            var url = '/shared/enrollment/'+entryType+'/';
            $.get(url, function(result) {  
                callback(result, entryType); 
                return false;
            });
        },
        programAlertModalCallback:function(result, entryType){  
            $( "body" ).append(result);
        },

结果是一些看起来像这样的html：

<div class="takeover">
  <div class="takeover-bg"></div>
  <div class="takeover-body">
  {% if entry_type == 'diabetes' %}
    <h1>My awesome title</h1>
    <a href="">Dismiss</a>
  </div>
</div>

如何在不重新加载页面（并清除下拉选择）的情况下取消加载的内容？

在Dismiss链接中添加一个类，以便我们可以引用它：

<a href="#" class="dismiss">Dismiss</a>

然后绑定一个在回调中删除模态的处理程序：

programAlertModalCallback: function(result, entryType) {
  var $result = $(result).appendTo("body");
  $result.find("a.dismiss").on("click", function(e) {
    e.preventDefault();
    $result.remove();
  });
},

将e参数传递给函数并添加e.preventDefault();，以防止a标记的默认行为重新加载页面。您还应该在a中包含href="#"，因为在某些情况下，将其留空会导致一些麻烦。

相关文章：