Question

我目前有以下代码提交来自一堆动态表单的表单数据，这种方式运行良好并且返回成功或失败的通知并将其插入div #info但是当错误或成功显示在页面删除通知的唯一方法是刷新或导航到另一个页面

<script>
    $(function() {
        $(document).on('submit', 'form.frm_details', function(event) {
            event.preventDefault();
            $.ajax({
                url: '/limitless/functions2.php',
                type: 'post',
                dataType: 'json',
                data: $(this).serialize(),
                success: function(data) {
                    if (data.status == '1') {
                        $('#info').addClass('alert alert-success alert-styled-left alert-arrow-left alert-bordered').html(data.message);
                        $('.my-modals').modal('hide');
                        document.getElementById('frm_details0').reset();
                    }
                }
            });
        });
    });
</script>

所以我的问题是如何制作它以便您点击通知窗口右侧的链接或x按钮来关闭或隐藏div

我附上了通知窗口的图片副本，除了下面的脚本之外，页面上的唯一代码是

Answer 1

按照评论：

<script>
    $(function() {
        $(document).on('submit', 'form.frm_details', function(event) {
            event.preventDefault();
            $.ajax({
                url: '/limitless/functions2.php',
                type: 'post',
                dataType: 'json',
                data: $(this).serialize(),
                success: function(data) {
                    if (data.status == '1') {
                        $('#info').addClass('alert alert-success alert-styled-left alert-arrow-left alert-bordered').html(data.message);
                        $('.my-modals').modal('hide');
                        document.getElementById('frm_details0').reset();
                    }
                }
            });
        });
      //preferably anchor tag
      $('.some-close-element').click(function(e)
      {
         e.preventDefault();
         $(this).parent().hide();
      });
    });
</script>

这假设你在信息警告框中添加一个锚标记，最终关闭警报框。

Answer 2

您可以在获得ajax响应后的一段时间间隔后隐藏通知：

  if (data.status == '1') {
        $('#info').addClass('alert alert-success alert-styled-left alert-arrow-left alert-bordered').html(data.message);
        setTimeout( function(){
           $('#info').hide();} , 
        3000); 
        //or                                                                                
            $("#info").delay(4000).hide();
            $('.my-modals').modal('hide');
            document.getElementById('frm_details0').reset();
}

Answer 3

在对此网站进行更多研究后，我发现所有错误都应该根据此处的讨论解除警报

Bootstrap successful alert in updating record Ajax

然而，在彻底阅读我的试验和错误后，我的解决方案如下

    $('#info').html('<div class="alert alert-danger alert-styled-left alert-arrow-left alert-bordered">'  + data.message + '<button type="button" class="close" data-dismiss="alert" >×</button></div>');

Ajax发布数据并返回错误消息

3 个答案: