0

I get the following error when i try to call something related to bootstrap modals from custom javascript file: CLICK HERE FOR IMAGE

My index.php:

<?php
  require "includes/header.php";
  require "includes/navigacija.php";
?>

<div class="modal fade" tabindex="-1" role="dialog" id="dodajVraboten">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><span class="glyphicon glyphicon-plus-sign"></span> Додај вработен</h4>
            </div>
            <!-- MODAL CONTENT -->
        </div>
    </div>
</div>

<?php
  require "includes/footer.php";
?>

My footer.php where jquery is included:

        <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/fastclick.js"></script>
        <script type="text/javascript" src="js/skripti.js"></script>
        <script type="text/javascript" src="js/postavki.js"></script>
    </body>
</html>

I get the error when i run this code in postavki.js:

$(document).ready(function() {
    $('#dodajVraboten').modal('show');
});

As you can see i load first jquery then bootstrap then my custom js file (postavki.js) where i'm getting that error. Also i have read that if i'm loading jquery multiple times i can get this error, but that's not the issue because i'm loading it only in header.php

If you can't open the image here is the error:

postavki.js:18 Uncaught TypeError: $(...).modal is not a function
at HTMLDocument.<anonymous> (postavki.js:18)
at fire (datatables.js:3199)
at Object.fireWith [as resolveWith] (datatables.js:3329)
at Function.ready (datatables.js:3548)
at HTMLDocument.completed (datatables.js:3564)

Thank you in advance.

EDIT (IF header.php is making any difference):

<!DOCTYPE html>

<html lang="mk">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>asd</title>

        <link rel="icon" href="sliki/favicon.ico" type="image/x-icon"/>

        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/font-awesome.css" rel="stylesheet">
        <link href="css/normalize.css" rel="stylesheet">
        <link href="css/stil.css" rel="stylesheet" type="text/css">
    </head>

    <body>
Stefan Todorovski
  • 83
  • 2
  • 14

2 Answers2

3

This is usually caused because your scripts are loaded in the wrong order. Make sure that you don't have a script above one that it requires.

For example, bootstrap depends on jQuery so jQuery must be referenced first (as you have done).

Another thing that can happen is two references to jQuery, check none of your scripts reference jQuery themselves. If memory serves me correctly, datatables.js actually includes a reference to jQuery.

twoleggedhorse
  • 4,938
  • 4
  • 23
  • 38
  • Ok, so if i'm right i can reference js libraries only from HTML/PHP files. I have the following php files: header.php (no – Stefan Todorovski Aug 05 '17 at 22:04
  • @cale_b Yeap, the question is being asked a lot of times. I've checked all of the answers and couldn't find a solution. That's why i posted it with all the code i have because maybe it's something specific or maybe not... – Stefan Todorovski Aug 05 '17 at 22:06
  • I would comment out the php tags, place all the script tags on the page as well as your document.ready function and test that works. – twoleggedhorse Aug 05 '17 at 22:10
  • Also datatables js references jQuery if I remember correctly. Check you are not loading jQuery twice – twoleggedhorse Aug 05 '17 at 22:12
  • 1
    @twoleggedhorse Yeap you were right, datatables.js comes with jquery. i redownloaded a new package without jquery (there was an option on their download page). Now works like a charm. Thank you so much. – Stefan Todorovski Aug 05 '17 at 22:21
  • Glad I could help :) – twoleggedhorse Aug 05 '17 at 22:22
  • YES!! right. I selected datatable.js including jquery and bootstrap. That makes the troubles!! – Kabkee Feb 08 '18 at 03:27
0

I using Jquery V3.3.1 Bootstrat V4.1.0 Momment.js V2.18.0 and Fullcalendar 3.9.0 ,
EventClick works well but you have to define it in the following way

    $(document).ready(function () {
        $("#calendar").fullCalendar({
            lang: 'es',
            events: '/Citas/Eventos',
            eventColor: '#378006',

            **eventClick: function (event, element) {
                var url = '@Url.Action("Edit", "Citas")' + "/" + event.id;
                $('.modal-body').load(url, function () {
                    jQuery.noConflict();
                    $('#ModalAccion').modal('show');
                });** 
            },

            header:
            {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            buttonText: {
                today: 'Hoy',
                month: 'Mes',
                week: 'Semana',
                day: 'Dia'
            }
        });
    });
Antonio Franceskin
  • 1
  • 1