Question

查看

<a href="#" title="Kategori Baru" class="addCat-{{$language->id}} btn btn-primary" onclick="createNewCategory({{$language->id}})"><i class="fa fa-plus" aria-hidden="true"></i></a>

Jquery的

function createNewCategory(idx){
var modal = $('#category').modal();
modal.find('.modal-title').html('Kategori baru');
modal.find('.modal-body-category').html('<p>Loading&hellip;</p>');
modal.find('.modal-body-category').load('http://localhost:8000/category/create',{},function(d){
    var dlg = $(this);
    $('.ok').unbind().click(function(){
      dlg.find('form').ajaxSubmit({
          dataType : 'json',
          success : function(data){
              var app = '<option selected="" value="'+data.CategoryID+'">'+data.CategoryName+'</option>';
              $('.cats-1').append(app);
              $('.cats-1').multiselect('rebuild');
          }
      });
      modal.modal('hide');
    });
  })
  return false;
}

如何在模态中使用加载？当我点击模态时，我希望我的模态显示http://localhost:8000/category/create的页面，但我得到了

错误405现在允许的方法

任何人都可以帮我解决吗？

Answer 1

这是不可能的，因为如果你想更改页面需要加载的URL，除非你的页面是SPA（单页面应用程序）。如果认为你在使用模态的错误实现。尝试使用简单的方法获取数据并将其传递给模态内的元素。

试试这个例子哥们。

叶片

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#editUser" date-id="{{ $user->id }}" date-name="{{ $user->name }}" date-email="{{ $user->email }}">Add New Team</button>

刀片内的模态

<div class="modal fade" id="editUser">
<div class="modal-dialog">
    <div class="modal-content" style="margin-top: 150px;">
        <div class="modal-header bg-primary">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Edit User</h4>
            </div>
            <form class="form-horizontal" action="#" method="POST" id="editUserform">
                <div class="modal-body">
                    {{ csrf_field()}}
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="propertyName">
                            name
                        </label>
                        <div class="col-md-9">
                            <input class="form-control" id="name" name="name" type="text"  required="true" value="{{ old('teamName') }}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="propertyName">
                            Email
                        </label>
                        <div class="col-md-9">
                            <input class="form-control" id="email" name="email" type="text"  required="true" value="{{ old('teamName') }}">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-danger">Cancel </button>
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

jquery的

   <script>
    $(document).on("click", "#editUser", function () {
       var id = $(this).data('id');
       var name = $(this).data('name');
       var email = $(this).data('email');
       $("#name").val( name );
       $("#email").val( email );
       $("#editUserform").attr('action', '/datacenter/cleaning-teams/'+ id );
   });
</script>

Answer 2

你可以做这样的事情

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#editUser" date-id="{{ $user->id }}" date-name="{{ $user->name }}" date-email="{{ $user->email }}">Add New Team</button>

$("#editUser").on('show.bs.modal', function () {
   // load your form with ajax request here
   $('#modelBody').load('http://localhost:8000/category/create');
   return false;
});

Answer 3

尝试在刀片模板中使用bootstrap模式

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>


<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Form Header</h4>
      </div>
<form method="post>"
      <div class="modal-body">
      <form method="post">
       {{csrf_field()}}
        <div>
            <input type="text" name="name"/>
        </div>

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

  </div>
</div>

请参阅此链接https://www.w3schools.com/bootstrap/bootstrap_modal.asp

希望这有帮助:)

如何从modal（Laravel）中的url加载页面

3 个答案: