Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.

Have an account? Sign In

Have an account? Sign In Now

Sign In

Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.

Sign Up Here

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

You must login to ask question.(5)

Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

ITtutoria

ITtutoria Logo ITtutoria Logo

ITtutoria Navigation

  • Python
  • Java
  • Reactjs
  • JavaScript
  • R
  • PySpark
  • MYSQL
  • Pandas
  • QA
  • C++
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • Python
  • Science
  • Java
  • JavaScript
  • Reactjs
  • Nodejs
  • Tools
  • QA
Home/ Questions/How to solve the ''uncaught typeerror: $(...).modal is not a function'' error?
Next
Answered
lloydbeier
  • 4
lloydbeier
Asked: August 3, 20222022-08-03T03:25:07+00:00 2022-08-03T03:25:07+00:00In: Error

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?

  • 1 1 Answer
  • 37 Views
  • 0 Followers
  • 0
Answer
Share
  • Facebook
  • Report

1 Answer

  • Voted
  • Oldest
  • Recent
  • Random
  1. Best Answer
    hdtutoria Expert
    2022-08-03T03:32:00+00:00Added an answer on August 3, 2022 at 3:32 am

    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
    • Reply
    • Share
      Share
      • Share on Facebook
      • Share on Twitter
      • Share on LinkedIn
      • Share on WhatsApp
      • Report

Leave an answer
Cancel reply

You must login to add an answer.

Forgot Password?

Need An Account, Sign Up Here

Sidebar

Ask A Question
  • How to Split String by space in C++
  • How To Convert A Pandas DataFrame Column To A List
  • How to Replace Multiple Characters in A String in Python?
  • How To Remove Special Characters From String Python

Explore

  • Home
  • Tutorial

Footer

ITtutoria

ITtutoria

This website is user friendly and will facilitate transferring knowledge. It would be useful for a self-initiated learning process.

@ ITTutoria Co Ltd.

Tutorial

  • Home
  • Python
  • Science
  • Java
  • JavaScript
  • Reactjs
  • Nodejs
  • Tools
  • QA

Legal Stuff

  • About Us
  • Terms of Use
  • Privacy Policy
  • Contact Us

DMCA.com Protection Status

Help

  • Knowledge Base
  • Support

Follow

© 2022 Ittutoria. All Rights Reserved.

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.