Javascript function not defined for Bootstrap Modal

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.

Give some other name to the variable. Both variable and function name are same. Hence the issue — Sandeep Nayak
– Sandeep Nayak, Commented Jan 10, 2017 at 9:29

Suchit kumar · Accepted Answer · 2017-01-10 15:57:27Z

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>

edited Jan 10, 2017 at 15:57

answered Jan 10, 2017 at 9:31

Suchit kumar

11.9k3 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rayan Suryadikara Over a year ago

thank you, it works, but not when i uncomment of modal to link it in a url. It shows that edit is not the function...

Suchit kumar Over a year ago

@RayanSuryadikara your commnted part in code is wrong. I have updated it check.

Collectives™ on Stack Overflow

Javascript function not defined for Bootstrap Modal

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related