Question

Thanks to this answer I was able to get javascript to execute when being loaded via an ExtJS AJAX call.

However, the following code does not work the same in all browsers (on mac):

• chrome: works, alert pops up
• safari: works, alert pops up
• firefox: works, but only when Firebug is enabled, when Firebug is not enabled, the script is ignored

How can I get javascript to execute via AJAX call in Firefox without having Firebug installed?

Ext.onReady(function(){

    var menuItemStart = new Ext.Panel({
        id: 'panelStart',
        title: 'Start',
        html: 'This is the start menu item.',
        cls:'menuItem'
    });

    var menuItemApplication = new Ext.Panel({
        id: 'panelApplication',
        title: 'Application',
        html: 'this is the application page',
        cls:'menuItem'
    });

    var regionMenu = new Ext.Panel({
        region:'west',
        split:true,
        width: 210,
        layout:'accordion',
        layoutConfig:{
            animate:true
        },
        items: [ menuItemStart, menuItemApplication ]
    });

    var regionContent = new Ext.Panel({
        id: 'contentArea',
        region: 'center',
        padding:'10',
        autoScroll: true,
        html: 'this is the content'
    });

    new Ext.Viewport({
        layout: 'border',
        items: [ regionMenu, regionContent ]
    });

    menuItemStart.header.on('click', function() {
        Ext.Ajax.request({
            url: 'content/view_start.php',
            success: function(objServerResponse) {
                regionContent.update(objServerResponse.responseText);
            }
        });
    });

    menuItemApplication.header.on('click', function() {             
        Ext.Ajax.request({
            url: 'content/view_application.php',
            success: function(objServerResponse) {
                var responseText = objServerResponse.responseText;
                console.log(responseText);
                regionContent.update(responseText);
                var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
                while(scripts=scriptsFinder.exec(responseText)) {
                    eval(scripts[1]);
                }
            }
        });

    });
});

The base that is being loaded:

<script type="text/javascript">
    alert('inside application view');
</script>
<?php
echo 'this is the application view at ' . date('Y-m-d h:i:s');
?>

Answer 1

console.log is your culprit.

Whenever you’re logging in JavaScript, it’s a good idea to check if console exists before calling it’s functions:

if(window.console) console.log('whatever');

That way, it will only execute when the console is available.