时间戳

首页 > 解决方案 > 运行两个模式可以在不同的引导选项卡中运行第三个模式不会

javascript - 运行两个模式可以在不同的引导选项卡中运行第三个模式不会

问题描述

我正在使用 django-bootstrap-modal-forms。我有带有清晰表格的引导选项卡，我为文件制作了一个模态，它起作用了；但我正在尝试添加两个模态；一个给作者，另一个给翻译。生病显示加载到表中的代码。

{% include "_modal.html" %}
<div id="linkeddocuments">
<div class="col-12 mb-3">
    {% include "_authors_table.html" %}
</div>
</div>
<div id="searchdocumentpanel" class="container">
  <div class="row">
   <div class="col"></div>
   <div class="col">
   <button type="button" class='btn btn-primary btn-danger' id='create-author-async'><span class="fa fa-plus mr-2"></span>new author async</button>
    <br/>
    <br/>Search Authors:<br/>
    <br/>
    <input type="text" id="id_search_authors">
    </input>
    </div>
    <div class="col"></div>
</div>
  <br/>
  <div class="col-12 mb-3">
      {% include "_authors_candidates_table.html" %}
  </div>
</div>

<div id="linkeddocuments">
<div class="col-12 mb-3">
    {% include "_translators_table.html" %}
</div>
</div>
<div id="searchdocumentpanel" class="container">
  <div class="row">
   <div class="col"></div>
   <div class="col">
   <button type="button" class='btn btn-primary btn-danger' id='create-translator-async'><span class="fa fa-plus mr-2"></span>new translator async</button>
    <br/>
    <br/>Search Translator:<br/>
    <br/>
    <input type="text" id="id_search_translators">
    </input>
    </div>
    <div class="col"></div>
</div>
  <br/>
  <div class="col-12 mb-3">
      {% include "_translators_candidates_table.html" %}
  </div>
</div>
<script type="text/javascript">
$(function () {
var asyncSuccessMessageCreateAuthor = [
"<div ",
"style='position:fixed;top:0;z-index:10000;width:100%;border-radius:0;' ",
"class='alert alert-icon alert-success alert-dismissible fade show mb-0' role='alert'>",
"Success: Author was created.",
"<button type='button' class='close' data-dismiss='alert' aria-label='Close'>",
"<span aria-hidden='true'>&times;</span>",
"</button>",
"</div>",
"<script>",
"$('.alert').fadeTo(2000, 500).slideUp(500, function () {$('.alert').slideUp(500).remove();});",
"<\/script>"
].join("");

var asyncSuccessMessageUpdateAuthor = [
"<div ",
"style='position:fixed;top:0;z-index:10000;width:100%;border-radius:0;' ",
"class='alert alert-icon alert-success alert-dismissible fade show mb-0' role='alert'>",
"Success: Author was updated.",
"<button type='button' class='close' data-dismiss='alert' aria-label='Close'>",
"<span aria-hidden='true'>&times;</span>",
"</button>",
"</div>",
"<script>",
"$('.alert').fadeTo(2000, 500).slideUp(500, function () {$('.alert').slideUp(500).remove();});",
"<\/script>"
].join("");
var asyncSuccessMessageCreateTranslator = [
"<div ",
"style='position:fixed;top:0;z-index:10000;width:100%;border-radius:0;' ",
"class='alert alert-icon alert-success alert-dismissible fade show mb-0' role='alert'>",
"Success: Translator was created.",
"<button type='button' class='close' data-dismiss='alert' aria-label='Close'>",
"<span aria-hidden='true'>&times;</span>",
"</button>",
"</div>",
"<script>",
"$('.alert').fadeTo(2000, 500).slideUp(500, function () {$('.alert').slideUp(500).remove();});",
"<\/script>"
].join("");

var asyncSuccessMessageUpdateTranslator = [
"<div ",
"style='position:fixed;top:0;z-index:10000;width:100%;border-radius:0;' ",
"class='alert alert-icon alert-success alert-dismissible fade show mb-0' role='alert'>",
"Success: Translator was updated.",
"<button type='button' class='close' data-dismiss='alert' aria-label='Close'>",
"<span aria-hidden='true'>&times;</span>",
"</button>",
"</div>",
"<script>",
"$('.alert').fadeTo(2000, 500).slideUp(500, function () {$('.alert').slideUp(500).remove();});",
"<\/script>"
].join("");

function updateAuthorModalForm() {
$(".author-edit").each(function () {
  $(this).modalForm({
    formURL: $(this).data("form-url"),
    asyncUpdate: true,
    asyncSettings: {
      closeOnSubmit: false,
      successMessage: asyncSuccessMessageUpdateAuthor,
      dataUrl: "{% url 'authors' publication.pk %}",
      dataElementId: "#authors-div",
      dataKey: "table",
      addModalFormFunction: updateAuthorModalForm
    }
  });
});
}
updateAuthorModalForm();
function updateTranslatorModalForm() {
$(".translator-edit").each(function () {
  $(this).modalForm({
    formURL: $(this).data("form-url"),
    asyncUpdate: true,
    asyncSettings: {
      closeOnSubmit: false,
      successMessage: asyncSuccessMessageUpdateTranslator,
      dataUrl: "{% url 'translators' publication.pk %}",
      dataElementId: "#translators-div",
      dataKey: "table",
      addModalFormFunction: updateTranslatorModalForm
    }
  });
});
}
updateTranslatorModalForm();
function createAuthorAsyncModalForm() {
$("#create-author-async").modalForm({
    formURL: "{% url 'author_new' publication.pk %}",
    modalID: "#create-modal",
    asyncUpdate: true,
    createAuthor: true,
    asyncSettings: {
      closeOnSubmit: true,
      successMessage: asyncSuccessMessageCreateAuthor,
      dataUrl: "{% url 'authors' publication.pk %}",
      dataElementId: "#authors-div",
      dataKey: "table",
      addModalFormFunction: updateAuthorModalForm
     }
});
}
createAuthorAsyncModalForm();
function createTranslatorAsyncModalForm() {
$("#create-translator-async").modalForm({
    formURL: "{% url 'translator_new' publication.pk %}",
    modalID: "#create-modal",
    asyncUpdate: true,
    asyncSettings: {
      closeOnSubmit: true,
      successMessage: asyncSuccessMessageCreateTranslator,
      dataUrl: "{% url 'translators' publication.pk %}",
      dataElementId: "#translatros-div",
      dataKey: "table",
      addModalFormFunction: updateTranslatorModalForm
     }
});
}
createTranslatorAsyncModalForm();
// Hide message
$(".alert").fadeTo(2000, 500).slideUp(500, function () {
  $(".alert").slideUp(500);
});
});
</script>

