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.