Home/ Questions/How to solve the ''uncaught typeerror: $(...).modal is not a function'' error?
Next
Answered
lloydbeier
  • 4
Asked: 2022-08-03T03:25:07+00:00 In:

How to solve the ”uncaught typeerror: $(…).modal is not a function” error?

  • 4

. Advertisement .

..3..

. Advertisement .

..4..

I’m attempting to dynamically inject a bootstrap 2.32 modal into the HTML of another view but I get the error ”uncaught typeerror: $(…).modal is not a function”. 

My JS has:

$.ajax({
    type : 'POST',
    url : "AjaxUpdate/get_modal",
    cache : false,
    success : function(data){
      if(data){
           $('#modal_target').html(data);

           //This shows the modal
           $('#form-content').modal();
      }
    }
});

The button of the main view is:

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

What I want to save separately as a partial view is as follows:

<div id="form-content" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
         <a class="close" data-dismiss="modal">×</a>
         <h3>Send me a message</h3>
    </div>
    <div class="modal-body">
        <form class="contact" name="contact">
             <fieldset>

               <!-- Form Name -->

       <legend>modalForm</legend>

       <!-- Text input-->
       <div class="control-group">
         <label class="control-label" for="user">User</label>
         <div class="controls">
           <input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
           <p class="help-block">help</p>
         </div>
       </div>

       <!-- Text input-->
       <div class="control-group">
         <label class="control-label" for="old">Old password</label>
         <div class="controls">
            <input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
            <p class="help-block">help</p>
         </div>
       </div>

       <!-- Text input-->
       <div class="control-group">
         <label class="control-label" for="new">New password</label>
         <div class="controls">
           <input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
           <p class="help-block">help</p>
         </div>
       </div>

       <!-- Text input-->
       <div class="control-group">
         <label class="control-label" for="repeat">Repeat new password</label>
         <div class="controls">
           <input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
           <p class="help-block">help</p>
         </div>
       </div>

           </fieldset>
   </form>
</div>


<div class="modal-footer">
    <input class="btn btn-success" type="submit" value="Send!" id="submit">
    <a href="#" class="btn" data-dismiss="modal">Nah.</a>
</div>
</div>

The modal is appropriately inserted when I click the button, however I receive the following error:

TypeError: $(...).modal is not a function

Can someone help me?

Share

1 Answer

  1. Best Answer
    Expert

    The cause: The reason for this problem is that you called the modal function before including the bootstrap javascript. Not jQuery, but bootstrap.js defines the modal. Additionally, it’s crucial to remember that jQuery is required by bootstrap in order to define the modal function, therefore you must include jQuery before bootstrap’s javascript.

    Solution: Just make sure to include jQuery and bootstrap’s javascript before calling the modal function to avoid the error.

    E.g: You can use the following:

    <header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/path/to/bootstrap/js/bootstrap.min.js"></script>
</header>
    • 3

Leave an answer

You must login to add an answer.

Need An Account,