0

I have this code in page.tpl.php which is a link that toggles an option menu and makes the first link "I'm a link" become red:

<a href="www.google.com" class="select1">I'm a link</a>
<a href="javascript:void(0);" class="select_button1">Click me!</a>
<br/>
<select class="select2" size="5" style="display:none">        
    <option name="test" value="" class="first">Select</option>       
    <option name="test" value="" class="">Opt1</option>       
    <option name="test" value="" class="">Opt2</option> 
</select>

Then in template.php I have this code, which injects the script on every page:

function basic_preprocess_html(&$variables) {
  drupal_add_js(drupal_get_path('theme', 'basic') . '/js/script.js', array( 
    'scope' => 'footer', 
    'weight' => '15' 
  ));
}

Finally, in script.js I have this that I suspect being the culprit:

(function ($) {
$('.select_button1').click(function() {
    $('.select1').css('color', 'red');
    $('.select2').toggle();
});
}(jQuery));

What's the problem? The problem is that when I click on the "Click me!" link nothing happens..

In JsFiddle it works just fine http://jsfiddle.net/WYm4H/120/

10
  • @rooby I just added it by using drupal_add_js(). But it still shows up in Firebug..
    – user26650
    Commented Feb 24, 2014 at 9:06
  • 1
    Please read Managing JavaScript in Drupal 7, especially Behaviors part.
    – Mołot
    Commented Feb 24, 2014 at 9:07
  • @Mołot Thank you, I read that up already ;) Added the "(function ($) { ... })(jQuery);" bit but it still won't work :/
    – user26650
    Commented Feb 24, 2014 at 9:09
  • Side note: if you want to add js on every page you can do so in the info file of your theme. See drupal.org/node/171205#scripts
    – rooby
    Commented Feb 24, 2014 at 9:10
  • @dotbitcode if you really read that, why your code is not a behavior? And if you willingly ignore Drupal practices, what do you expect from us?
    – Mołot
    Commented Feb 24, 2014 at 9:11

3 Answers 3

1

You can achieve this using Drupal.behaviors. Save the following code below into a JS file and add it to your THEMENAME.info file.

(function($){

/**
* Change color of link.
*/
Drupal.behaviors.themeChangeColors = {
  attach: function(context, settings) {
    $('.select_button1').click(function() {
      $('.select1').css('color', 'red');
      $('.select2').toggle();
    });
  }
};

})(jQuery);
0

I found what was wrong..Here is how I adapted the code to Drupal.

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

      $('.select_button1').click(function() {
    $('.select1').css('color', 'red');
    $('.select2').toggle();
});

    }
  };
})(jQuery);

Made a "boilerplate" for other people who struggle with this.

(function ($) { // <--------------------------- Add
  Drupal.behaviors./* Put the name of your script/module/whatever in place of this comment (if you have no idea the name of the script file should suffice) */ =  { // <---------- this
    attach: function(context, settings) { // <- first

       //Replace this with your jQuery code (leave the rest untouched until necessary!)//


    } // <---------- Add
  }; // <----------- this
})(jQuery); // <---- last
0

Simply use jQuery instead $ For this case jQuery :contains() Selector need use not

drupal_add_js('
            $(document).ready(function(){
                $("p:contains(is)").css("background-color", "yellow");
            });
        ', array('type' => 'inline', 'scope' => 'footer', 'defer' => TRUE));

but

drupal_add_js('
            jQuery(document).ready(function(){
                jQuery("p:contains(is)").css("background-color", "yellow");
            });
        ', array('type' => 'inline', 'scope' => 'footer', 'defer' => TRUE));

And not need

<script src="https://ajax.googleapis.com

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.