使用 jQuery Tablesorter 引导模式选择错误的项目答案

【问题标题】：Bootstrap modal selecting wrong item with jQuery Tablesorter使用 jQuery Tablesorter 引导模式选择错误的项目
【发布时间】：2012-10-12 16:50:09
【问题描述】：

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

【问题讨论】：

我立即注意到的一件事是，您的 DIV 在您的 FORM 内部或周围不正确地打开/关闭......仅此一项可能会使 tablesorter 窒息。其余的表格代码在哪里？
@technoTarek 当然，我会尝试设置一个 jsfiddle，尽管没有 django 的东西就不会完全一样。 DIV 是这样放置的，因此我可以将页脚按钮用作表单按钮。
你不能相交
和
标签，将从页脚
中移出，将它放在模态
中，你现在正在做的是就有效的 HTML 结构而言，这是完全错误的。当然，您还必须将开始标记移动到模态
.
这是小提琴的一个好处——您将删除 Django 代码，从而缩小它是服务器端还是客户端问题的范围。您应该能够将渲染的源代码用于制作小提琴......但正如我所说，16dots 重申，您需要首先使您的代码有效。
在上面的小提琴中没有更新......另外，作为一个良好的堆栈溢出公民（以及一般良好的调试）的衡量标准，你能清理小提琴吗？删除所有不必要的代码（包括导航栏在内的表格之外的所有内容）、所有内联样式、所有无关的 css/js（例如，下拉 js 和响应式 cs）等。基本上，只将其归结为有问题的组件.

【解决方案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 和类的使用松散——也就是说，您没有使用正确的选择器来选择准确/正确的元素。

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

【讨论】：

谢谢！虽然还是有问题。模态是由 for 循环生成的，这就是它们最终具有相同名称的方式。处理此问题的首选方法是什么？哦，那一点 javascript 是正确的条目出现在模态文本字段中。
关于循环，您可以简单地迭代一个计数器变量并将其当前值附加到每个 ID。我不是 python/django 编码器，但在 PHP 中它会是这样的：$i=0; foreach{ $elementID = 'EditModal' 。 $i; $i++ }.