Develop Reference

Custom Cordova plugin iOS index.js dosent recognise my .js file

I have written a custom Cordova plugin that brings have as a dependency "Media" plugin.
When i run "cordova plugin add "myPlugin"" the plugin is installed to the sample project however when in my index.js i try to init my plugin it does not recognise it and if i try to create "Media" object it does.
Here is my plugin .xml file :
<?xml version="1.0" encoding="utf-8"?>
<plugin xmlns="http://www.phonegap.com/ns/plugins/1.0"
id="cordova-plugin-MyPlugin"
version="1.0.0">
<name> MyPlugin </name>
<description>Cordova MyPlugin Plugin</description>
<author> MyPlugin </author>
<license>MIT</license>
<keywords> MyPlugin </keywords>
<dependency id="org.apache.cordova.media"/>
<js-module src="www/MyPlugin.js" name="MyPlugin">
<clobbers target="window.plugins.MyPlugin" />
</js-module>
<platform name="ios">
<config-file target="config.xml" parent="/*">
<feature name="MyPlugin">
<param name="ios-package" value="CDVMyPlugin" />
</feature>
</config-file>
<!-- Sources -->
<header-file src="src/ios/CDVMyPlugin.h"/>
<source-file src="src/ios/CDVMyPlugin.m"/>
<!-- iOS Frameworks -->
<framework src="libz.dylib" />
</platform>
</plugin>
Thanks for the help.

The problem apparently was in my "MyPlugin.js" file at the bottom of the file the line :
module.exports = MyPlugin;
Needs to be added then in the Index.js file (or the file of your choosing) add the following :
//Get a reference to the custom .JS file.
myCustomPlugin = cordova.require("cordova-plugin-MyPlugin.MyPlugin");
myPluginInstance = new myCustomPlugin(someParams,onSuccess,onError,null);
Now you can access the methods of your .JS file.
Credit to https://stackexchange.com/users/366553/marat-strelets for helping with the solution.

Magento: jQuery in custom file does not work

So I am trying to add some simple jQuery to a magento-theme.
I have put my jQuery in an external file, which lies in the "js" (skin/frontend/default/myTheme/js) folder of the theme.
Here is the link to my site: http://shop.veivecouture.com/
I am including it in the page.xml file with the following method:
<action method="addItem"><type>skin_js</type><name>js/functions.js</name></action>
I have also tried:
<action method="addJs"><script>../skin/frontend/default/trego/js/functions.js</script></action>
I put them both in the "Head" block like this:
<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>
<block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
<action method="addItem"><type>skin_js</type><name>js/functions.js</name></action> <!-- my line -->
<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
<action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
<action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
<action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
<action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
<action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>
</block>
I can get to both files via "view source", so the linking seems to be right, however no jQuery takes effect.
What am I doing wrong?
This is the javascript in the functions.js file:
$('.block-content').hide(); //edit by Carl Papworth
$('.block-title').click(function(e){
e.preventDefault();
$('.block-content').show();
$('.close-block').click(function(e){
e.preventDefault();
$('.block-content').hide();
});
});

Put the file into magento js folder and try
<action method="addJs"><script>js/your_custom_folder/functions.js</script></action>

Try to add jQuery.noConflict(); at the very bottom of your js file.

Add this to your head part:
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/specification.js');?>" media="screen"></script>

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.

Magento add Js to the footer

I am trying to load js file in the footer of my magento. I am using this code but it give me back an error. Any help? Thanks a lot!
code used in local.xml:
<layout>
<default>
<reference name="footer">
<action method="addJs"><script>js/file.js</script></action>
</reference>
</default>
</layout>

Find page.xml of your theme and find the following
<block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">
And insert the following code after that
<block type="page/html_head" name="jsfooter" as="jsfooter" template="page/html/jsfooter.phtml">
<action method="addJs"><script>your_script.js</script></action>
</block>
Create the template file in app/design/frontend/[package]/[theme]/template/page/html/jsfooter.phtml and put the following:
<?php echo $this->getCssJsHtml() ?>
In your page template files “1column.phtml”, “2columns-left.phtml”, “2columns-right.phtml”, “3columns.phtml” and etc. you will need to output this block before tag:
<?php echo $this->getChildHtml('jsfooter') ?>

For Magento v1.6+ (need to test in older versions);
1 - create an template file in page/html/footer/extras.phtml with this content:
<?php echo $this->getCssJsHtml() ?>
2 - Add this html node to your layout xml:
<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
<action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>
3 - That is it!

Referencing my answer here: How to add Javascript files in body part (not header) through layout xml files in magento
Your best bet is to make a .phtml file with your js links and add it to your footer using this format:
<layout>
<default>
<reference name="footer">
<block type="core/template" name="unique_name_here" template="path/to/js.phtml" />
</reference>
</default>
</layout>
For references like this, the footer will automatically load all child html blocks. Parent .phtml template files may need a getChildHtml call in them to be shown, like so:
<?php echo $this->getChildHtml('unique_name_here'); ?>
That should do it.

You can add new block in page.xml
<block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">
<block type="page/html_head" name="footerjscss" as="footerjscss" after="-" template="page/html/footerjscss.phtml"/>
</block>
then add JS & CSS files in any layout.xml
<reference name="footerjscss">
<action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
<action method="addItem"><type>skin_css</type><name>css/madisonisland.css</name><params/><if/></action>
</reference>
Create .phtml file in page/html/footerjscss.phtml and add following
<?php echo $this->getCssJsHtml() ?>
Now call block in page template “3columns.phtml” and etc. you will need to output this block before tag:
<?php echo $this->getChildHtml('before_body_end') ?>
Refer code here: http://blog.rahuldadhich.com/magento-load-css-js-footer/