Cannot have the same name of Javascript function on 3 differents pages!

Today I have spent 5 hours to find out the bug on my websites. My page structure is something like this : main page has 3 boxes - man, woman, animal. On the main page, I use jquery to fetch the information from man.php, woman.php, animal.php and display them onto the 3 boxes. Each of 3 pages (man.php, woman.php, animal.php) have a javascript function :
function showresponddiv(messagedivid){
        jQuery.get("showRespLive.php, function(data2) {
            $(#dialog .poptext).append(data2);
        });
};

The bug was when a user click on an information in the box of man by onclick="javascript:showresponddiv(this.id)", supposedly it should call the function showresponddiv() on man.php, but it fail to do so. It will call the function showresponddiv() on other page like woman.php or animal.php. Why? It is because I use jquery to show them 3 pages together into 1 main page. So actually the function showresponddiv() was declare 3 times on the main page.

To fix the bug, just change the name of the functions to showresponddiv2() and showresponddiv3().

Related Posts by Categories