Sencha Touch 2 : JQuery script tag

Question

I have an app that loads articles in html format. For some articles, I have an image gallery with a slider in JQuery.

I added JQuery and the slider JS files to the app and they are loaded, but the slider still doesn't work.

HTML received from REST services :

<div id="gallery">
    <div class="royalSlider">
        <img src="xxx">
        <img src="xxx">
        <img src="xxx">
        <img src="xxx">
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#gallery .royalSlider').royalSlider({
            autoScaleSlider: true,
            imageScaleMode: 'fill',
            ...,
        });
    });
</script>

<div id="content">
    <span id="header>This is the title</span>
    <p>This is the content</p>
</div>

The HTML is simply added in the HTML config field of a panel.

Any idea how to make this slider work with ST2 ?

Answer 1

I resolved my issue by creating the following function after having loaded and added the HTML content to the panel:

executeJSScript: function(panel) {

    var scripts = panel.renderElement.dom.getElementsByTagName("script"); 

    for(var i=0; i < scripts.length; i++) {  
       eval(scripts[i].text); 
    }
}

It gets all tags in the dom of the panel and than execute (eval function) each script.

Not very elegant indeed, but it works... Hope it could help someone and if you have a better solution, please share it!