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

...但它使模态行为不正确。它正在启动所有三种模式，而不仅仅是选定的模式。同样，这可能是因为您对 ID 和类的使用松散——也就是说，您没有使用正确的选择器来选择准确/正确的元素。

在任何情况下，您都会看到小提琴现在排序并启动了正确的模态（我更改了每个模态的标题以帮助确认这一事实）。

于 2012-10-22T22:24:06.037 回答