1

Scenario:

'Parent Page' contains two iframes, 'activity_overview' and 'upload_avatar'. 'Activity_Overview' contains a page on the same domain. 'Upload_avatar' also contatins a page on the same domain, which contains a form. When the form (which submits a new avatar img) in 'upload_avatar' is submitted, it automatically opens a new page in the 'activity_overview' window which contains the uploaded image.

What I would like to do, is get the img src from this image and pass that to a couple of divs in my parent page, so that those images refresh along with (or shortly after) the reload of the 'activity_overview' iframe.

I've tried a number of things including passing the src as a variable, from php to js, setInterval to keep checking if the img var is defined yet..etc. The following code is what seems simplest and ideal to me, but the page reload in the iframe is not detected. 

$(document).ready(function(){
  function avatarUpdate(){
    $('#avatar-crop-submit').click(function () {
        $('#avatar-upload-form').submit(function() {
            $('#avatar-upload-form').attr('target','activity_overview');
            window.parent.$("#overview-list, #overview").addClass('active');
            window.parent.$("#edit-list, #edit").removeClass('active');
            window.parent.$('#upload_avatar').attr('src', 'www.example.com/form/');
            $('#activity_overview').on('load', function(){
                var avatar_src = $('#temp_header_avatar img').attr('src');
                window.parent.$('#header_avatar').html('<img src="' + avatar_src + '" class="avatar user-1-avatar avatar-150 photo" width="150" height="150" alt="Profile Photo">').hide().fadeIn(1000);
                window.parent.$('#nav_avatar').html('<img src="' + avatar_src + '" class="avatar img-circle user-1-avatar avatar-60 photo" width="60" height="60" alt="Profile Photo">').hide().fadeIn(1000);
            });
        });
    });
  }       
  avatarUpdate();
});

I thought this question may have some relevance, but I am not sure how to implement the solution.

Community
  • 1
  • 1
Nathaniel Miller
  • 158
  • 3
  • 13
  • 1
    $('activity_overview') selector will look for a tag . Fix the selector and see if that works – gp. Apr 24 '15 at 03:10
  • If the iframe reloads, need your code to run within the newly loaded page. Running the code inside the submit handler does no good. Also nesting event handlers inside other handlers is going to also cause problems ... not a good practice – charlietfl Apr 24 '15 at 03:12
  • Thanks @gp, I originally had that in place, tried something new, retyped it and forgot hte '#'. Unfortunately it still doesn't do the trick. – Nathaniel Miller Apr 24 '15 at 03:24
  • @charlietfl, the nested .submit() is inside the .click() handler due to the fact that it is a two-step form. If I don't use that .click() handler, the form is opened in the iframe prematurely. Is there a better solution to that problem? – Nathaniel Miller Apr 24 '15 at 03:29
  • 1
    where is this javascript running? #activity_overview and #avatar-upload-form are assumed to be in the same frame. However from your question, it seems that activity_verview is a frame which will be accessible from top window and avatar-upload-form is inside upload_avatar frame. – gp. Apr 24 '15 at 03:32
  • not even known to answer that. Submit handler should not need to be nested. It really sounds like you have made life overly complicated by using iframes in the first place to be honest. – charlietfl Apr 24 '15 at 03:32
  • @gp - I simply have the js in a file that is loaded into the footer of each page. So it is, at least to my understanding, accessable to each page/iframe that needs it. – Nathaniel Miller Apr 24 '15 at 03:43
  • @charlietfl - Ya it's become a bit of a pain. I chose the iframe because I am can't (or shouldn't) modify the original forms. And the way they work, they MUST be on pages with dedicated urls to function properly. They were a last resort. I'll try un-nesting the submit :) – Nathaniel Miller Apr 24 '15 at 03:47
  • When the javascript code executes, by default the selectors will assumed to be in that frame if any element is in a different frame it wont be selected. Better to qualify the selectors from the respective iframe windows. I guess this is where the problem is. – gp. Apr 24 '15 at 03:48

1 Answers1

0

Thanks to @gp and his clarification as to where the js needed to be called from, I got it working.

I put the following code in the page that was being loaded into the iframe and it works as desired.

    $(window).load(function() {
      function getAvatarSrc(){
        var avatar_src = $('#temp_header_avatar img').attr('src');
        window.parent.$('#header_avatar').html('<img src="' + avatar_src + '" class="avatar user-1-avatar avatar-150 photo" width="150" height="150" alt="Profile Photo">').hide().fadeIn(1000);
        window.parent.$('#nav_avatar').html('<img src="' + avatar_src + '" class="avatar img-circle user-1-avatar avatar-60 photo" width="60" height="60" alt="Profile Photo">').hide().fadeIn(1000);
      };  
      getAvatarSrc();
    });
Nathaniel Miller
  • 158
  • 3
  • 13