Question

当我触发此引导模式时，它会选择表中最顶层的条目作为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 %}

Answer 1

这是一个有效的分叉小提琴：

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和类的使用不足 - 也就是说，您没有使用正确的选择器来选择精确/正确的元素。

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

使用jQuery Tablesorter选择错误项目的Bootstrap模式

1 个答案: