0

I want to put some js on my article. Original code form http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_p

is:

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

My article is at: http://xuzo.com/testing/node/44

Here is what I have done

  1. put this code in content item source code:

    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p>Click me</p>
    
  2. Put this in JS Injector box:

    $(document).ready(function(){
    $("button").click(function(){
    $("p").hide();
    });
    });
    

and this for URL:

node/44
  1. put this in my /public_html/testing/sites/all/themes/xuzo/template.php file:

    drupal_add_js('https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', 'external');
    
  2. Flushed all cache

  3. Not working!!! ;)

Additionally...for this line of code to load JS files locally:

drupal_add_js('misc/collapse.js');

Where to put the JS file? I take it misc can be any folder name? But where to put the files in relation to root? Sites/all ?

3 Answers 3

1

1)Create a scripts named folder sites/all/themes/script

2)Create a file in script folder your-theme-name.js

3)Paste this scripts[] = scripts/your-theme-name.js in .info file of your theme

4)Put this code in content item source code:

<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>Click me</p>

4)In your-theme-name.js put this code

Try to give some unique classes to paragraph elements like:

If (jQuery("body").hasClass("some-unique-class-in-bodytag-of-your-page"))
{
jQuery("body").find("p").addClass("abc");
}

5)Again In your-theme-name.js put this code

   jQuery(document).ready(function() {
jQuery("button").click(function() {
   jQuery("p").hasClass("abc").hide();
   });
   });
1

1. Like Shrish mention your code needs to be like this

(function($) {
    // your code here
    $(document).ready(function() {
        $("button").click(function() {
            $("p").hide();
        });
    });

})(jQuery);

2. your code says $("button").click(function() { but in your html there is no button:

<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>Click me</p>

So change this to:

<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>

3. Checkmark inline js in JS Injector

enter image description here

4
  • This is working now, CKEDITOR was stripping <button> changing it to <P> tag...another issue. However, it works without drupal_add_js, why is that? If you use JS injector you don't need to use drupal_add_js ? Jan 6, 2016 at 8:44
  • JS Injector is an alternative to drupal_add_js. JS Injector is more for programming noobs. If I had the choice, I rather use drupal_add_js as you can add it as a .js file and not as <script>....</script> which JS Injector does. The <script>....</script> is not SEO friendly.
    – No Sssweat
    Jan 6, 2016 at 8:51
  • Thank you No Ssssweat, I have a lot to learn....if I put all that code in a file, and link to it using add_js, how can I control it to go only on page node/44 ? Jan 6, 2016 at 9:13
  • @BrunoVincent see Add javascript to a specific node
    – No Sssweat
    Jan 6, 2016 at 9:22
0

The problem is in your jquery code:

This is the error on your site: (Check browser console for this)

TypeError: $(...).once is not a function

This is how you should be adding jquery code

(function($) {
    // your code here
    $(document).ready(function() {
        $("button").click(function() {
            $("p").hide();
        });
    });

})(jQuery);

OR, change your code to,

jQuery(document).ready(function() {
    jQuery("button").click(function() {
        jQuery("p").hide();
    });
});
8
  • I pasted the code you gave me (second option) still not working, I don't know how to do option 1...;) Jan 6, 2016 at 4:09
  • I have made the changes check now.
    – shrish
    Jan 6, 2016 at 4:12
  • Thank you, I have pasted the edited code from 1st option,but still not working...what should i put into "// your code here" ? Jan 6, 2016 at 4:18
  • I see that you have added jquery library twice on your site, remove one you have hardcoded using drupal_add_js function. the other is coming from jquery_update module. check it's configuration here http://xuzo.com/testing/admin/config/development/jquery_update
    – shrish
    Jan 6, 2016 at 4:23
  • I have removed the drupal_add_js form template.php , checked the configuration of jquery, looks ok, not working...jQuery compression level Production (minified), Default jQuery Version 1.10, jQuery and jQuery UI CDN, jquery Jan 6, 2016 at 4:28

Your Answer

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

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