0

I am adding some extra html to some input attributes in the category edit area by creating a new attribute input renderer type in my modules mysql install script:

$installer->addAttribute(
    'catalog_category',
    'mymodule_category_popularity',
    array(
        'label' => 'My Label',
        'group' => 'My Group',   
        'type'  => 'int',
        'class' => 'validate-number',
        'required' => false,
        'default' => 50,
        'input_renderer' => 'mymodule/adminhtml_catalog_category_widget_slider',
    )
);

And the renderer:

class Mynamespace_Mymodule_Block_Adminhtml_Catalog_Category_Widget_Slider extends Varien_Data_Form_Element_Text
{
    public function getAfterElementHtml()
    {

        $html = parent::getAfterElementHtml();
        return $html."  <div id=\"slider\"></div>";
    }
}

And the javascript:

var $j = jQuery.noConflict();

$j(document).ready(function(){  

     $j( "#slider" ).slider();

});  

This works fine, the plugins get loaded correctly and so does jQeuery (as I have loaded it using my layout xml for the module). I see a slider. However, after the page has completely finished (the Magento ajax has re-loaded the category edit tabs) my slider dissapears. This, I assume, is because the javascript code is not getting ran again.

I have tried adding my javascript to the core edit.phtml (as there is other Magento JS there) however I just get an error: $j('#slider).slider() is not a function. This is because the content is getting loaded via ajax.

So, how do I make sure that I can use $j('#slider).slider() in the category edit area? Confusing I know.

0

I accomplished this by creating a javascript function:

function loadedInput() {
    $('#slider').slider();
}

And calling that function in the attribute renderer:

class Mynamespace_Mymodule_Block_Adminhtml_Catalog_Category_Widget_Slider extends Varien_Data_Form_Element_Text
{
    public function getAfterElementHtml()
    {

        $html = parent::getAfterElementHtml();
        return $html."  <div id=\"slider\"></div><script>loadedInput();</script>";
    }
}

All is well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.