1

ページ全体をリロードせずに、投票の質問と同じ領域とページに投票の結果を表示しようとしています。結果を取得して新しいページに表示することはできますが、質問がある場所の html を置き換えて結果の html に置き換える方法がわかりません。

HTML (アンケートの質問を含む)

<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呼び出し:

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

*window.location.replace("poll_results.php")* の代わりに、#poll-area 内の HTML を poll_results.php の #poll-area に置き換えたいと思いますが、そうします方法がわからない。

投票結果のHTML (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>

助けてくれてありがとう！

4

2 に答える 2

1

最も簡単ですが、最もクリーンではありません: innerhtml と getElementById() を使用します

次のようなものが得られます。

var div = getElementById('poll-area'); //The poll itself
div.innerHtml = getElementbyId('answers'); //The answers

回答と投票に同じ ID を使用するため、ID として「回答」を使用したことに注意してください。したがって、ネストされたものは機能しません。Answers () の最初の子に「answers」という新しい ID を付けます。

JavaScript に詳しい方は、createElement を使用して新しい要素を追加してください。これにより速度が向上し、より優れていますが、もう少し高度です。

于 2012-07-05T23:38:30.797 に答える
1

poll_results.phpの出力で、ID「poll-area」の外側の div を削除できます。現在のページに引き込まれたときに ID が重複することは望ましくありません。

あなたのjQueryの場合、これでうまくいくはずです：

success: function(result) {
    $j("#poll-area").html(result);

私が知っているように、現在 poll-area div 内に存在するものはすべて、ajax クエリの結果で上書きされます。(投票オプションが消え、結果が表示されます)

編集 (コメントの要約): poll_vote.phpに含まれる HTML を出力する必要があります。poll_results.php

于 2012-07-05T23:47:09.260 に答える