Magento category edit page and ajax - magento

Question

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 jQuery (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.

Answer 1

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>";
}
}