I'm attempting to use Prototype to build an AJAX-based die roller
program. This is my first foray into Prototype and AJAX, and most of
this was put together using the examples on the Prototype site, as
well as a few others found around the web. Nothing elaborate.
What I ended up with was a tool that runs flawlessly and without error
under FF, but completely fails to run under IE (7 or 8), with errors
of "Object doesn't support this property or method".
The program consists of a simple web form which calls another script
to fetch the results, which are painted in another div.
The Prototype javascript is as follows in the head:
<script src="/js/prototype/prototype.js" language="JavaScript"
type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
// <![CDATA[
function rollDice() {
var url = '/campaign_manager/dice_results.cgim';
var params = Form.serialize($('dieRoller'));
var ajax = new Ajax.Updater(
'die_roll_results', url, {method: 'post', parameters: params,
onLoading: function () {
$('die_roll_results').update('Rolling dice . . . <br><img
src="/images/rolling-dice.gif" alt="" width="71" height="46"
style="margin-top: 5px;">');
}
}
);
return false;
}
// ]]>
</script>
And the web form looks like:
<form id="dieRoller" method="post" onSubmit="return rollDice(this);"
action="">
<table cellpadding="0" cellspacing="3" border="0" align="center">
<tr>
<td valign="top" align="right"><b># Dice:</b></td>
<td valign="top"><input type="text" size="3" maxlength="3"
name="die_rolls" id="die_rolls" value="1"></td>
</tr>
<tr>
<td valign="top" align="right"><b>Type:</b></td>
<td valign="top"><select name="die_sides">
<option value="2">d2</option>
<option value="4">d4</option>
<option value="6">d6</option>
<option value="8">d8</option>
<option value="10">d10</option>
<option value="12">d12</option>
<option value="20">d20</option>
<option value="30">d30</option>
<option value="100">d100</option>
<option value="Percentile">Percentile</option>
</select></td>
</tr>
<tr>
<td valign="top" align="right"><b>Modifier:</b></td>
<td valign="top"><input type="text" size="3" maxlength="3"
name="modifier" id="modifier" value=""> <span class="small_text"><i>
(optional)</i></span><br>
<span class="small_text">Modifiers may be positive or negative.</
span></td>
</tr>
<tr>
<td valign="top" align="right"><b>Roll Dice:</b></td>
<td valign="top"><input type="text" size="3" maxlength="3"
name="dice_sets" id="dice_sets" value="1"> Time(s)</td>
</tr>
<tr>
<td valign="top" align="left" colspan="2"><b>Highlight Roll
Results That Are:</b></td>
</tr>
<tr>
<td valign="top" align="right"> </td>
<td valign="top"><select name="highlight_mode"
id="highlight_mode">
<option value="Above">Above</option>
<option value="Below">Below</option>
</select> <input type="text" size="3" maxlength="3"
name="highlight_value" id="highlight_value" value=""> <span
class="small_text"><i>(optional)</i></span></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Roll!">
<input type="reset" value="Reset"></td>
</tr>
</table>
</form>
Under FF, the proper div updates with the dice results. Under IE 7, I
receive a string of javascript errors (as noted above) and then the
whole page refreshes with the die results in the proper div. Under IE
8, the browser simply stares at me like I have three eyes and does
nothing at all.
Real-life example here:
http://www.infinitemonkeysgames.com/campaign_manager/dice.cgim
Can anyone lend a hand?
-- Jason
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
