jQuery Conflict, dropdown functionality of the sidebar doesn't work

Question

EDIT: I have succesfully fixed it, I just put my other code inside my first inline code, instead of having 2 separate codes so that it's fewer and less use of jQuery.noConflict(); function.

OLD:

<!-- 1st script -->
<script>
  jQuery.noConflict();
  jQuery(document).ready(function() {
        jQuery('#myTable').DataTable( {
            dom: 'Bfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5',
                {
                  extend: 'print',
                  exportOptions: {
                    columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
                  }
                }
            ]
        } );
    } );
</script>

<!-- ANOTHER script -->
<script type="text/javascript">
  jQuery.noConflict();
  /*global $, SyntaxHighlighter*/

  var oTable;


  jQuery(document).ready(function () {
    'use strict';

    var datepickerDefaults = {
      showTodayButton: true,
      showClear: true
    };

    jQuery('#myTable').dataTable().yadcf([
      {column_number: 7, filter_type: "range_date", datepicker_type: 'bootstrap-datetimepicker', date_format: 'MM/DD/YYYY', filter_plugin_options: datepickerDefaults}
    ]);

    SyntaxHighlighter.all();
  });
</script>

NEW:

<script>
  jQuery.noConflict();
  jQuery(document).ready(function() {
        jQuery('#myTable').DataTable( {
            dom: 'Bfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5',
                {
                  extend: 'print',
                  exportOptions: {
                    columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
                  }
                }
            ]
        } );

        // just put it inside, rather than having separate
        var datepickerDefaults = {
          showTodayButton: true,
          showClear: true
        };

        jQuery('#myTable').dataTable().yadcf([
          {column_number: 7, filter_type: "range_date", datepicker_type: 'bootstrap-datetimepicker', date_format: 'MM/DD/YYYY', filter_plugin_options: datepickerDefaults}
        ]);

    } );
</script>

Thank you so much for the people who have tried to help!! =)

I have a problem regarding the dropdown of the sidebar of my page doesn't work. I'm pretty sure it's a jQuery conflict of the given template that I used.

I used datatables from datatables.net, used a lot of jQuery libraries, also a plug-in called yadcf (Yet Another DataTables Column Filter)

I used the noConflict functionality of jQuery, for a first-timer I got it working, but now since I called in the yadcf plug-in, the dropdown doesn't work again. I'm really confused as I can't tell now where my error is. I want all to work harmoniously.

I would also like feedback of my code since I know I have beginner errors, like I called too many libraries, and what should I do to avoid having these kinds of errors again. =) Thank you in advance!

Here is a screenshot of my page: (hid unnecessary data for privacy)

Here is the code:

Start of code (top code), with the jQuery code and noConflict code, where myTable is the name of my table, I didn't include it as it's working fine.

<!DOCTYPE html>
<html lang="en">
  <head>
      <!-- Bootstrap (CUSTOM) CSS -->    
      <link href="css/bootstrap.min2.css" rel="stylesheet">

      <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->

      <!-- JQuery Datatables CSS -->
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">

      <!-- JQuery Datatables Buttons CSS -->
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">

      <!-- Bootstrap Datetime Picker (from yadcf) CSS  -->
      <link href="css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css"/>

      <!-- Datatables YADCF CSS -->
      <link href="css/jquery.dataTables.yadcf.css" rel="stylesheet" type="text/css" />

      <!-- What JQuery is this?  -->
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

      <!-- Moment JS (from yadcf)  -->
      <script src="js/moment.min.js"></script>


      <!-- Bootstrap.min JS -->
      <script src="js/bootstrap.min.js"></script>

      <!-- Bootstrap Datetime Picker JS (from yadcf) -->
      <script src="js/bootstrap-datetimepicker.js"></script>

      <!-- JQuery Datatables.min JS -->
      <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

      <!-- JQuery Datatables YADCF .js -->
      <script src="js/jquery.dataTables.yadcf.js"></script>

      <!-- JQuery Datatables Buttons .js -->
      <script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>

      <!-- JSZip JS (?)  -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>

      <!-- JQuery Datatables Buttons Additional .js -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
      <script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
      <script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>

    <script>
      jQuery.noConflict();
      jQuery(document).ready(function() {
            jQuery('#myTable').DataTable( {
                dom: 'Bfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5',
                    {
                      extend: 'print',
                      exportOptions: {
                        columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
                      }
                    }
                ],
                "columnDefs": [
                    {
                        "targets": [ 12 ],
                        "visible": false
                    },
                    {
                        "targets": [ 13 ],
                        "searchable": false
                    }
                ]
            } );
        } );
    </script>

    <script type="text/javascript">
      jQuery.noConflict();
      /*global $, SyntaxHighlighter*/

      var oTable;


      jQuery(document).ready(function () {
        'use strict';

        var datepickerDefaults = {
          showTodayButton: true,
          showClear: true
        };

        jQuery('#myTable').dataTable().yadcf([
          {column_number: 7, filter_type: "range_date", datepicker_type: 'bootstrap-datetimepicker', date_format: 'MM/DD/YYYY', filter_plugin_options: datepickerDefaults}
        ]);

        SyntaxHighlighter.all();
      });
    </script>

