By clm23 on

Hi,
it looks like this is a recurring topic
http://drupal.org/node/126240
but I can't find any answers!

What's the easiest way to include javascript in a block ?

Thanks,
C

Comments

clm23’s picture

clm23 commented

PS,

I'm trying to get google's conversion tracking enabled on our site,
and google keeps saying " couldn't find code or the code wasn't pasted
properly.

When I view the enabled pages source, the javascript does show up.

so a)
Now do I know that the javascript is really working ?
( I guess I could use JS to write some text to the page)
and

b)
There is also some javascript from the googleanalytics module.
Could that be interfering with the conversion tracking -
What's the debugging procedure for even determining what's the problem ?

Thanks,

Jeff Burnz’s picture

Jeff Burnz commented

could be your input filter, when you view source does each line of JavaScipt end in a <br /> tag?

If so you need to use an input filter that doesn't include the Line break converter.

www.sitespring.eu

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
clm23’s picture

clm23 commented

The original google code, was clean of
tags
but the "final" page source has some
tags
I'm using "full html" as the (lack of) input filter (excerpt below),
so by "input filter" do you mean something other than the
"partial html", "php", "full html" input format option that drupal provides?

<div class="block block-block" id="block-block-9">
<h2 class="title"><span>co_valid</span></h2>
<div class="content"><p><!-- Google Code for checkout Conversion Page --></p>
<script language="JavaScript" type="text/javascript">
<!--
var google_conversion_id = 1007995871;
var google_conversion_language = "en_US";
var google_conversion_format = "1";
var google_conversion_color = "666666";
var google_conversion_label = "35ggqpOyPRCxyNj-Aw";
//-->
</script><br />
<script language="JavaScript" src="http://www.googleadservices.com/pagead/conversion.js">
</script><p><noscript><br />
<img height=1 width=1 border=0 src="http://www.googleadservices.com/pagead/conversion/1007995871/?label=35ggCJOyPRCxyNj-Aw&amp;script=0"><br />
</noscript></p>
</div>
</div>

Thanks much!

Jeff Burnz’s picture

Jeff Burnz commented

Those additional paragraph and line break tags are being added by the line break converter input filter.

To turn that off for full html go to:

Administer > Site configuration > Input formats (admin/settings/filters)

Click configure on the Full HTML input format, scroll down and un-check 'Line break converter' from the filters list.

Another way is to add a new Input Format - click the 'Add input format' tab, give it a name e.g. 'Scripts', select the roles that can use it (I suggest restricting this to an admin type role only), and click save - dont check any of the filters.

Go back and edit your block and select the new 'Scripts' input format and badda bing badda boom, it will be working.

Just remember there is no input filtering on that Input Format at all, so you do not want anyone but yourself or a trusted admin using it - btw if you do not select a role, only user1 can access that format...

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
clm23’s picture

clm23 commented

worked great.

Thanks!

ah0’s picture

ah0 commented

thank you so much for this, I was going crazy not being able to figure out how to get js to work in nodes.
it worked,
Whats the best way to mix up, PHP, Javascript and HTML all in a node

any help much appreciated,

jesseliberty’s picture

jesseliberty commented

using Drupal 5.7

www.fenariogallery.com/artists

Here is the imageswap code I am attempting to integrate into a block:

<script language="JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var
i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} }

function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; }

function MM_findObj(n, d) { //v4.0 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for
(i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && document.getElementById) x=document.getElementById(n); return x; }

function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //-->

</script>

And then using css calls to ac tivate the swap:

<a href="LINK" onMouseOut="changeImages('spacer','DEFAULT_IMAGE');MM_swapImgRestore();return true" onMouseOver="changeImages('spacer','SWAP_IMAGE');MM_swapImage('spacer','','SWAP_IMAGE',1);return true">
Artist</a><br>

The code breaks and so the swap obviously doesn't work.
The page spits out a bit of broken JS

Screenshots:
http://i27.photobucket.com/albums/c181/playonpro/Picture1.png
http://i27.photobucket.com/albums/c181/playonpro/Picture2-1.png

Any advice on making this JS code work in a Drupal block?
is the code incompatible with druapl?
do I need to shlep it into an external .js file?

----~---~---^---~---~----
JesseLiberty
www.loftkilla.com
www.fenariogallery.com