Develop Reference

Insert javascript in head from template with magento extension

I am trying to insert some js code in all/some pages of my website through my extension.
I need a dynamic version (hosted in a .phtml file) of this (the script part):
<default>
<reference name="head">
<block type="core/text" name="simple_example_javascript_block">
<action method="setText">
<text><![CDATA[
<script type="text/javascript">
alert("foo");
</script>
//]]></text>
</action>
</block>
</reference>
</default>
I cannot find any working code on SO or on Google...
Thank you

This should work for you with use of CDATA
<reference name="head">
<block type="core/text" name="your.block.name">
<action method="setText">
<text><![CDATA[<script type="text/javascript">alert('hello');</script>]]></text>
</action>
</block>
</reference>
Edited : To insert JS code to some pages via your extension, all you need to do is from your extension layout file, by referencing pages you can add js file like below
<cms_index_index> <!--/ To add js only in homepage similarly for other pages take their layout handle -->
<reference name="head">
<!--/ to add from root ie. js/yourmodulename/script.js -->
<action method="addJs"><script>yourmodulename/script.js</script></action>
<!--/ to add from skin activated theme / base ie. skin/frontend/base/default/js/yourmodulename/script.js -->
<action method="addItem"><type>skin_js</type><name>js/yourmodulename/script.js</name></action>
</reference>
</cms_index_index>

I finally used :
<checkout_onepage_success translate="label">
<label>One Page Checkout Success</label>
<reference name="checkout.success.js">
<block type="page/html_footer" name="luckycycle_js" as="luckycycle_js" template="Luckycycle/js.phtml" output="toHtml" />
</reference>
</checkout_onepage_success>
And Luckycycle/js.phtml is dynamic and generated by php.

IIS outboud rule to match the non-existance of substring in file name

I have the following IIS configuration which forces PDFs to be downloaded as files in the browser instead of opening in the browser window.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<outboundRules>
<rule name="Force Download for PDFs" preCondition="FileIsPDF">
<match serverVariable="RESPONSE_Content-Disposition" pattern=".*" />
<conditions>
<add input="{REQUEST_FILENAME}" pattern="(.*)\\([^/]+)\.pdf$" />
</conditions>
<action type="Rewrite" value="attachment; filename={C:2}.pdf" />
</rule>
<preConditions>
<preCondition name="FileIsPDF">
<add input="{REQUEST_FILENAME}" pattern="\.pdf$" />
</preCondition>
</preConditions>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>
However I need it to not apply if the file name is xxx_print.pdf, in other words I want the above rule to match all .pdf files except those that have _print at the end of the file name.
How is this possible? Needs to work for IIS7 and above.
Note you may be able to answer this without an understanding of IIS if you know how to use javascript's regular expression to match a string without a particular substring.

Turned out I just had to add another condition to the rule with the negate="true" attribute:
<add input="{REQUEST_FILENAME}" pattern="(.*)\\([^/]+)_print\.pdf$" negate="true" />

Magento 1 - add inline javascript to product page via layout update xml code

Hi i want to use google analytics's AB-Testing engine. Therefore i have to add a javascript-snippet to single product pages.
My intend was to add it in the description or short-description. It is working, but it is insufficient, because the script makes a redirect, which means the page loads half and then is redirected.
Google says i should add the script in the head-tag. Is it possible to insert the script as "custom layout update" here:
i could imagine something like
<default translate="label" module="page">
<label>All Pages</label>
<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>alert('hello')</script></action>
</block>
</block>
</default>

It's cleaner to load the javascript from file. You do not necessarily need all that blocks but can do it like:
<default translate="label" module="page">
<reference name="head">
<action method="addJs"><script>path/to/script.js</script></action>
</reference>
</default>
Path is relative path from js folder in magento root.
To add javascript to xml directly (which I do not recommend) you can use CDATA, like:
<reference name="head">
<block type="core/text" name="your.block.name">
<action method="setText">
<text><![CDATA[<script type="text/javascript">alert('hello');</script>]]></text>
</action>
</block>
</reference>

my solution was to extend the head block:
<?php
class Company_Modulename_Block_Html_Head extends Mage_Page_Block_Html_Head {
public function addInlineJs($name)
{
$this->addItem('inlinejs', $name);
return $this;
}
public function getCssJsHtml()
{
$html = parent::getCssJsHtml();
foreach ($this->_data['items'] as $item) {
if($item['type']=='inlinejs') {
$html .= sprintf('<script type="text/javascript">%s</script>' . "\n", $item['name']);
}
}
return $html;
}
}
now i can use it like that
<reference name="head">
<action method="addInlineJs"><script>alert('cool');</script></action>
</reference>

Jquery conflicting with prototype magento - How can i separate?

I can't seem to be able to separate jQuery from Prototype with my Magento website.
I've got it working on JsFiddle using changed tags etc but when i add it to my magento site, i keep getting uncaught syntax errors.
Page is at http://www.asg.co.uk/gadgetclinic/how-it-works
Code i'm working with is:
<script type="text/javascript">
// First hide them all
$j("#how-it-works .step").hide();
function fades($j.step) {
$j div.fadeIn(300, function () {
if (!$j div.is('last-child')) {
fades($div.next());
}
else{
fades($j("#how-it-works .step:first-child"));
}
});
}
fades($("#how-it-works .step:first-child"));
</script>
HTML Code is:
<div id="how-it-works">
<img src="{{skin url="images/how-it-works.png"}}" alt="How It Works" />
<div class="step"><h3>Get your box</h3><p>We'll send a suitably sized, pre-paid postage box for your device.</p></div>
<div class="step"><h3>Post your device</h3><p>Safely pack your device in your postage box and return it to us.</p></div>
<div class="step"><h3>Repair in process</h3><p>We will update you if need be whilst your device is repaired.</p></div>
<div class="step"><h3>Get your device</h3><p>Your device will be returned using the service you selected.</p></div>
</div>
Can anyone help me systematically help put all the required $ tags into $j or whatever is needed to separate jQuery from Prototype?

Open your jquery.x.x.x.js file and add this to the very bottom of it: jQuery.noConflict();
Then for your custom jQuery code, use the following:
jQuery(function($){
// Use jQuery with $(...)
$('#mySelector').hide();
/* your jquery code....*/
});
That is how I implement jQuery with Magento. I prefer to use the $ for the jQuery instance as it's clean and familiar. The above code wrapper allows you to do this.

Usually
jQuery no conflict is used
Edit
So the best way for you is to use noconflict +
(function ($j) {
... // your code here
}(jQuery));
Edit2 3 examples how to use it
1
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
// you can keep using $j
$j( "div" ).hide();
});
2
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
// You can use the locally-scoped $ in here as an alias to jQuery.
// or change $ above to $j
$( "div" ).hide();
});
3
jQuery.noConflict();
(function( $ ) {
// Your jQuery code here, using the $
// or just chane $ to $j if you want
})( jQuery );