End Code (at the bottom of the .html file), notice how I commented out the jquery.js file. It's the js file of the template I downloaded.

If I comment it, my datatables work fine, but dropdowns doesn't. If I don't comment it, it's vice versa.

<!-- container section end -->
    <!-- javascripts -->
    <!-- <script src="js/jquery.js"></script> -->
    <script src="js/bootstrap.min.js"></script>
    <!-- nice scroll -->
    <script src="js/jquery.scrollTo.min.js"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>

    <!-- jquery ui -->
    <script src="js/jquery-ui-1.9.2.custom.min.js"></script>

    <!--custom checkbox & radio-->
    <script type="text/javascript" src="js/ga.js"></script>
    <!--custom switch-->
    <script src="js/bootstrap-switch.js"></script>
    <!--custom tagsinput-->
    <script src="js/jquery.tagsinput.js"></script>

    <!-- colorpicker -->

    <!-- bootstrap-wysiwyg -->
    <script src="js/jquery.hotkeys.js"></script>
    <script src="js/bootstrap-wysiwyg.js"></script>
    <script src="js/bootstrap-wysiwyg-custom.js"></script>
    <!-- ck editor -->
    <script type="text/javascript" src="assets/ckeditor/ckeditor.js"></script>
    <!-- custom form component script for this page-->
    <script src="js/form-component.js"></script>
    <!-- custome script for all page -->
    <script src="js/scripts.js"></script>
  </body>
</html>

Any help would be greatly appreciated. Thank you so much in advance! =)

[Here](https://imgur.com/aZ3T8XG) is the console. I really don't know how I can fix it with those errors shown. Please help! =) — Ken Flake, Sep 16 '17 at 08:57
Put your jQuery file before each of the script file. It should always be kept first and then your extra plugins. — Ashish sah, Sep 16 '17 at 09:23
@mplungjan you mean the min2.css and min.css? I think there's no conflicts in there.. except if I overlooked something.. — Ken Flake, Sep 16 '17 at 09:27
@Ashishsah what jQuery file? the one that came with the template, or one of the two CDNs that I imported? — Ken Flake, Sep 16 '17 at 09:27
Use the latest jQuery you can and drop plugins that only work with old jQuery or fix them — mplungjan, Sep 16 '17 at 09:29
@mplungjan oh, thank you for looking at that. I commented out one of them. =) — Ken Flake, Sep 16 '17 at 09:44
Can you post a [mcve]? You really must have only one jQuery at the top of the file, then the $ not found should go away. Perhaps add one plugin at a time — mplungjan, Sep 16 '17 at 09:47
if I add / remove a jquery library, the datatable works, dropdowns does not. it goes vice versa, only other one works, not all of them.. — Ken Flake, Sep 16 '17 at 10:31

jQuery Conflict, dropdown functionality of the sidebar doesn't work

0 Answers0