Bootstrap modal показывает несколько раз

Question

У меня есть приложение .NET с использованием C#, Bootstrap 2.3.2 и последней версии jQuery. В моем файле Javascript я показываю Modal каждый раз, когда пользователь нажимает кнопку, делая запрос Ajax на сервер, который затем возвращает HTML для модального со всей информацией:

Звучит комплексно, но на самом деле довольно просто.

Это файл CSHTML:

//div for the EditPackage modal 
<div id="editModal"></div> 

Это JavaScript, который показывает модальность:

//Show Edit Package modal 
    $("a.btn.btn-default.editPackage").click(function() { 
     $.ajax({ 
      url: $(this).data('url'), 
      type: 'get', 
      cache: false, 
      success: function (result) { 
       $('#editModal').html(result).find('.modal').modal({ 
        show: true 
       }); 

      //the popup needs these files to work 
      //so we send them over the internet to the client ! 
      dyamicallyLoadJS("Scripts/myCustom.js"); 
      } 
     }); 
     return false; //prevent browser defualt behavior 
    }); 

Так что, когда я нажимаю на указанную кнопку, сервер получает запрос и отправляет мне HTML с модальным кодом, который затем помещается внутри div editModal, который затем отображается пользователю.

Динамическая загрузка Javascript необходимых модальным осуществляется с помощью функции в одном файле:

//http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml 
function dyamicallyLoadJS(filePath) { 
    var fileref = document.createElement('script'); 
    fileref.setAttribute("type", "text/javascript"); 
    fileref.setAttribute("src", filePath); 
    document.getElementsByTagName("head")[0].appendChild(fileref) 
} 

Сам модальный это просто HTML. Это довольно скучно:

@model AmarisGate.Model.ModalPackageInfo 

@{ 
    ViewBag.Title = "_ModalPackageInfo"; 
} 

<div class="modal fade" id="@Model.modalId" tabindex="-1" role="dialog" aria-labelledby="@Model.modalId" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: auto; max-height: 80vh;"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title" id="myModalLabel">@Model.modalTitle</h4> 
      </div> 
      <div class="modal-body" data-val="@Model.packageId"> 
       <form class="form-horizontal"> 
        <div class="control-group"> 
         <label class="control-label">Package Name: </label> 
         <div class="controls"> 
          <input type="text" class="form-control" id="package-name" placeholder="@Model.pkgNamePlaceHolder"> 
         </div> 
        </div> 
        <div class="control-group"> 
         <label class="control-label">Select the Function:</label> 
         <div class="controls"> 
          <input class="select2s" data-edit-values="@Model.functionsString" data-o2f-placeholder="Select Employee Function..." data-o2f-url="@Url.Action("FunctionsMultiple", "Home")" data-val="false" id="SubCategoryId" name="SubCategoryId" multiple="multiple" type="text"/> 
         </div> 
        </div> 
        <div class="control-group"> 
         <label class="control-label">Select the materials:</label> 
         <div class="controls"> 
          <input class="select2s" data-edit-values="@Model.materialsString" data-o2f-placeholder="Select Materials..." data-o2f-url="@Url.Action("MaterialsMultiple", "Home")" data-val="false" id="MaterialId" name="MaterialId" multiple="multiple" type="text" /> 
         </div> 
        </div> 
        <div class="control-group"> 
         <label class="control-label">Company:</label> 
         <div class="controls"> 
          <input class="select2s" data-edit-values="@Model.companiesString" data-o2f-placeholder="All Companies (default)" data-o2f-url="@Url.Action("CompaniesMultiple", "Home")" data-val="false" id="CompaniesId" name="CompaniesId" multiple="multiple" type="text" /> 
         </div> 
        </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       <button type="button" class="btn btn-primary" id="@Model.saveButtonId" data-url="@Model.saveButtonUrl">@Model.saveButtonText</button> 
      </div> 
     </div> 
    </div> 
</div> 

Однако у меня есть проблема. Если я нажму кнопку один раз, всплывающее окно отобразится один раз, что вполне нормально. Если я дважды нажму дважды, он будет показан дважды, что раздражает. Если я нажму X ​​раз, появится X раз, что просто ужасно.

С моей точки зрения эта ошибка возникает из-за того, что каждый раз, когда я нажимаю кнопку «Изменить», я отправляю и загружаю файл Javascript. Затем в следующий раз, когда я нажму кнопку, я запустим предыдущий файл, который у меня есть, плюс новый, и так далее.

Как исправить это? Как я могу несколько раз запускать файлы JavaScript?

Answer 1

Решение ошибки:

• Убедитесь, что содержание в MyCustom.js является не загружается на главную страницу либо. Короче говоря, его содержимое должно быть уникальным и для Modal только!