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/

  • @rooby I just added it by using drupal_add_js(). But it still shows up in Firebug.. – gw0 Feb 24 '14 at 9:06
  • 1
    Please read Managing JavaScript in Drupal 7, especially Behaviors part. – Mołot Feb 24 '14 at 9:07
  • @Mołot Thank you, I read that up already ;) Added the "(function ($) { ... })(jQuery);" bit but it still won't work :/ – gw0 Feb 24 '14 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 Feb 24 '14 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 Feb 24 '14 at 9:11
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, privacy policy and cookie policy

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