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.

9
  • 1
    $('activity_overview') selector will look for a tag <activity_overview>. Fix the selector and see if that works
    – gp.
    Apr 24, 2015 at 3: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, 2015 at 3: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. Apr 24, 2015 at 3: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? Apr 24, 2015 at 3: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, 2015 at 3:32

1 Answer 1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.