Currently, I am developing a profile system where the user's profile is displayed in an iframe that reloads when the form submit button is clicked. The content updates successfully upon reloading, but there is an issue with images not displaying after the initial reload/refresh. Initially, when the user visits the page, the images appear correctly. However, if the user saves new data such as changing images and saving them, the updated image does not appear in the iframe until the page is manually reloaded.
Below is the Ajax success code:
$("#profile_iframe").fadeOut("slow", function() { //fades out 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 refreshes successfully, except for the image which fails to display. This seems to be an issue with Ajax.
I then attempted this code:
$("#profile_iframe").fadeOut("slow", function() {
$('#profile_iframe').hide().attr('src', (index, attr) => {
return attr;
});
});
$('#profile_iframe').fadeIn('slow');
With this code, the image displays successfully after submitting via Ajax, but the fadeOut and fadeIn effects do not function as expected. Upon submission, the iframe immediately fades out, then instantly fades back in before reloading with a jarring white snap effect, which is not visually appealing.
I also tried waiting for the iframe to reload before fading it in, but this caused the image not to display again. It seems that placing the fadeIn function within another function interferes with the image loading process.
I apologize for the lengthy explanation, but any assistance would be greatly appreciated! Thank you.