未为Bootstrap Modal定义Javascript函数

Question

I want to make a modal edit form to show up after clicking certain button in HTML. This is the 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>

With this code, the modal form shows up, but I can't do the update because there's no url involved. And so, when I add modal action (simply remove the comment tag) I got error that my edit function is not defined. For now I only write my JS code in this question beacuse I don't see other codes related, but let me know if you need an update.

Regards.

Answer 1

you can create a anonymous function to get the popup.syntax for commented part in your code is wrong i have updated it and kept it commented.Try like this:

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');
        };

SEE A DEMO BELOW:

 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>