I managed to get it working using the following:
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
// You can use the locally-scoped $ in here as an alias to jQuery.
// or change $ above to $j
$( "#how-it-works .step" ).hide();
$('.step').each(function( index ) {
$(this).delay( index * 700 ).fadeIn();
});
});
A combination of several posts on here. Seems to be really simple and lightweight. Thanks for everyone's help!

Okay I have found a way to make prototype, jQuery and bootstrap work without interfering with each other and without using jQuery.noConflict(). My layout setup (page.xml) was following(stripped for easier read):
<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>
<action method="addJs"><script>scriptaculous/effects.js</script></action>
<action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action method="addJs"><script>scriptaculous/controls.js</script></action>
<action method="addJs"><script>scriptaculous/slider.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
<action method="addJs"><script>varien/form.js</script></action>
<action method="addJs"><script>varien/menu.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>
<action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
<action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
<action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
<action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
<block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
<action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
</block>
I was getting errors like following:
TypeError: element.attachEvent is not a function
element.attachEvent("on" + actualEventName, responder);
TypeError: element.dispatchEvent is not a function
element.dispatchEvent(event);
I did not want to change $ everywhere. So, I made three javascript files as follows:
proto_to_temp.js having following code:
var $tempPrototypeDollar = $;
after_jquery.js having following code:
$ = jQuery;
after_all.js having following code:
$ = $tempPrototypeDollar;
As you can probably guess already, the first script assigns current $ variable (owned by prototype) to a temporary variable called $tempPrototypeDollar. Second script simply assigns jQuery to $. Third script assigns the content of $tempPrototypeDollar back to $.
I included these three scripts in the following order:
<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>
<action method="addJs"><script>scriptaculous/effects.js</script></action>
<action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action method="addJs"><script>scriptaculous/controls.js</script></action>
<action method="addJs"><script>scriptaculous/slider.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
<action method="addJs"><script>varien/form.js</script></action>
<action method="addJs"><script>varien/menu.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>
<action method="addJs"><script>buzzthemes/buzz-intro/conflict/proto_to_temp.js</script></action><!-- First Script goes just before jQuery include-->
<action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
<action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_jquery.js</script></action><!-- Second Script goes just after jQuery include-->
<action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
<action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
<action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
<block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
<action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
<action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_all.js</script></action><!-- Third Script goes after all related code has been included -->
</block>
This solved all the problems for me and now jquery, bootstrap and prototype, all seem to work fine.

