Magento Admin – How to Add Custom AJAX JavaScript to Product Add/Edit Tabs

adminproduct

i want to add custom javascript to admin> product > add/edit >custom tabs like :price / general

what i want that there will be one drop down attribute on change of which i want to use ajax to autofill value in below textbox

for that i will be using ajax call on change of main dropdown

how can i do this.

i thought adding custom js code for that page only .

how can i do this i want magento like ajax loader when drop down change ?…

any help please could not find any proper guide or link for such case

Best Answer

Since you have already created the attribute, you can add some layout XML to inject a helper script:

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

For the product edit area only. You can place this in your related module's layout XML or else in app/design/adminhtml/default/default/layout/local.xml. So in the JS, I presume you'll be observing the change event of the target select element. On trigger, you'll make an AJAX call to ... ? I don't know that either, but if it's going to route back through Magento to get that information, you will likely need to also setup a controller.

Alternate Method

Another way to get the JS in place is to specify an "input renderer" when installing your attribute. Here's an article on how to do that: http://inchoo.net/magento/adding-magento-attribute-with-custom-input-renderer/

To summarize the article, install your attribute like so:

..
$installer->addAttribute(Mage_Catalog_Model_Product::ENTITY, 'example_field', array(
    'group'             => 'General',
    'type'              => 'text',
    'backend'           => '',
    'input_renderer'    => 'test/catalog_product_helper_form_example',
..

Notice the input_renderer field. This maps to a block which renders the form field for your attribute, like so:

class Namespace_Test_Block_Catalog_Product_Helper_Form_Example 
    extends Varien_Data_Form_Element_Text
{
    public function getAfterElementHtml()
    {
        $html = parent::getAfterElementHtml();

        return $html . "<script>//your script here</script>";
    }
...

You might not want to do this because your attribute is already installed, but I tend to prefer this method because of how tightly it couples the JS with the attribute.

Related Topic