Загрузите bootstrap modal с отдельной страницы при нажатии кнопки

Question

У меня есть веб-страница default.html, содержащая кнопку с id ="btn-add" и другая страница add-students.html, содержащая только загрузочный модальный. Как я могу загрузить модальный номер в default.html при нажатии кнопки (btn-add).

код для кнопки:

 <a href="#" class="btn btn-primary" id="btn-add" style="float:right" data-toggle="modal" data-target="#myModal2" ><span class="glyphicon glyphicon-plus"><strong> Add</strong></span> 

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

$(document).on("ready", function() { 
      //load student table automatically 
       $.ajax({ 
        url: "ajax/grid/grid-students.html", 
        success: function (result) { 
         $("#data").html(result); 
        }      

       }); 
      //load modal 
       $("btn-add").click(function() { 
        $.ajax({ 
         url: "ajax/add/add-students.html", success: function (result) { 
          $(document).load(result); 
         } 
        }); 
       }); 



     }); 

мой модальный код в адд-студентов:

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModalLabel">Applicants</h4> 
      </div> 
      <div class="modal-body"> 

       <form role="form"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-asterisk"></span></span> 
         <input type="text" class="form-control" placeholder="ID" aria-describedby="basic-addon1" required> 
        </div><br /> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span> 
         <input type="text" class="form-control" placeholder="Name" aria-describedby="basic-addon1" required> 
        </div><br /> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-envelope"></span></span> 
         <input type="email" class="form-control" placeholder="Email" aria-describedby="basic-addon1" required> 
        </div><br /> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-earphone"></span></span> 
         <input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1" required> 
        </div> 


        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
         <button type="submit" class="btn btn-primary">Save</button> 
        </div> 
       </form> 

      </div> 

     </div> 
    </div> 
</div> 

Answer 1

Вы пытаетесь сделать 2 запросов AJAX, когда гнездо load() внутри успеха $.ajax

Вы можете сделать это с помощью $.get(), который сокращенный метод для $.ajax, а затем в завершении обратного вызова завершения модальности.

Я бы сразу удалил атрибуты данных из кнопки, так как бутстрап не сможет найти цель, так как она не существует.

// note invalid selector for button in your code 
$("#btn-add").click(function() { 
    // get needed html 
    $.get("ajax/add/add-students.html", function (result) { 
     // append response to body 
     $('body').append(result); 
     // open modal 
     $('#myModal2').modal(/* options object here*/); 

    }); 
}); 

Вы также можете проверить наличие модального элемента перед загрузкой это HTML каждый раз, так как идентификаторы должны быть уникальными

Вы можете проверить, используя что-то вроде:

if(!$('#myModal2').length){ 
    // load html and open new modal 
}else{ 
    // just open modal...see docs 
}