Showing poll results in place of the poll area - php

Question

I am trying to show the results from a poll in the same area and page as the poll question without reloading the entire page. I am able to get the results and show them in a new page but I do not know how to replace the html in where I have the question and replace it with the html with the results.
HTML (with the poll question)
<div id="poll-area">
<!-- Voting poll -->
<fieldset>
<form action="javascript:void(0);" id="pollid" name="myform" method="POST">
<label><input type="radio" name="answer" value="left" id="option_left" />Yes</label>
<label><input type="radio" name="answer" value="right" id="option_right" />No</label>
<input type="submit" name="submit" id="submit" value="Vote" />
<input type="hidden" name="id" value="pollid" />
</form>
</fieldset>
<!-- End voting poll -->
</div>
AJAX call to handle the poll:
var $j = jQuery.noConflict();
jQuery(document).ready(function($j) {
$j("form").submit(function(){
var str = $j(this).serialize();
$j.ajax({
url: "poll_vote.php",
type: "POST",
data: str,
cache: false,
success: function(result) {
window.location.replace("poll_results.php");
}
});
return false;
});
});
I am guessing it is instead of the *window.location.replace("poll_results.php")* that I want to replace the HTML within the #poll-area with the #poll-area in the poll_results.php, but I do not know how do it.
HTML for the poll results (what is contained in poll_results.php)
<div id="poll-area">
<fieldset>
<legend>Results</legend>
<ul>
<li>
<span class="total-votes">Yes</span>
<br />
<div class="results-bar" style="width:52%;">
52%
</div>
</li>
<li>
<span class="total-votes">No</span>
<div class="results-bar right-bar" style="width:48%;">
48%
</div>
</li>
<li>
</ul>
<p>Total votes: 100</p>
</fieldset>
</div>
Thanks for the help!

Answer 1

in the output of poll_results.php you can remove the outer div with the id "poll-area". You don't want duplicate IDs when it is pulled into your current page.
For your jQuery, this should do the trick:
success: function(result) {
$j("#poll-area").html(result);
As I'm aware, anything that currently exiits inside the poll-area div will be overwritten with the result from the ajax query. (The voting options should disappear, and the results will be shown)
Edit (summary of comments): poll_vote.php should output the HTML contained within poll_results.php

Answer 2

Easiest but not the cleanest: use innerhtml and getElementById()
You will get something like:
var div = getElementById('poll-area'); //The poll itself
div.innerHtml = getElementbyId('answers'); //The answers
Note that I used 'answers' as ID, since you use the same ID for the answers and the poll. So you will get a nested which will not work. Give your first child of the answers () a new id called 'answers'.
If you know more of javascript, use the createElement to add a new element. This will improve speed and is better, but a bit more advanced.