Issue adding javascript to magento admin page

Question

On the Magento admin new product page

/app/design/adminhtml/default/default/template/catalog/product/edit.phtml

I've tried to add the following code

<!-- Start Edits -->
<script src="jquery-2.1.1.js"></script>
<script type="text/javascript" >
//<![CDATA[
alert("This code is running!");
        $(window).load(function(){

function calculate() 
{
    var values = [
        $("#cost").val(), 
        $("#shipping_paid").val(), 
        $("#tax_paid").val()
    ];

    var percent_value = $("#our_markup").val();

    var sub_total = eval( values.join('+') );
    var total = eval("sub_total+(sub_total * percent_value)");
    $("#price").val(total);
}

$(document).on('input', 'input', calculate);
$(document).on('change', 'select,input', calculate);

});
    //]]>
</script>
<!-- End Edits -->

Which will tally up the 3 text fields with id = "cost", "shipping_paid", "tax_paid", and put them in the text field id = "price". But for some reason it does not seem to want to perform correctly.

I have tried it in a stand alone file and all functionality works correctly.

Any help is appreciated!

Community · Accepted Answer · 2017-05-23 12:37:16Z

5

Take a look at How to load a js file on magento admin dashboard

Then create a local.xml for admin and add

<layout>
  <adminhtml_catalog_product_edit>
    <reference name="head">
            <action method="addJs"><script>path/to/jquery.js</script></action>
            <action method="addJs"><script>path/custom/script.js</script></action>         
        </reference>
  </adminhtml_catalog_product_edit>
</layout>

Also because magento default js library is prototype you can not using $ for jQuery see How to add jQuery in Magento

In your custom_script.js chage

...
$(document).on('input', 'input', calculate);
$(document).on('change', 'select,input', calculate);
...

to

...
$j( document ).ready(function() {
  $j(document).on('input', 'input', calculate());
  $j(document).on('change', 'select,input', calculate());
});
...

edited May 23, 2017 at 12:37

CommunityBot

1

answered Oct 30, 2014 at 18:37

MagePal Extensions

14k2 gold badges34 silver badges52 bronze badges

That fixed it! It was wrapping in $j( document ).ready(function() { that did the trick. Thank you very much! I had been banging my head against the wall!

new2programming
– new2programming

2014-10-31 13:57:52 +00:00
Commented Oct 31, 2014 at 13:57

Add a comment |

Rob · Accepted Answer · 2014-10-30 18:35:26Z

0

Try wrapping your custom function with the jQuery function $(document).ready() instead of using $(window).load(). The native $(window).load() isn't reliable for ensuring that the proper DOM elements are in place before your script runs.

More information about $(document).ready() is available here: http://learn.jquery.com/using-jquery-core/document-ready/

answered Oct 30, 2014 at 18:35

Rob

763 bronze badges

Add a comment |

raduparvan · Accepted Answer · 2014-10-30 18:38:42Z

0

Where you include your jquery library, try giving the full path in the src attribute, like this:

<script src="http://www.your-domain.com/skin/path/to/js/jquery-2.1.1.js"></script>

Then, when you load the page, look in the source for this script tag and click it, to check if it shows the jquery file...

then you should use:

$j = jQuery.noConflict();

and use $j instead of just $, because $ is used by prototype in magento.

so you will have something like:

<!-- Start Edits -->
<script src="http://www.your-domain.com/skin/path/to/js/jquery-2.1.1.js"></script>
<script type="text/javascript" >
//<![CDATA[
alert("This code is running!");
    $j = jQuery.noConflict();
        $j(window).load(function(){

function calculate() 
{
    var values = [
        $j("#cost").val(), 
        $j("#shipping_paid").val(), 
        $j("#tax_paid").val()
    ];

    var percent_value = $j("#our_markup").val();

    var sub_total = eval( values.join('+') );
    var total = eval("sub_total+(sub_total * percent_value)");
    $j("#price").val(total);
}

$j(document).on('input', 'input', calculate);
$j(document).on('change', 'select,input', calculate);

});
    //]]>
</script>
<!-- End Edits -->

answered Oct 30, 2014 at 18:38

raduparvan

1094 bronze badges

Thanks for the suggestions, I made all those changes but to no avail. The alert still runs but NONE of the text-fields are affected. I can't understand where the disconnect is if the file opens up the jquery and the alert runs.

new2programming
– new2programming

2014-10-30 20:41:33 +00:00
Commented Oct 30, 2014 at 20:41
right click in Chrome, choose inspect element, choose the tab console, and see what error is reported there, that should put you on the right track..

raduparvan
– raduparvan

2014-10-31 07:22:00 +00:00
Commented Oct 31, 2014 at 7:22
yeah, that's the bizarre part. not a single issue, just the usual "Failed to load resource: net::ERR_CACHE_MISS"

new2programming
– new2programming

2014-10-31 12:04:30 +00:00
Commented Oct 31, 2014 at 12:04
i tested the script i wrote in admin page of magento and it works. You just need to check and see if #cost, #shipping_paid and #tax_paid have values in them. If they have, then when i input something in #our_markup field, the #price field changes. Try and use console.log($j("#cost")); inside you calculate function. Do that for all variables, and see if it logs something..

raduparvan
– raduparvan

2014-10-31 12:25:27 +00:00
Commented Oct 31, 2014 at 12:25
Thanks for the help! It turns out it was the $j( document ).ready(function() { that the other user suggested that did that trick.

new2programming
– new2programming

2014-10-31 15:13:16 +00:00
Commented Oct 31, 2014 at 15:13

Add a comment |

Stack Exchange Network

Issue adding javascript to magento admin page

3 Answers 3

Your Answer

Linked

Hot Network Questions

Issue adding javascript to magento admin page

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions