Debug School

rakesh kumar
rakesh kumar

Posted on • Updated on

Jquery Error:Uncaught TypeError modal is not a function

yesterday when i try to open popup modal using jquery i got error because of my script is not calling correctly
Error:

Uncaught TypeError: $(...).modal is not a function
Enter fullscreen mode Exit fullscreen mode

my code is

function myButtonClick(button, event) {
                    console.log("coming here");
                    event.preventDefault();
                    var paymentId = $(button).data('id');
                    console.log(paymentId);
                    console.log(paymentId);
                    // Clear the existing content in #influencer_result
                    $('#influencer_result').html('');
                    var url = "{{ route('view-price', ['id' => ':id']) }}".replace(':id', paymentId);
                    $.ajax({
                    type: 'GET', // You can adjust the HTTP method as needed
                    url: url,// Replace with your actual route name
                    success: function(data) {
                    console.log('view-button ka data aata hain');
                    var users = data.pays;
                    console.log(users); 

                    if(users=="nodata")
                    {
                        console.log("nodata is here")
                        $('#nodata').modal('show');

                    }

}
Enter fullscreen mode Exit fullscreen mode

Image description

Solution

            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

2nd solution: set priority of java script

Ensure jQuery is loaded first:
Move the script tag for the local jQuery location js to be above the other scripts that depend on jQuery. The order should be:


<script src="{{ asset('js/location.js') }}"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ asset('assets/js/virtual-select.min.js') }}"></script>
<script src="{{ asset('assets/js/multi-select.js') }}"></script>
Enter fullscreen mode Exit fullscreen mode

Check for conflicts:
Make sure that the location.js script or other scripts you're using are not trying to load their own version of jQuery or interfering with the jQuery loaded globally.

Use one version of jQuery:
If possible, try to use only one version of jQuery to avoid conflicts. You can use the CDN version and remove the local version.

output

Image description

Another Solution

Order Priority

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
     <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ asset('assets/css/public-view.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/style-home.css') }}"> 
    <meta name="csrf-token" content="{{ csrf_token() }}">
Enter fullscreen mode Exit fullscreen mode 
<script src="{{ asset('js/location.js') }}"></script>
<script src="{{ asset('assets/js/virtual-select.min.js') }}"></script>
<script src="{{ asset('assets/js/multi-select.js') }}"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
Enter fullscreen mode Exit fullscreen mode

Top comments (0)