ReferenceError: 'getMainImage' is not defined but it is

Question

There is a problem with this page:

http://www.pubsaregreat.co.uk/culture?category=18&view=pubs

It is not showing images or the Google map, I've debugged it in the Console and it is showing:

ReferenceError: getMainImage is not defined

I have checked through all of the code and the 'getMainImage' is defined within the component (it's a custom component) and it has previously worked - it is also being loading by the browser.

The getMainImage function is as follows:

function getMainImage(venueId, container){
    jQuery('<img id="'+venueId+'_img" src="<?php echo JURI::root().'administrator/components/com_inapub/proxy.php?getphoto=main&venue_id=';?>'+venueId+'" />').load(function(){
            jQuery(container +' :first').replaceWith(this);
        });

Any ideas where I'm going wrong please?

Answer 1

Just some spare of the moment (possible) solutions:

Option 1:

Try wrapping your function in document read:

jQuery(document).ready(function($) {

    function getMainImage(venueId, container) 
    {
        $('<img id="'+venueId+'_img" src="<?php echo JUri::root().'administrator/components/com_inapub/proxy.php?getphoto=main&venue_id=';?>'+venueId+'" />').load(function(){
            $(container +' :first').replaceWith(this);
        });
    }

});

Option 2:

Try making getMainImage a global function:

getMainImage = function(venueId, container) 
{
    jQuery('<img id="'+venueId+'_img" src="<?php echo JUri::root().'administrator/components/com_inapub/proxy.php?getphoto=main&venue_id=';?>'+venueId+'" />').load(function(){
        jQuery(container +' :first').replaceWith(this);
    });
}