对于文件：

{% include "_modal.html" %}
<div id="linkeddocuments">
<div class="col-12 mb-3">
    {% include "_authors_table.html" %}
</div>
</div>
<div id="searchdocumentpanel" class="container">
  <div class="row">
   <div class="col"></div>
   <div class="col">
   <button type="button" class='btn btn-primary btn-danger' id='create-author-async'><span class="fa fa-plus mr-2"></span>new author async</button>
    <br/>
    <br/>Search Authors:<br/>
    <br/>
    <input type="text" id="id_search_authors">
    </input>
    </div>
    <div class="col"></div>
</div>
  <br/>
  <div class="col-12 mb-3">
      {% include "_authors_candidates_table.html" %}
  </div>
</div>

<div id="linkeddocuments">
<div class="col-12 mb-3">
    {% include "_translators_table.html" %}
</div>
</div>
<div id="searchdocumentpanel" class="container">
  <div class="row">
   <div class="col"></div>
   <div class="col">
   <button type="button" class='btn btn-primary btn-danger' id='create-translator-async'><span class="fa fa-plus mr-2"></span>new translator async</button>
    <br/>
    <br/>Search Translator:<br/>
    <br/>
    <input type="text" id="id_search_translators">
    </input>
    </div>
    <div class="col"></div>
</div>
  <br/>
  <div class="col-12 mb-3">
      {% include "_translators_candidates_table.html" %}
  </div>
