我有这个民意调查问题列表（带有不同的id）和选项。当我提交一个投票选项时，我会得到AJAX的回复。
我想使用这个响应立即发布结果，而不刷新页面，而是用收到的成功ajax数据完全替换同一个民意调查问题的html。
具体来说，我的问题是提交一个民意调查答案，如何将问题（html）更改/删除为包含答案的新html（不同的html）。只有相关轮询的html才应该更改，而不是所有轮询的html。我成功地获得了ajax成功回调。
这是代码：
php:
<?php if(isset($GLOBALS['questions']) && is_array($questions)): ?>
<?php foreach($questions as $key => $question): ?>
<?php require 'poll.php'; ?>
<?php $user = Subscribers::getSubscriber($question->userID); ?>
<li class="comment-holder" id="_<?php echo $question->id; ?>">
<div class="user-img">
<img src="<?php echo $user->profile_img; ?>" class="user-img-pic" />
</div>
<div class="comment-body">
<h3 class="username-field"><?php echo $user->username; ?></h3>
<div class="comment-text">
<?php echo $question->question; ?>
<hr />
</div>
</div>
<!--Relevant part: display choices -->
<div class="poll-option">
<?php if($completed):?>
<div id="completed">
<p>You have completed this poll, thanks.</p>
<!--**This is where ajax response should appear**-->
</div>
<?php else: ?>
<?php if(!empty($opts)): ?>
<div class="poll-options">
<?php
$TypeOfPoll = $question->pollType;
switch($TypeOfPoll) {
case "option1":
foreach($opts as $index => $opt) {
if ($opt->id == $question->id) {
echo "<input type='radio' name='choice' value='$opt->choice_id' />";
echo $opt->name,'<br />';
}}
echo "<input type='submit' value='Submit' id='$question->id' class='submitPoll' />";
break;
case "option2":
echo 'Option 2';
break;
case "option3":
echo 'Option 3';
break;
case "option4":
echo 'Option 4';
break;
default:
foreach($opts as $index => $opt) {
if ($opt->id == $question->id) {
echo '<input type="radio" name="choice" value="<?php echo $opt->choice_id; ?>" />';
echo $opt->name,'<br /><br />';
}}
echo "<input type='submit' value='Submit' id='$question->id' class='submitPoll' />";
break;
}
?>
</div>
<?php else: ?>
<p>No choices available!</p>
<?php endif; ?>
<?php endif; ?>
</div>
<div class="comment-buttons-holder">
<ul>
<li id="<?php echo $question->id; ?>" class="delete-btn">X</li>
</ul>
</div>
</li>
<?php endforeach; ?>
<?php endif; ?>
Ajax：
$(document).ready(function() {
add_submitPoll_handlers();
});
function add_submitPoll_handlers() {
$('.submitPoll').each(function() {
// 'submitPoll' is class for submit button
var btn = this;
$(btn).click(function() {
var ChoiceAnsVal = $('input:radio[name=choice]:checked').val();
var userId = $('#userId').val();
var id = btn.id;
console.log('user:'+userId+'poll:'+btn.id+'choice:'+ChoiceAnsVal);
submit_poll(userId, id, ChoiceAnsVal);
});
});
}
function submit_poll(userId, id, ChoiceAnsVal) {
$('.submitPoll').click(function() {
$.post("ajax/submit_poll.php",
{
task:"submit_poll",
userId: userId,
poll_id: id,
choice_id:ChoiceAnsVal
}
).error(
function() {
console.log("Error in script.js")
}
).success(
function(data) {
$('#completed').html('You have completed the poll!');//not working
//console.log("ResponseText:" + data); //I'm getting the //response
}
);
});HTML
<div id="question_id">html</div>
Jquery
$(selector).something(function(){
var id=$(this).id; //assuming this will be the id of question that is selected
$.ajax({
url:url. //url to which data to be submitted
type:post,
data: //data to be submitted
success:function(data){
//data will be page/data that returned by the server page
$(selector).html(html_daya);// you can create html string that to replaced and pass it as argument to html function
}
});
});
请参阅http://api.jquery.com/jquery.ajax/以获取完整的文档。