Question

我目前有一个CRUD提醒应用程序，并且具有一个上下文菜单，其中包含诸如编辑，删除等选项。上下文菜单上的按钮根据提醒ID进行更新，并且ID传递给bootstrap modal form。

function toggleMenuOn(e) {
    if ( menuState !== 1 ) {
      menuState = 1;
      menu.classList.add( contextMenuActive );
    }

    let reminder_id = e.target.id
    let context_btn1 = document.getElementById("context_menu_btn1");
    let reminder_pk = reminder_id.replace("reminder", "");
    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);
    $("#context_menu_btn1").modalForm({formURL: reminder_url});
  }

但是，当我在命令行中查看时，我看到了许多GET请求，要求单击一次按钮：

[22/Dec/2019 17:50:01] "GET /update_reminder/8/ HTTP/1.1" 200 4650
[22/Dec/2019 17:50:01] "GET /update_reminder/4/ HTTP/1.1" 200 4681
[22/Dec/2019 17:50:01] "GET /update_reminder/8/ HTTP/1.1" 200 4650
[22/Dec/2019 17:50:01] "GET /update_reminder/4/ HTTP/1.1" 200 4681

有趣的是，第一次加载页面时，我在提醒上单击“编辑”，出现一个GET请求。但是，当我再次单击它时，将显示2个GET请求，带有交替的链接，如上所示。在第三个编辑上，单击3显示GET请求。我在检查元素的“网络”选项卡中进行了查看，并显示了相同的内容。这是一个问题，因为它会使页面变慢，有时会返回不正确的表单url。我对它的发生方式和原因一无所知，因为modalForm仅被调用一次。

Answer 1

每次您切换菜单时都会创建一个新的modalForm，因为您将其声明放在toggleMenuOn中。相反，您应该声明一次（在应用程序加载时），请参见their README：

<script type="text/javascript">
$(document).ready(function() {

    $(".create-book").modalForm({
        formURL: "{% url 'create_book' %}"
    });

});
</script>

一次执行多个获取请求

1 个答案: