Running two modals works runnig a third one in a different bootstrap tab does not

by

I am using django-bootstrap-modal-forms. I have bootstrap tabs with crispy forms I made a modal for files and it worked; But I am trying to add two modals; one for authors the other for translators.
Ill show the code that is loaded in a table.

{% 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>

And for the files:

{% 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>

If I disable the first two modals (authors & translators) the file modal will work. Otherwise I get a dark screen without modal.

38 thoughts on “Running two modals works runnig a third one in a different bootstrap tab does not”

  14. 925807 461074Youre so cool! I dont suppose Ive read anything in this way before. So nice to locate somebody by original thoughts on this topic. realy thanks for beginning this up. this fabulous web site is one thing that is needed on the internet, a person with a bit of originality. beneficial project for bringing a new challenge towards internet! 921900

    Reply

  36. 861012 165678 There are some intriguing points in time in this write-up but I dont know if I see all of them center to heart. There is some validity but I will take hold opinion until I look into it further. Good article , thanks and we want more! Added to FeedBurner as properly 973814

    Reply

Leave a Comment