image not showing after ajax iframe reload

Question

I'm working on profile system where, when the user clicks the form submit buttons the iframe reloads which shows the user profile and updates the content. Reloading is working perfectly but the image is not showing after 1st reload/refresh. Means when the user visits the images is showing up successfully but when the user saves the data ie changes the images and saves it the image in iframe does not appear, I've to reload the page then the image appears.

This is ajax success code

$("#profile_iframe").fadeOut("slow", function() { //fadesout the iframe
        $('#profile_iframe').hide().attr('src', (index, attr) => { //Reloads the iframe
          return attr;
        });
        setTimeout(() => {
          $('#profile_iframe').fadeIn('slow'); //fades in after reload
        }, 2000);
      });

The other content is refreshing successfully, only image is not showing up. So there's no problem in ajax.

Then I tried this code

$("#profile_iframe").fadeOut("slow", function() {
        $('#profile_iframe').hide().attr('src', (index, attr) => {
          return attr;
        });
      });
      $('#profile_iframe').fadeIn('slow');

Here the image is showing successfully after ajax submit, but the fadeOut fadeIn does not work correctly. After submitting the iframe fades out the immediately fadeIn and then reloads with a white snap. It doesn't looks good.

I even tried to wait for the iframe to reload and then fade in, but then the image does not show up again, I think when I try to put the fadeIn function in another function the image does not show up.

I know its bit lengthy, but some help would be appreciated! Thankyou

Answer 1

Finally after some research, got it Added a delay in fadeIn(2000); Thanks