IIS url rewrite - css and js incorrectly being rewritten

Having an issue with my urlrewrites - anytime I point to a page that is to be rewritten it fails to display because it is also applying the rule to the css & js files that are referenced within my webpage.
To try and remedy this I put in a fully qualified path to the css and js - this renders fine on any page where the rewrite isnt applied yet when i try to access a rewritten page the browser hangs.
Has anyone encountered something similar and if so have you a solution? Appreciate any help. Tried looking on the site at similar issues but none have helped so far.
<rewrite>
<outboundRules>
<rule name="OutboundRewriteUserFriendlyURL1" preCondition="ResponseIsHtml1" stopProcessing="true">
<match filterByTags="A, Form, Img" pattern="^(.*/)myapplicationname/Index\.html\?team=([^=&]+)$" />
<action type="Rewrite" value="{R:1}team/{R:2}/" />
</rule>
<preConditions>
<preCondition name="ResponseIsHtml1">
<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
</preCondition>
</preConditions>
</outboundRules>
<rules>
<rule name="RedirectUserFriendlyURL1" stopProcessing="true">
<match url="^myapplicationname/Index\.html$" />
<conditions>
<add input="{REQUEST_METHOD}" pattern="^POST$" negate="true" />
<add input="{QUERY_STRING}" pattern="^([^=&]+)=([^=&]+)$" />
</conditions>
<action type="Redirect" url="{C:1}/{C:2}" appendQueryString="false" />
</rule>
<rule name="RewriteUserFriendlyURL1" stopProcessing="true">
<match url="^([^/]+)/([^/]+)/?$" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="Index.html?{R:1}={R:2}" appendQueryString="false" />
</rule>
</rules>
</rewrite>
within my webpage:
<script src="/myapplicationname/Scripts/jquery-1.4.1.js" type="text/javascript"> </script>
<link href="/myapplicationname/Styles/MainStyle.css" rel="stylesheet" type="text/css" />
it is applying the rewrite to these and trying to find /myapplicationname/Team/Styles/MainStyle.css and similar with the JS file.

Try to find out which rule is causing the problem by removing them one by one. Now add a condition to that rule:
<rule name="Some rule">
...
<conditions logicalGrouping="MatchAny">
<add input="{URL}" pattern="^.*\.(ashx|axd|css|gif|png|jpg|jpeg|js|flv|f4v)$" negate="true" />
</conditions>
</rule>
This will avoid running the rule on files ending with .js, .css, etc.