如何使用ajax成功回调数据更改以前的html（部分）？

Question

I have this list of poll questions (with distinct id) along with options. When I submit a poll option I get an AJAX response back.

I want to use this response to publish as result instantly without page refresh but exactly replacing the html of the same poll question with the success ajax data received.

Specifically, my question is on submitting a poll answer how to change/remove the question (html) to that of new html containing answer(different html). Only the html of the related poll should change not all the poll's html. I'm successfully getting the ajax success callback.

This is the code:

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
            }
        );
    });

</div>

Answer 1

Ajax is exactly designed for the above purpose. But for this i would suggest using jQuery+AJAX. This will be an easy method.Since you haven't provide you code I cannot provide you the exact code needed. The code will be like this

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
    }
 });
});

Please refer http://api.jquery.com/jquery.ajax/ for complete documentation.