Question

我想在ajax成功和失败功能之后显示通知。我在附加到父div后显示带有append（）函数和延迟函数的通知。但现在的问题是这只会被触发一次。我想在每次ajax完成时触发通知。

function addDroppedCandidates(data){

var data = JSON.parse(data);
//alert(data.msg.name);

if (data.msg == "no_int") {

    $('#no_int_modal').modal('show');
}
else {

    var name = data.msg.name.substring(0,6);
var profile_name = "{{$profile->profile_name}}"
console.log(data.resume);

$('.notification_panel_parent').append('<div class = "panel notification_panel" id = "">'+

    '<div class = "panel-body">'+
     '<div class="col-lg-4">'+
         '<img id = "notify_file" src="/icons/pdf_success.png">'+
     '</div>'+

        '<div class="col-lg-8 name_and_info">'+

            '<span class = "notify_cand_name">'+resume_name+'</span>'+
            '<span class="file_status">File upload successfull</span>'+

        '</div>'+

    '</div>'+
  '</div>').delay(1200).fadeOut(4000); 
  }
  }

这也是我追加的div。

 <div class = "notification_panel_parent">
 </div>

每次调用ajax时如何触发它？ .notification_panel_parent 高于其他一些div。 .notification_panel_parent具有更高的z-index。

.notification_panel{
width: 300px;
height: 90px;
margin-left: 73%;
z-index: 1000000001;
position: absolute;
margin-top: 8%;
box-shadow: 0 0 10px #d4d4d4;
border-radius: 5px;
font-size: 20px;
}

另一个问题是当它消失时，它会低于其他div（z-index在这里不起作用）。

这是我的ajax功能

$.ajax({


        url : '/resume_upload',
        contentType: "application/json",
        type : 'POST',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        mimeType: "multipart/form-data",
        data : form_data,

        success : function(data) {
        addDroppedCandidates(data);                                       
        },
        processData : false,
        contentType : false,
        error : function(xhr ,status ,error){
        console.log(xhr);
        alert(xhr);
        }

        });
        e.preventDefault();
        e.stopImmediatePropagation();
        }

Answer 1

你应该做一些像

这样的事情，而不是淡出

.delay(2000).html('')

或者

.delay(2000).fadeOut(3000).html('')

我没试过这个，所以可能行不通。但试试这个，如果他们不告诉我，我会看到确切的问题

<强>更新

好的，我从你的问题中理解了什么，纠正我如果我错了。

您希望在每次成功的AJAX调用后显示通知。
为此，您已创建了一个appends notification_panel_parent个opacity面板的功能。
然后你在4secs之后淡出那个儿童小组。

现在，我在这种方法中看到了这些问题，

您每次成功使用AJAX后都会附加一个新的面板，我不确定您是否再次使用之前添加的面板（如果我错了，请告诉我）。
这将增加意外行为，因为您将在DOM中拥有多个子面板。

我相信你可以做的是在开始时创建一个面板以显示用户，然后使其fadeIn and faaeOut为0。

然后，在每次成功的AJAX调用之后，您只需使其不透明度为1，在延迟4秒后，使用$('#child-panel').css({opacity: 1}); setTimeout(function() { $('#child-panel').delay(1000).fadeOut(2000) },2000);函数再次使其不透明度为0。

这样的事情：

＆＃13;

#child-panel {
  opacity: 0; background:purple;height:75px;width:75px;margin:6px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="child-panel" style=""></div>

＆＃13;

<input type="number">

＆＃13;

使用append（）函数显示ajax成功后的通知

1 个答案: