How to call a function in Jquery from DOM using an external script file

Question

I have this modal from my blade file

                    <div id="addBtn" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h5 class="modal-title" id="myModalLabel">Add a medicine</h5>
                                </div>
                                <div class="modal-body">
                                    <form>
                                     <div class="form-group">
                                        <label class="control-label mb-10">Generic Name</label>
                                        <select class="form-control" name="medicine_id">
                                            @foreach($items as $item)
                                            <option value="{{$item->id}}" >{{$item->generic_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label mb-10">Dosage Volume</label>
                                        <input type="text" name="dosage_name" class="form-control" placeholder="Example: 20mg">
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label mb-10">Form</label>
                                        <input type="text" name="form" class="form-control" placeholder="Bottle, Tablet">
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label mb-10">Price Per piece</label>
                                        <input type="text" name="price"  class="form-control" placeholder="Price">
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label mb-10">Insert a photo</label>
                                        <div class="panel-wrapper collapse in">
                                            <div class="panel-body">
                                               <div class="mt-20">
                                                <input type="file" name="photo" id="input-file-now" class="dropify" >
                                            </div>  
                                        </div>
                                    </div>
                                </div>

                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success waves-effect" data-dismiss="modal" id="save-dosage">Save</button>
                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
                        </div>

                    </div>
                    <!-- /.modal-content -->
                </div>
            </div>

and once the id of save-dosage button is clicked

this should be called

function addDosage(url){

    $('#save-dosage').click(function(e){
        console.log(e);

    });


}

Now the thing here is that I want to call the function of addDosage that is in an external file called crud.js

I'm using laravel by the way so this is my end script codes

<script>
    var token = '{{ Session::token() }}';
    var url = '{{ route('storeDosage') }}';
</script>
<script type="text/javascript" src="{{ URL::to('assets/scripts/crud.js') }}"></script>
@endsection

There's nothing stopping you from doing that, if addDosage is global. — T.J. Crowder
– T.J. Crowder, Commented Feb 17, 2017 at 11:25
What prevents you from doing this? Is there something that's actually not working? — David
– David, Commented Feb 17, 2017 at 11:26
This is my script files: <script type="text/javascript" src="{{ URL::to('assets/dashboard/dist/js/init.js') }}"></script> <script> var token = '{{ Session::token() }}'; var url = '{{ route('storeDosage') }}'; </script> <script type="text/javascript" src="{{ URL::to('assets/scripts/crud.js') }}"></script> — TheBAST
– TheBAST, Commented Feb 17, 2017 at 11:30

Sagar Arora · Accepted Answer · 2017-02-17 11:36:14Z

1

If your crud.js file is properly included. Then No need to call it in the DOM file because click is event that will not fires on the DOM ready as if you call it in the DOM file.

So Write in your crud.js like below

 $('#save-dosage').click(function(e){

     var url = "" ;  
     addDosage(url)

  });

  function addDosage(url){

      console.log("Here");

   }

answered Feb 17, 2017 at 11:36

Sagar Arora

1,7831 gold badge11 silver badges20 bronze badges

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

Comments

Sagar V · Accepted Answer · 2017-02-17 11:26:50Z

0

You can call it. When you add the scripts to your HTML page using <script> tag, they become a part of the page dynamically(became global). So you can call and it will execute.

answered Feb 17, 2017 at 11:26

Sagar V

12.5k8 gold badges46 silver badges71 bronze badges

Comments

AlexZam · Accepted Answer · 2017-02-17 12:09:25Z

0

If the problem is in access to other file, the easy way is to include it like this: <script src="crud.js"></script>.

Then in crud.js add listener like this:

$(function(){
  $('#save-dosage').click(function(e){
      console.log(e);
  });
});

edited Feb 17, 2017 at 12:09

answered Feb 17, 2017 at 11:27

AlexZam

1,1968 silver badges19 bronze badges

6 Comments

TheBAST Over a year ago

AlexZam Over a year ago

Oh, I see now. Try this instead: $(function{$('#save-dosage').click(function(e){ console.log(e); });}); It means "when jQuery is loaded add onClick listener to #save-dosage."

TheBAST Over a year ago

Ok, give me something a bit

TheBAST Over a year ago

It says unexptected token

TheBAST Over a year ago

Kindly improve your answers

|

Collectives™ on Stack Overflow

How to call a function in Jquery from DOM using an external script file

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related