Accessing parent Javascript function from within iframe?

Question

I'm trying to access a function that would update the JQuery UI progress bar located in the parent from within the iframe page. Every time somebody clicks on a link in the iframe page I want it to update the progress bar. I've searched around for answers, and using "window.parent.FunctionName()" is the solution that is given, but for some reason it doesn't seem to work in my situation? Any ideas?

UPDATE: It seems to work in safari, firefox, but not in chrome???

The function that I want to access in the parent page is:

var percentage = 0;                                                                 

$('ul li a').one('click', updateBar);                                               

function updateBar() {
    percentage += 8;                                                                
    $('.ui-progressbar-value').stop().animate({ width: percentage+"%" }, 500)       
    $('.middle').progressbar('option','value', percentage);                         

    if(percentage > 100) {                                                  
        $('ui-progressbar-value').stop().animate({ width: "100%"}, 500);            
    }
}

The JQuery call that I'm calling from the iframe page is:

$('#sidenav ul li a').one('click', window.parent.updateBar); 

Answer 1

try

$('#sidenav ul li a').one('click',function(){

 window.parent.updateBar();

}); 

Answer 2

1. be sure that jQuery is also embedded inside the frame
2. Your approach as it is should work, but the context where the function is executed is the parent window. If you like to execute the function using the frame as context, provide the context as argument:

---

 function updateBar(context) {
    percentage += 8;                                                                
    $('.ui-progressbar-value',context).stop().animate({ width: percentage+"%" }, 500)       
    $('.middle',context).progressbar('option','value', percentage);                         

    if(percentage > 100) {                                                  
        $('ui-progressbar-value',context).stop().animate({ width: "100%"}, 500);            
    }
}

---

$('#sidenav ul li a').one('click', function(){window.parent.updateBar(document);});