0

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");

        });

})); 
  • You should clarify what do you mean by "the JQuery for the page doesn't work." Is the jQuery object not available? Is your jQuery functions not executing? – Shawn Conn Apr 6 '15 at 18:26
  • Edited, added clarification about JQuery – Kay Angevare Apr 6 '15 at 18:27
  • You could try changing the weight of the module due to which the jquery code is getting affected. – Gaurav Rajdeo Jun 13 '17 at 9:42
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");
  • Cleaned up the code, and I've added the contents of the maps_API.php to my question. – Kay Angevare Apr 6 '15 at 18:40
  • The hide-show.js is part of my theme and isn't in the .module directory, it is called from within my page.tpl.php file. Or doesn't that matter? – Kay Angevare Apr 6 '15 at 18:49
  • Edited my answer - the problem is with how and what you include. – m1n0 Apr 6 '15 at 18:51
  • Wow, not sure how, but it worked anyway, haha! Thanks for the patience and efford :) – Kay Angevare Apr 6 '15 at 18:52
  • Glad it works now - I updated my answer with a bit more explanation. – m1n0 Apr 6 '15 at 18:58
1

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?

  • As I stated in my initial post: Console shows no errors. Furthermore, I'm experiencing problems all over the site. – Kay Angevare Apr 6 '15 at 18:41
1

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.