как получить контент из блейд-файлов и динамически показать его в модальном режиме в laravel

Question

У меня есть пять разных модальных форм с их js, которые отображаются при нажатии на соответствующую кнопку, что беспорядочно складывать все модальные и другие материалы в один блейд-файл.

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

Answer 1

Да, вы можете.

В вашем контроллере представьте, что у вас есть метод с именем create , и вы хотите поместить его ответ в модальное тело.

<?php
namespace App\Http\Controllers;
class SomeController extends Controller{

  public funtion create(){
    $someVariable;
    $view=\View::make::('directory.your_blade_file',compact('someVariable'));
    return ['html'=>$view->render()];
  }
}

И теперь в вашем клиентском коде вы можете действовать следующим образом.

Примечание: Я предполагаю, что вы используете jQuery ajax для получения данных с сервера и загрузочный модальный для отображения контента

<div class="modal" id="single-modal-in-the-page" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
    <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary">Save changes</button>
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  </div>
</div>

<script>
 $(function(){
   $('#some-button').on('click',function(){
      var modal=$('#single-modal-in-the-page');  
      $.ajax({
        type:"GET",
        url:'http://url/some/create',
        data:{/*any query string paramteres can be set here*/},
        success:function(response){
          modal.find('.modal-body').html(response.html);
          modal.modal('show');
        },
        error:function(error){
          // Or handle the errors in your own way
          console.log(error);
        }

      });    
   });
 });

</script>