未为 Bootstrap Modal 定义 Javascript 函数

Question

我想制作一个模式编辑表单，在单击 HTML 中的某个按钮后显示。这是 JavaScript:

<script>
    var edit;

    jQuery( document ).ready(function( $ ) {
        // Edit Data (Modal and function edit data)
        edit = function edit(id, un, nl, em, nh, st) {
            //$('#myModal').attr('action', '{{ url('user/edit') }}/'+id;

            $('#footer_action_button').text("Update");
            $('#footer_action_button').addClass('yellow btn-outline');
            $('.btn').addClass('edit');
            $('.modal-title').text('Edit Pengguna');
            $('.delete').hide();
            $('.form-horizontal').show();
            $('#un').val(un);
            $('#nl').val(nl);
            $('#em').val(em);
            $('#pw').attr('placeholder', 'Isi Jika Ingin Diganti');
            $('#nh').val(nh);
            $('#st').val(st);
            $('#myModal').modal('show');
        }
    });
</script>

使用此代码，模式表单会显示，但我无法进行更新，因为不涉及 url。因此，当我添加模态操作(只需删除注释标签)时，我收到错误消息，表明我的编辑功能未定义。目前我只在这个问题中编写我的 JS 代码，因为我没有看到其他相关代码，但如果您需要更新，请告诉我。

问候。

Answer 1

您可以创建一个匿名函数来获取代码中注释部分的 popup.syntax 是错误的，我已更新它并保留其注释。尝试如下:

var edit = function(id, un, nl, em, nh, st) {
            // $('#myModal').attr('action', "{{ url('user/edit') }}/"+id);

            $('#footer_action_button').text("Update");
            $('#footer_action_button').addClass('yellow btn-outline');
            $('.btn').addClass('edit');
            $('.modal-title').text('Edit Pengguna');
            $('.delete').hide();
            $('.form-horizontal').show();
            $('#un').val(un);
            $('#nl').val(nl);
            $('#em').val(em);
            $('#pw').attr('placeholder', 'Isi Jika Ingin Diganti');
            $('#nh').val(nh);
            $('#st').val(st);
            $('#myModal').modal('show');
        };

查看下面的演示:

var edit = function(id, un, nl, em, nh, st) {
            $('#myModal').attr('action', "{{ url('user/edit') }}/"+id);

            $('#myModal').modal('show');
        };

edit('id','un','nl','em','nh','st');// this test is only for example you pass your data here

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<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">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>