XF 2.1 Unable to use jQuery in node Pages

HazedOff

Active member
Hi,

I'm trying to use some custom HTML in the form of a node page. Everything works fine except the calendar picker we are attempting to use.

This is is how I'm loading the script in at the bottom of the page:

HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0-alpha/js/bootstrap-datepicker.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.input-group.date').datepicker({
                format: "MM d, yyyy",
                orientation: "bottom auto",
                startView: 1,
                autoclose: true,
                todayHighlight: true
            });

            $('[data-toggle="tooltip"]').tooltip()
        });
    </script>

I've also tried wrapping the text/javascript inside <xf:js></xf:js> tags to no avail.

When I try to remove the googleapis jquery min (thinking maybe a conflict) I get an error on my dev console stating jQuery hasn't been defined. If I leave the googleapis jquery min intact I get the following error:



Any ideas how I can make this work?
 
Top