Module conflicting with jQuery

Question

I've set up a simple hide-show.js file for my website and I'm working on a module as well. Problem is, if my module is active, the jQuery for the page doesn't work, is there something I need to do to 'close' my module after writing or anything?

Edit: My console does not show any errors. And with jQuery I mean the functions on the page (i.e. clicking on a hide-show button does nothing).

<?php function maps_markers_init() {

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
}  else {
        $latitudes = db_query('SELECT field_latitude_value FROM {field_data_field_latitude}')->fetchCol();
        $longitudes = db_query('SELECT field_longitude_value FROM {field_data_field_longitude}')->fetchCol();

        json_encode($latitudes);
        json_encode($longitudes);

        require(drupal_get_path('module', 'maps_markers') . '/maps_API.php'); 
    };};?>

maps_API.php contents:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[api key]"></script>

Also, hide-show.js contents:

$ = jQuery.noConflict();

($(function(){
        $(".collapse_btn_down").click(function(){
            $(".mid_div").fadeToggle( "800" );
            $('.buurtkiezer').toggleClass('buurtkiezer_solo');
            $('.content_wrap').toggleClass('content_wrap_solo');
            $(this).toggleClass('collapse_btn_up');
            $(".legenda").css("margin-right","20px");
            $(".legenda").css("margin-top","-80px");

        });

})); 

Answer 1

First of all, you need to clean up your code, this could be simply a syntax error:

1. There should be no semicolon after else block
2. There should be no semicolon after function block
3. Do not use PHP closing tag in Drupal module files, it can cause weird errors like this one

If this does not help, we need to see what is in the maps_API.php file.

EDIT: You cannot load javascript file into PHP, when you use require() it has to be PHP code, otherwise you get syntax errors. In your case, you are including HTML <script> tag, which means nothing in PHP. Use drupal_add_js to include your JS file - documentation on that function here - this is a Drupal function that saves all scripts to be included, and then when the HTML response is being created it builds the <script> tags for you.

The easiest option how you can do it is to include it inline, like this:

drupal_add_js("https://maps.googleapis.com/maps/api/js?key=[api key]", "external");

Answer 2

Is the issue just with the hide-show js script or is it with jquery in general? In other words, are you experiencing jquery issues all over the site after you enable the module or is it just on the page where your hide show js needs to be activated?

Overall, your question is a little vague. Just include more details and we can give you a better answer.

Lastly have you looked at the developer tools in whatever browser you are in to make sure there are no errors?

Answer 3

The best way to avoid conflict would be using JS injector module. After installing the module, go to Admin -> config -> Development -> JS injector and add you jquery/javascript.

In the JS code section, you can add your jquery. Don't forget the format should be like as follows:

(function ($) {
Drupal.behaviors.YOURTHEMENAME = {
attach: function(context, settings) {

====JavaScript/jQuery goes here====
}
};
})(jQuery);