Search code examples
phpinternet-explorergoogle-chromeprototypejsprototype

prototype 1.7 is not working with Chrome and IE

I'm trying to build a landing page with interactive interface using prototype script, but i find somes issues in chrome and IE, in FireFox is doing Well, I don't know why.

Here is the code for the index.php : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//AR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Take Surveys and Get Cash</title>
<script type='text/javascript' src="prototype-1.7.1.js"></script>
<script type='text/javascript'>
function refresh()
{
   var opt = {
                method: 'get', 
                parameters: '',
             };
   var url = 'page2.php';
   var laRequete = new Ajax.Updater('conteneur', url, opt);
}
</script>
<style type="text/css">
<!--
#conteneur {
    background-color:White;
    margin:auto;
    width:800px;
}
.Style1 {
    color: YELLOW;
    font-weight: bold;
    font-size: 36px;
}
.Style3 {
    color: WHITE;
    font-weight: bold;
    font-size: 36px;
}
#body {
    background-color:White;
}
#maj{
    cursor:pointer;
}
.Style2 {font-size: larger}
-->
</style>

</head>

<body>

<div id="conteneur">
    <table BORDER="0">
        <tr>
            <td COLSPAN="2"><img src="survey.png" /></td>
        </tr>
        <tr>
            <td><span id='maj' onclick="refresh();"><img src="Yes.png" /></span></td>
            <td><span id='maj' onclick="refresh();"><img src="No.png" /></span></td>
        </tr>
    </table>

<div id="statcounter_image" style="display:inline;"><a
title="hits counter" href="http://statcounter.com/"
class="statcounter"><img
src="http://c.statcounter.com/9318376/0/c82ce179/1/"
alt="hits counter" style="border:none;" /></a></div>
</div>
</body>
</html>

and here is code in page2.php : 

<table BORDER="0">
    <tr>
        <td COLSPAN="2"><img src="Age.png" /></td>
    </tr>
    <tr>
        <td><span id='maj' onclick="refresh();"><img src="Yes.png" /></span></td>
        <td><span id='maj' onclick="refresh();"><img src="No.png" /></span></td>
    </tr>
</table>
Solution

  • There are a few issues with your script that might be preventing it from working correctly

    1. you have the same id registered on 2 different elements (maj), ids should be unique to the page

    2. you are using the onclick attribute instead of an event observer, try using an observer like this $('maj').observe('click',refresh)

    3. update to the latest version of PrototypeJS (1.7.2) released in April 2014, there are many bugs and updates that are fixed in the latest version.