0

jquery/Ajaxを使用してデータベースを更新せずに更新するフォームがあります。jqueryは、送信時にラジオオプションをフェードアウトし、ユーザーが選択を変更したい場合に備えて別のボタンを表示します。

私の問題は、ユーザーが決定を送信した後、[気が変わった]ボタンをクリックすると、jqueryが以下のすべてのインスタンスのラジオを返すことです。

その「気が変わった」ボタンで、そのインスタンスだけのラジオをどのように戻すことができますか？複雑なシナリオとコードのチャンクについて申し訳ありません。さらに詳しい情報や説明が必要な場合は、質問してください。

ありがとう。

<? $result = $mysqli->query("SELECT * FROM items WHERE Job='$job'") or die(mysqli_error($mysqli));
while( $row = $result->fetch_assoc() ){ ?>
        <div class='tile'>

            <script type="text/javascript">
                $('document').ready(function(){
                    $('#form<?= $row['Id'] ?>').ajaxForm({
                        target: '#preview<?= $row['Id'] ?>',
                        success: function() {
                            $('#formbox<?= $row['Id'] ?>').fadeOut('slow'),
                            $('#preview<?= $row['Id'] ?>').fadeIn('slow');
                            $("button").click(function () {
                                $("#preview<?= $row['Id'] ?>").fadeOut("slow"),
                                $("#formbox<?= $row['Id'] ?>").fadeIn("slow");});
                        }
                    });
                });
            </script> 

            <div class='details'>
                <div id='radios' style='position:relative; height:25px;'>
                    <div id="preview<?= $row['Id'] ?>" style="width:258px; margin-left:-129px; left:50%; display:none; position:absolute;">
                        <button>Way to go! Click here to change your mind.</button>
                    </div>
                    <div id="formbox<?= $row['Id'] ?>" style='position:absolute;'> 
                    <form name='' id='form<?= $row['Id'] ?>' action='js/submit.php' method='post'>
                        <label>Keep:</label><input type='radio' name='dec[]' value='keep' <? if($row['Dec1']=='keep'){echo "checked='checked'";} ?> >
                        <label>Donate:</label><input type='radio' name='dec[]' value='donate' <? if($row['Dec1']=='donate'){echo "checked='checked'";} ?> >
                        <label>Sell:</label><input type='radio' name='dec[]' value='sell' <? if($row['Dec1']=='sell'){echo "checked='checked'";} ?> >
                        <label>Trash:</label><input type='radio' name='dec[]' value='trash' <? if($row['Dec1']=='trash'){echo "checked='checked'";} ?> >
                        <label>Give To:</label><input type='text' name='dec[]' size='15' <? if($row['Dec1']!='keep' && $row['Dec1']!='donate' && $row['Dec1']!='sell' && $row['Dec1']!='trash'){echo "value='".$row['Dec1']."'";} ?> >
                        <input type='hidden' name='id' value='<?= $row['Id'] ?>' />
                        <input type="submit" value="Submit">
                    </form>
                </div>
            </div>
        </div>
    </div>
<? 
}
4

1 に答える 1

2

問題は、フォームを送信するたびに、そのラジオのセットでフェードインするすべてのボタンにクリックハンドラーを追加することです。別のフォームを送信する場合、以前のハンドラーを削除することはないため、すべてのハンドラーが再びフェードインします。

たくさんの異なるハンドラーをそれぞれに置き換えて使用する代わりに、をクラスに$row['Id']バインドする必要があります。クリックしたフォームだけを操作するに.ajaxForm()は、DOMトラバーサル関数を使用する必要があります。$(this)

また、問題とは関係ないと思いますid='radios'が、行IDが追加されていないため、これらの要素に重複するIDを作成しています。

私はこれがそれをするべきだと思います:(フィドル）

<script type="text/javascript">
$('document').ready(function() {
    $('.form').ajaxForm({
        success: function(responseText, statusText, xhr, elem) {
            var formbox = elem.closest('.formbox');
            formbox.fadeOut('slow');
            formbox.siblings(".preview").fadeIn('slow');
        }
    });
    $("button").click(function() {
        var preview = $(this).closest(".preview");
        preview.fadeOut("slow");
        preview.siblings(".formbox").fadeIn("slow");
    });
});​
</script> 

<? $result = $mysqli->query("SELECT * FROM items WHERE Job='$job'") or die(mysqli_error($mysqli));
while( $row = $result->fetch_assoc() ){ ?>
        <div class='tile'>
            <div class='details'>
                <div class='radios' style='position:relative; height:25px;'>
                    <div class="preview" style="width:258px; margin-left:-129px; left:50%; display:none; position:absolute;">
                        <button>Way to go! Click here to change your mind.</button>
                    </div>
                    <div class="formbox" style='position:absolute;'> 
                    <form name='' class='form' action='js/submit.php' method='post'>
                        <label>Keep:</label><input type='radio' name='dec[]' value='keep' <? if($row['Dec1']=='keep'){echo "checked='checked'";} ?> >
                        <label>Donate:</label><input type='radio' name='dec[]' value='donate' <? if($row['Dec1']=='donate'){echo "checked='checked'";} ?> >
                        <label>Sell:</label><input type='radio' name='dec[]' value='sell' <? if($row['Dec1']=='sell'){echo "checked='checked'";} ?> >
                        <label>Trash:</label><input type='radio' name='dec[]' value='trash' <? if($row['Dec1']=='trash'){echo "checked='checked'";} ?> >
                        <label>Give To:</label><input type='text' name='dec[]' size='15' <? if($row['Dec1']!='keep' && $row['Dec1']!='donate' && $row['Dec1']!='sell' && $row['Dec1']!='trash'){echo "value='".$row['Dec1']."'";} ?> >
                        <input type='hidden' name='id' value='<?= $row['Id'] ?>' />
                        <input type="submit" value="Submit">
                    </form>
                </div>
            </div>
        </div>
    </div>
<? 
}
于 2012-10-04T23:31:58.440 に答える