</div>
<script type="text/javascript">
$(function () {
var asyncSuccessMessageCreateAuthor = [
"<div ",
"style='position:fixed;top:0;z-index:10000;width:100%;border-radius:0;' ",
"class='alert alert-icon alert-success alert-dismissible fade show mb-0' role='alert'>",
"Success: Author was created.",
"<button type='button' class='close' data-dismiss='alert' aria-label='Close'>",
"<span aria-hidden='true'>&times;</span>",
"</button>",
"</div>",
"<script>",
"$('.alert').fadeTo(2000, 500).slideUp(500, function () {$('.alert').slideUp(500).remove();});",
"<\/script>"
].join("");

var asyncSuccessMessageUpdateAuthor = [
"<div ",
"style='position:fixed;top:0;z-index:10000;width:100%;border-radius:0;' ",
"class='alert alert-icon alert-success alert-dismissible fade show mb-0' role='alert'>",
"Success: Author was updated.",
"<button type='button' class='close' data-dismiss='alert' aria-label='Close'>",
"<span aria-hidden='true'>&times;</span>",
"</button>",
"</div>",
"<script>",
"$('.alert').fadeTo(2000, 500).slideUp(500, function () {$('.alert').slideUp(500).remove();});",
"<\/script>"
].join("");
var asyncSuccessMessageCreateTranslator = [
"<div ",
"style='position:fixed;top:0;z-index:10000;width:100%;border-radius:0;' ",
"class='alert alert-icon alert-success alert-dismissible fade show mb-0' role='alert'>",
"Success: Translator was created.",
"<button type='button' class='close' data-dismiss='alert' aria-label='Close'>",
"<span aria-hidden='true'>&times;</span>",
"</button>",
"</div>",
"<script>",
"$('.alert').fadeTo(2000, 500).slideUp(500, function () {$('.alert').slideUp(500).remove();});",
"<\/script>"
].join("");

var asyncSuccessMessageUpdateTranslator = [
"<div ",
"style='position:fixed;top:0;z-index:10000;width:100%;border-radius:0;' ",
"class='alert alert-icon alert-success alert-dismissible fade show mb-0' role='alert'>",
"Success: Translator was updated.",
"<button type='button' class='close' data-dismiss='alert' aria-label='Close'>",
"<span aria-hidden='true'>&times;</span>",
"</button>",
"</div>",
"<script>",
"$('.alert').fadeTo(2000, 500).slideUp(500, function () {$('.alert').slideUp(500).remove();});",
"<\/script>"
].join("");

function updateAuthorModalForm() {
$(".author-edit").each(function () {
  $(this).modalForm({
    formURL: $(this).data("form-url"),
    asyncUpdate: true,
    asyncSettings: {
      closeOnSubmit: false,
      successMessage: asyncSuccessMessageUpdateAuthor,
      dataUrl: "{% url 'authors' publication.pk %}",
      dataElementId: "#authors-div",
      dataKey: "table",
      addModalFormFunction: updateAuthorModalForm
    }
  });
});
}
updateAuthorModalForm();
function updateTranslatorModalForm() {
$(".translator-edit").each(function () {
  $(this).modalForm({
    formURL: $(this).data("form-url"),
    asyncUpdate: true,
    asyncSettings: {
      closeOnSubmit: false,
      successMessage: asyncSuccessMessageUpdateTranslator,
      dataUrl: "{% url 'translators' publication.pk %}",
      dataElementId: "#translators-div",
      dataKey: "table",
      addModalFormFunction: updateTranslatorModalForm
    }
  });
});
}
updateTranslatorModalForm();
function createAuthorAsyncModalForm() {
$("#create-author-async").modalForm({
    formURL: "{% url 'author_new' publication.pk %}",
    modalID: "#create-modal",
    asyncUpdate: true,
    createAuthor: true,
    asyncSettings: {
      closeOnSubmit: true,
      successMessage: asyncSuccessMessageCreateAuthor,
      dataUrl: "{% url 'authors' publication.pk %}",
      dataElementId: "#authors-div",
      dataKey: "table",
      addModalFormFunction: updateAuthorModalForm
     }
});
}
createAuthorAsyncModalForm();
function createTranslatorAsyncModalForm() {
$("#create-translator-async").modalForm({
    formURL: "{% url 'translator_new' publication.pk %}",
    modalID: "#create-modal",
    asyncUpdate: true,
    asyncSettings: {
      closeOnSubmit: true,
      successMessage: asyncSuccessMessageCreateTranslator,
      dataUrl: "{% url 'translators' publication.pk %}",
      dataElementId: "#translatros-div",
      dataKey: "table",
      addModalFormFunction: updateTranslatorModalForm
     }
});
}
createTranslatorAsyncModalForm();
// Hide message
$(".alert").fadeTo(2000, 500).slideUp(500, function () {
  $(".alert").slideUp(500);
});
});
</script>

如果我禁用前两个模式（作者和翻译者），文件模式将起作用。否则我会得到一个没有模态的黑屏。

标签： javascriptpythonhtmldjango

解决方案

我通过创建一个新的 _modal2.html 并使用 id create-modal2 解决了这个问题。每个选项卡都有自己的创建模式。是一个html问题。

推荐阅读