autoLoad and external javascript

[josh803316]

If I'm attempting to autoLoad an external html file, that contains javascript, inside a tab panel, currently nothing seems to happen from a scripting perspective. I don't get any errors but no script action takes place(no graph is displayed)....I was wondering if there was some way that I needed to load external JS (non ext related) or a specific format for the html file so that the script inside the html file gets executed.

items: new Ext.TabPanel({
                            id: 'main-tab-panel',
                            activeTab:0,
                            tabPosition:'top',
                            defaults:{autoScroll:true},
                            items:[{
                                ......
                                id: 'graph_tab',
                                title: 'graph Tab',
                                height: '1000px',
                                width: '1000px',
                                autoScroll:true,
                                autoLoad: 'TimePlot.html',
                                defaults:{autoScroll:true},
                            }]
                    })

[hendricd]

Start with scripts:true in you autoLoad config.

[josh803316]

I added scripts: true to my config but don't see any change. Firebug shows the response as containing the script elements but doesn't show that any scripts were loaded. I see a brief loading indicator and then the panel is blank.

                                .............
                                autoScroll:true,
                                autoLoad: {url: 'TimePlot.html', scripts: true},
                                defaults:{autoScroll:true},

Timeplot.html

<script type="text/javascript">
                        /**
                         * Wait till dom's finished loading.
                         */
                        document.observe('dom:loaded', function(){
                                /**
                                 * Fill series d1 and d2.
                                 */
                                var d1 = [];
                                var d2 = [];
                                var d3 = [];
                            for(var i = 0; i < 15; i += 0.5){
                                d1.push([i, i + Math.sin(i+Math.PI)]);
                                        d2.push([i, i]);
                                        d3.push([i, 15-Math.cos(i)]);
                                }
                        
                                /**
                                 * This function prepend each label with 'y = '.
                                 */
                                function myLabelFunc(label){
                                        return 'y = ' + label;
                                }
                        
                                /**
                                 * Draw the graph.
                                 */
                            var f = Flotr.draw(
                                        $('container1'), [ 
                                                {data:d1, track:true, label:'x + sin(x+&pi;)'},
                                                {data:d2, track:true, label:'x'},
                                                {data:d3, track:true, label:'15 - cos(x)'},         
                                        ],{
                                                legend:{
                                                        position: 'se', // => position the legend 'south-east'.
                                                        labelFormatter: myLabelFunc, // => format the labels.
                                                        backgroundColor: '#D2E8FF' // => a light blue background color.
                                                }
                                        }
                                );
                        });
                </script>

  <div id="container1" style="width:600px;height:300px;"></div>

[hendricd]

Sorry, try it with loadScripts:true in you autoLoad config.

See Ext. Element.update method in API DOcs for help.

[josh803316]

It looks like you were right with your first guess, although I'm not seeing any script execution attempt even when I use the scripts or loadScripts parameter.

(From the API docs)
scripts : Boolean

If true any <script> tags embedded in the response text will be extracted and executed. If this option is specified, the callback will be called after the execution of the scripts.

[devnull]

There is no need for this:
document.observe('dom:loaded', function(){
the document has already been loaded and is ready, you are just adding to it. Remove that wrapper around your code since it is probably never firing, and move the code below the markup.

[josh803316]

Thanks for the help. I was able to get it working with your suggestions.

I had to set scripts: true in my autoLoad, and I had to move the markup before the script tags in my html.

[bhadra]

Thanks for the help. I was able to get it working with your suggestions.

I had to set scripts: true in my autoLoad, and I had to move the markup before the script tags in my html.

what you mean by markup ? is it div tab ?

[topgun743]

Hi,

I have problem accessing an HTML button (type=Submit) which exists in autoLoaded Page i.e it loads on a panel using autoLoad {url:myurl} config option. The Panel is being created on an ExtJS popup window that is created on click of a link.

I cannot access it from the launching code, I mean the code which creates the ExtJS window. It is null or undefined when I try to use it in my launching code. I am using Ext.get('myButtonName') to access it.

Please help me as I am stuck with it.