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 ?

Improve this question

3 Answers 3

Reset to default
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();
   });
   });
Improve this answer
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

Improve this answer
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 ? Commented 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. Commented 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 ? Commented Jan 6, 2016 at 9:13
  • @BrunoVincent see Add javascript to a specific node Commented 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();
    });
});
Improve this answer
8
  • I pasted the code you gave me (second option) still not working, I don't know how to do option 1...;) Commented Jan 6, 2016 at 4:09
  • I have made the changes check now. Commented 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" ? Commented 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 Commented 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 Commented 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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.