1

このブートストラップモーダルをトリガーすると、行のエントリではなく、テーブルの一番上のエントリが e.entry として選択されます。列を並べ替えると、モーダルは再び最上位のエントリを選択します。

何が問題なのかについてのアイデアはありますか?

ありがとう！

                <script >
                $(document).ready(function(){
                   $("#EntryTable").tablesorter(
                    {sortList: [[1,0]]}
                    );
                 });
            </script>
            <table class="table" id="EntryTable">
                <thead>
                    <tr>                                
                        <th>Idea</th>
                        <th>Edit</th>
                    </tr>
                </thead>
                <tbody>


            {% for e in projects.entries.all %}
            <tr class="info">
                <td>{{ e.entry }}</td>
                <td><a href="#EditModal" role="button" data-toggle="modal" class="open-EditEntryDialog label label-info" data-id="{{ e.entry }}">Edit</a>

                    <div class="modal hide fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="EditModalLabel" aria-hidden="true">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="EditModalLabel">Edit an Entry</h3>
                      </div>
                      <div class="modal-body">
                            <form action="{{ projects.get_absolute_url }}" method="post">
                            {% csrf_token %}
                            <input type='hidden' name='entry_id' value='{{ e.id }}'>
                            <input type='hidden' name='project_id' value='{{ projects.id }}'>
                            <input type='text' id='entry' name="entry" placeholder="{{ e.entry }}"> 

                        </div>

                      <div class="modal-footer">
                        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                        <button type='submit' name="edit_entry" value='Edit Entry' class="btn btn-primary">Edit Entry</button>
                        </form>
                      </div>
                    </div>
                </td>
                </tr>
            {% endfor %}
4

1 に答える 1

3

これは、機能するフォークされたフィドルです。

http://jsfiddle.net/technotarek/9KsxW/4/

重要: モーダルが機能しなくなった理由は、(1) 間違ったバージョンの jQuery が読み込まれていたこと、および (2) DOM にまったく同じ ID (#EditModal など) を持つ複数の要素があるためです。ID は一意である必要があります。同じ ID を持つ複数の要素がある場合、モーダル プラグインはどの要素と対話するかを認識しません。フィドルの目的で、ID を #EditModal、#EditModal2、および #EditModal3 にしました。明らかに、サーバー側のコードで動的に実行する必要があります。

関連するメモとして、JavaScript の一部も削除しました。次のことで何を達成しようとしているのか正確にはわかりません。

$(document).on("click", ".open-EditEntryDialog", function() {
    var EntryId = $(this).data('id');
    console.log($(this));
    $(".modal-body #entry").val(EntryId);
    $('#EditModal').modal('show');
});​

...しかし、モーダルが不適切に動作していました。選択したモーダルだけでなく、3 つのモーダルすべてを起動していました。繰り返しますが、これは ID とクラスの使い方が緩いためかもしれません。つまり、正しいセレクターを使用して正確な/正しい要素を選択していない可能性があります。

いずれにせよ、フィドルが正しいモーダルをソートして起動することがわかります (その事実を確認できるように、各モーダルのタイトルを変更しました)。

于 2012-10-22T22:24:06.037 に答える