This is code for a costume contest application I’m presently building. There will be a row of radio buttons 1-10 wrapped in labels that will all be individually clickable. Upon the click event, the form will submit, I do some post-processing and return a json object from which I will inject the post data into the page. This process will continue until you’ve voted for every costume in the contest.
Firefox, Safari, Camino all work as intended.
All IE’s flip on the container = form.parents(“#container”); line of the javascript (which subsequently makes any other reference to container fail as well.
It’s worth noting that the form variable is found fine. A subsequent alert(form[0].id); does echo out costume_rating_form as intended. I’m unsure when I can’t then use the jquery object to find the #container element.
I suspect that livequery isn’t binding properly to the the click event in IE browsers. Does anyone have any insight into this and how I may go about fixing it?
$("form#costume_rating_form input[type=radio]").livequery("click",function(){
form = $(this).parents("form:first");
container = form.parents("#container");
vote_eid = form.find("input#vote_eid");
contest_results = container.find("#contest_results");
contest_image = container.find(".contest_image:first");
contest_next = container.find("#side_bar #next_up");
contest_content = contest_image.next();
.....
<div class="full center" id="container">
<div class="s1-2" id="main">
<div class="s_w clearfix">
<div id="costume_rating">
<h3 class="middle">
Rate This Costume
</h3>
<form action="/costume-rate/" method="post" id="costume_rating_form" name="costume_rating_form">
<label style="display: none;" for="costume_rating" class="error contest_selector">Please select a rating.</label>
<div id="rating_scores">
<!-- <div class="rate_tab radius_t_5">Rate This Costume</div> -->
<div class="thumb_down">
:-/
</div>
<div class="middle">
<label for="r1" class="contest_selector"><input type="radio" value="1" name="costume_rating" id="r1" class="radio" style="position: absolute; top: 0pt; right: 99999px;">1</label> <label for="r2" class="contest_selector"><input type="radio" value="2" name="costume_rating" id="r2" class="radio" style="position: absolute; top: 0pt; right: 99999px;">2</label> <label for="r3" class="contest_selector"><input type="radio" value="3" name="costume_rating" id="r3" class="radio" style="position: absolute; top: 0pt; right: 99999px;">3</label> <label for="r4" class="contest_selector"><input type="radio" value="4" name="costume_rating" id="r4" class="radio" style="position: absolute; top: 0pt; right: 99999px;">4</label> <label for="r5" class="contest_selector"><input type="radio" value="5" name="costume_rating" id="r5" class="radio" style="position: absolute; top: 0pt; right: 99999px;">5</label> <label for="r6" class="contest_selector"><input type="radio" value="6" name="costume_rating" id="r6" class="radio" style="position: absolute; top: 0pt; right: 99999px;">6</label> <label for="r7" class="contest_selector"><input type="radio" value="7" name="costume_rating" id="r7" class="radio" style="position: absolute; top: 0pt; right: 99999px;">7</label> <label for="r8" class="contest_selector"><input type="radio" value="8" name="costume_rating" id="r8" class="radio" style="position: absolute; top: 0pt; right: 99999px;">8</label> <label for="r9" class="contest_selector"><input type="radio" value="9" name="costume_rating" id="r9" class="radio" style="position: absolute; top: 0pt; right: 99999px;">9</label> <label for="r10" class="contest_selector"><input type="radio" value="10" name="costume_rating" id="r10" class="radio" style="position: absolute; top: 0pt; right: 99999px;">10</label> <input type="submit" value="Vote" name="submit" id="vote_button" class="submit" style="display: none;">
</div>
<div class="thumb_up">
8-D
</div>
</div><input type="hidden" value="4847" name="vote_eid" id="vote_eid"> <input type="hidden" value="23339" name="user_id"> <input type="hidden" value="105" name="contest_id">
</form><br class="clear">
<div class="contest_image">
<img src="/users/kylebradshaw-3161-full.gif" style="display: inline;">
</div>
<div class="contest_content">
<div class="contest_metar">
<table class="contest_meta">
<tbody>
<tr>
<th>
Title
</th>
<td>
<b>hre's a title of the thing</b>
</td>
</tr>
<tr>
<th>
Description
</th>
<td>
and here's an image of the thing
</td>
</tr>
<tr>
<th>
Tags
</th>
<td>
<a href="/tag/heres+a+tag/">heres a tag</a>
</td>
</tr>
<tr>
<th>
Submitted by
</th>
<td style="vertical-align: text-top;" class="submitted_by">
<a href="/user/view/kylebradshaw/">kylebradshaw</a>
</td>
</tr>
<tr>
<th>
Share This
</th>
<td class="small">
<input type="text" size="46" value="http://cz3.kb.mechmedia.com/costume-rate/4847/" style="padding: 1px; margin-bottom: 4px;" class="text select_box small"><br>
</td>
</tr>
</tbody>
</table>
</div><br class="clear">
<div id="commentary">
<h2>
Commentary
</h2>
<div id="entry_comments">
<p>
None yet! Leave a comment!
</p>
</div><!-- end entry_comments -->
</div>
<div id="comment_here">
<h2>
Be the first to comment!
</h2>
<form method="post" action="/update/">
<p>
<textarea style="width: 90%;" rows="2" name="comment">
</p><input type="hidden" value="4847" name="entry_id"><input type="hidden" value="105" name="contest_id"><input type="hidden" value="add_comment" name="action"><input type="hidden" value="html" name="content_type">
<p>
<input type="submit" value="Add Your Comment" name="submit">
</p>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="s1-12" id="side_bar">
<div class="s_w">
<div id="next_up">
<h3>
Next
</h3>
<div class="img_container">
<img alt="" src="/users/Crow_Nest_Vintage-2411-thumb.gif">
</div>
<div class="img_container">
<img alt="" src="/users/mizzmedusa-2155-thumb.gif">
</div>
<div class="img_container">
<img alt="" src="/users/tantlaymance-2053-thumb.gif">
</div>
<div class="img_container">
<img alt="" src="/users/gulfcoastdiesel-2024-thumb.gif">
</div>
<div class="img_container">
<img alt="" src="/users/PokeyWoman-1578-thumb.gif">
</div>
</div>
<div id="new_up">
<h3>
New
</h3>
<div class="img_container">
<a href="/costume-rate/4877/"><img alt="" src="/users/kylebradshaw-3197-thumb.gif"></a>
</div>
<div class="img_container">
<a href="/costume-rate/4874/"><img alt="" src="/users/kylebradshaw-3190-thumb.gif"></a>
</div>
<div class="img_container">
<a href="/costume-rate/4873/"><img alt="" src="/users/kylebradshaw-3189-thumb.gif"></a>
</div>
<div class="img_container">
<a href="/costume-rate/4872/"><img alt="" src="/users/kylebradshaw-3188-thumb.gif"></a>
</div>
<div class="img_container">
<a href="/costume-rate/4871/"><img alt="" src="/users/kylebradshaw-3185-thumb.gif"></a>
</div>
</div>
</div>
</div>
<div class="s5-12 end" id="pre_bar">
<div class="s_w">
<div id="contest_results">
<h3>
<a href="/costume-rate/4848/">modal test</a> Voting Results
</h3>
<div class="contest_image left">
<img alt="modal test" src="/users/kylebradshaw-3162-full.gif">
</div>
<table class="contest_meta">
<tbody>
<tr>
<th>
Official Score
</th>
<td>
<span class="strong shout">6.0/10</span>
</td>
</tr>
<tr>
<th>
Votes
</th>
<td>
1 vote
</td>
</tr>
<tr>
<th>
You Voted
</th>
<td>
<b class="knock_out">6</b>
</td>
</tr>
<tr>
<th>
Submitted by
</th>
<td style="vertical-align: text-top;" class="submitted_by">
<a href="/user/view/kylebradshaw/">kylebradshaw</a>
</td>
</tr>
<tr>
<th>
Share This
</th>
<td class="small">
<input type="text" value="http://cz3.kb.mechmedia.com/costume-rate/4848/" style="padding: 1px; margin-bottom: 4px; width: 90%;" class="text select_box small"><br>
</td>
</tr>
</tbody>
</table>
</div><br class="clear">
<br class="clear">
<br class="clear">
<div class="section first" id="contest_info">
<h1>
<span class="costum">C</span><span class="zee">z</span> Costume Contest
</h1>
<table class="contest_meta contest_info">
<tbody>
<tr>
<th>
Name
</th>
<td>
<b>hats and such</b>
</td>
</tr>
<tr>
<th>
Started
</th>
<td>
<small>07/15/08</small>
</td>
</tr>
<tr>
<th>
Ends
</th>
<td>
<small style="margin-bottom: 3px; display: block;">05/13/11</small> <span class="notice">This contest ends in 1 year, 9 months</span>
</td>
</tr>
<tr>
<th>
Description
</th>
<td>
here is a contest dedicated to awesome hats
</td>
</tr>
<tr>
<td></td>
<td>
<a href="/costume-upload/?contest_id=105&typeof=contest&modal=1&KeepThis=true&TB_iframe=true&width=400&height=500" id="contest_upload" class="funnel thickbox" name="contest_upload">Enter this contest now!</a>
</td>
</tr>
</tbody>
</table><br class="clear">
</div>
<ul id="contests_list">
<li>
<a href="/contest/105">Hats And Such</a><br>
<small><b>12767</b> <em>votes</em></small>
<p>
here is a contest dedicated to awesome hats
</p>
</li>
<li>
<a href="/contest/107">General</a><br>
<small><b>3009</b> <em>votes</em></small>
<p>
This is the anything-goes general contest!
</p>
</li>
</ul>
</div>
</div><br class="clear">
</div>
Firstly, is there a reason you’re using LiveQuery instead of the built-in Events/live?
Secondly, since
#containeris a unique id, you don’t need tofindit. Try:Likewise with
#vote_eid,#contest_results, etc.Finally, unless
form,container,vote_eid, etc. are global variables, you should declare them withvar.Correct these issues and let us know if the problem persists.