javascript - 无法更新 Bootstrap 模态表单

Question

我有一个 CRUD 提醒应用程序，当用户右键单击提醒时，会弹出一个上下文菜单。选项包括编辑、删除等。每个提醒都有一个 id，上下文菜单按钮根据提醒 id 进行更新，并将其传递给 Bootstrap 模态表单:

JS:

//part of the context menu script
//this function is called when the user right clicks inside of any element with class task
function toggleMenuOn(e) {
    if ( menuState !== 1 ) {
      menuState = 1;
      menu.classList.add( contextMenuActive );
    }

    let reminder_id = e.target.id

    $.ajax({
    url: '/ajax/get_reminder/',
    data: {
      'reminder_id': reminder_id
    },
    dataType: 'json', 
    success: function (data) {
        let context_btn1 = document.getElementById("context_menu_btn1");
        let reminder_pk = data.serialized_reminder.toString(); 
        let reminder_url = "{% url 'update-reminder' 0 %}".replace(/0/, reminder_pk) 
        context_btn1.className = "update-reminder context-menu__link btn btn-light";
        context_btn1.setAttribute('data-id', reminder_url);
        change_var(reminder_url)
    }  
  });

  }

let context_btn_id = "/update_reminder/0/";
function change_var(new_name) {
    context_btn_id = new_name;
}
$(document).ready(function() {
    $("#context_menu_btn1").click(function () {
        $(this).modalForm({formURL: context_btn_id});  
    });
});

HTML:

<nav id="context-menu" class="context-menu">
    <ul class="context-menu__items">
        <li class="context-menu__item">
            <button type="button" class="context-menu__link btn btn-light" id="context_menu_btn1" data-id=""><i class="fa fa-edit"></i> Edit</button>
        </li>
        <li class="context-menu__item">
            <button type="button" class="context-menu__link btn btn-light" id="context_menu_btn2" data-id=""><i class="fa fa-times"></i> Delete</button>
        </li> 
        <li class="context-menu__item">
            <button type="button"class="context-menu__link btn btn-light" id="context_menu_btn3" data-id=""><i class="fa fa-eye"></i> Share</button>
        </li>
    </ul>
</nav>

提醒 HTML:

<div>
    <h3 class="ml-4">Long-Term Assignments:</h3> 
    <div class="events-content-section ml-4 mr-3">
        {% get_reminder_id user.username as id_reminders %} 
        {% for reminder_id, long_term_reminder in id_reminders.items %}
            <div class="task mb-2" style="display: flex;">
                <button type="button" class="view-reminder btn btn-light" data-id="{% url 'view-reminder' long_term_reminder.pk %}" id="{{ reminder_id }}" style="width: 100%;">
                    <h4 style="float: left;">{{ long_term_reminder.title }}</h4>
                </button>
            </div> 
        {% endfor %}    
    </div>
</div>

如您所见，我有一个导航菜单，并且有一些按钮可以在每次显示时更改 data-id。该代码第一次工作，但是当我去编辑另一个提醒时，它只会显示第一个提醒的模式形式。例如，如果我要更新名为 Test1 的提醒，然后尝试编辑 Test2，它将显示 Test1 的编辑表单。我认为这与每次更新 context_btn_id 时代码不创建新的 modalForm 有关。作为引用，下面的代码可以工作，但会为每个提醒创建一个单独的按钮。

$(".view-reminder").each(function () {
  $(this).modalForm({formURL: $(this).data('id')});
});

我该如何解决这个问题？任何帮助将不胜感激!

Answer 1

您可以为提醒列表或表格中的每个提醒添加 data-id 属性，并在导航时单击您可以获得所选的提醒 ID。