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

Question

I want to show a notification after ajax success and failure function. I am showing the notification with append() function and delay function after it appends to the parent div. But the problem now is this gets triggered only once. I want to trigger the notification everytime ajax is done.

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); 
  }
  }

This is the div i appending too.

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

How do i trigger it everytime ajax is called ? .notification_panel_parent is above some other div. .notification_panel_parent has higher 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;
}

The other problem is when it fades ou,t it goes below other div (z-index is not working here).

Here is my ajax function

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

Instead of fading out, you should do something like

.delay(2000).html('')

Or

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

I haven't tried this, so might not work. But try this, if they don't then let me know I'll see what's the exact issue

---

UPDATE

Ok so what I am understanding from your question, correct me If I'm wrong.

• You want to show a notification after each successful AJAX call.
• For that, you've created a function which appends a panel in notification_panel_parent id.
• Then you fade out that child panel after 4secs.

Now, I'm seeing these issues in this approach,

• You're appending a new panel each time after a successful AJAX and I'm not sure if you are using your previous appended panel again (let me know if I'm wrong).
• This will add unexpected behaviour as you're going to have multiple child panels in your DOM.

What I believe you can do is create one panel in start to show user and then make its opacity 0.

Then, after every successful AJAX call, you just makes its opacity 1 and after 4 seconds delay, make its opacity 0 again, using fadeIn and faaeOut functions.

Something like this:

 $('#child-panel').css({opacity: 1}); setTimeout(function() { $('#child-panel').delay(1000).fadeOut(2000) },2000); 

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

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