Bootstrap Modal: Undefined

Question

Im trying to add a modal to my website that appears when the Name field of a form is left empty, to notify the user.

What I have so far is:

<div id="myModal-winner" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">There is a Problem!</h4> </div> <div class="modal-body"> <p>Please Enter Name of Winner.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Ok</button> </div> </div> </div> </div>

The JS that should make the modal appear if Name is left empty:

//when user clicks on the "submit" button form.submit({point: point}, function (event) { //prevent the default form behavior (which would refresh the page) event.preventDefault(); //form validation if( !$("input[name=name]", this).val() ) { $("#myModal-winner").modal('show'); } //put all form elements in a "data" object var data = { name: $("input[name=name]", this).val(), address: $("textarea[name=address]", this).val(), about: $("textarea[name=about]", this).val(), month: $("select[name=month]",this).val(), year: $("select[name=year]",this).val(), lat: event.data.point.overlay.getPosition().lat(), lon: event.data.point.overlay.getPosition().lng() }; trace(data) //send the results to the PHP script that adds the point to the database $.post("addwinner.php", data, tidy_maps.saveStopResponse, "json");

But the console returns: Uncaught TypeError: undefined is not a function, on the line:

 $("#myModal-winner").modal('show');

This is the form, with submit button:

 <div class="winner-add"> <form class="form-horizontal winner-form" method="post" style="display: none" action="addwinner.php"> <h4>Add Winner</h4> <img src="" > <fieldset> <label for="name"> <span>Event Name :</span> <input id="name" type="text" name="name" placeholder="Enter Name of Winner" /> </label> <label for="address"> <span>Description :</span> <textarea id="address" name="address" placeholder="Address of Winner"></textarea> </label> <label for="about"> <span>Description :</span> <textarea id="about" name="about" placeholder="Details of Award"></textarea> </label> <label for="image"> <span>Upload a Photo:</span> <input type="file" id="image" name="image" /> </label> <hr> <div class="form-actions"> <input name="Save" type="submit" class="btn btn-success btn-sm" value="Save"> </div> </fieldset> </form>

Can you show more of the JS and the HTML? The more the better. Particularly, we can't see the form, the button that submits the form, the JS binding to the button or the form submit, etc. All of that would help us troubleshoot without guessing. — Benjamin Ray
– Benjamin Ray, Commented Apr 3, 2015 at 23:20
Where does 'form' come from in the JS, are you setting it to something before it shows up in the code you've pasted here? — Benjamin Ray
– Benjamin Ray, Commented Apr 3, 2015 at 23:27

dlsso · Accepted Answer · 2015-04-03 23:32:09Z

I agree with Jarod, it looks like jQuery is not being loaded. Make sure you have <script src="path_to_jquery"></script> right above the script tag for bootstrap.

Or if you don't have jQuery in your project folder you can grab it off the internet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

johnp91 · Accepted Answer · 2015-04-03 23:29:30Z

It was a jQuery issue. I had a spelling error in "MyModal-winner" here:

<script type="text/javascript"> $(document).ready(function(){ $("#myModal-winner").modal('hide'); }); </script>

Also, loading Bootstrap before jQuery caused a conflict between the 2, so now I have jQuery loaded before Bootstrap.

Yes, jQuery must always be loaded before Bootstrap. Glad you sorted it out.

Collectives™ on Stack Overflow

Bootstrap Modal: Undefined

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related