Why doesn't javascript execute in .php file loaded with Ext.Ajax.Request?

Question

I want to load .php files via ajax which execute ExtJS script as they load, which in turn modifies the existing ExtJS objects already present in the DOM.

However, I can't even get Javascript to execute from a page that is being loaded via Ext.Ajax.request. And no errors are showing up in the Firebug Net panel. The PHP code gets executed, but not the Javascript. When I call the page being loaded by itself in the browser, it executes the Javascript fine.

How can I get Javascript to execute in pages loaded with Ext.Ajax.request?

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) {

               regionContent.update(objServerResponse.responseText);
           }
       });
    });
});

the file that is being loaded via Ajax:

<script type="text/javascript">
    window.onload=function() {
        alert('from application view'); //is not executed
    }

    //Ext.onReady(function(){
    //    alert('from application view extjs'); //is not executed
    //}
</script>
<?php
echo 'this is the application view at ' . date('Y-m-d h:i:s');
?>

mck89 · Accepted Answer · 2010-12-02 09:42:41Z

2

When you get the ajax response the onload event on the window has been already fired so the function won't be executed because the onload event won't be fired again. Try only with the alert:

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

UPDATE

Browsers don't execute injected scripts in that way so you can try with something like:

var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
while(scripts=scriptsFinder.exec(responseText))
{
   eval(scripts[1]);
}

edited Dec 2, 2010 at 9:42

answered Dec 2, 2010 at 9:18

mck89

19.3k17 gold badges93 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Edward Tanguay Over a year ago

that's how I originally had it but it doesn't execute either, no errors in Firebug Net panel, it is as if javascript is just ignored, do I need to be using something other than responseText perhaps? but responseBody even makes the generated content from PHP not appear

mck89 Over a year ago

Try to log the responseText in firebug with console.log and check if the script tag is present, because some libraries just remove script tags for security reasons

Edward Tanguay Over a year ago

yes it shows the full script tag, I see it also in the net panel for the view_application.php ajax call in the response header, the full <script...>...</script> is there

Edward Tanguay Over a year ago

same result in multiple browsers, javascript turned on of course, even if I type sldkfjsdfkjs in the javascript block there is no error, as if the whole block is just being ignored, yet I see it in the ajax response

Brian Moeskau · Accepted Answer · 2010-12-02 15:54:54Z

2

Have you tried passing true for the second param to Panel.load (which happens to be the loadScripts option)?

regionContent.update(objServerResponse.responseText, true);

answered Dec 2, 2010 at 15:54

Brian Moeskau

20.5k8 gold badges73 silver badges75 bronze badges

Comments

RiverC · Accepted Answer · 2010-12-08 17:36:22Z

0

Normally, when you call update with ext you just do update(string,true) and it will execute scripts contained within the string. However, ext core seems to lack this functionality, but there is no documentation for the update method (I had to search the actual code to confirm this.)

If you are using some regular EXT (like ext-all) you can simply add

regionContent.update(objServerResponse.responseText,true);

like this and it should eval the scripts. No dice for me, though - ext-all is too slow but I need eval functionality. I may have to hack EXT.

answered Dec 8, 2010 at 17:36

RiverC

1

Collectives™ on Stack Overflow

Why doesn't javascript execute in .php file loaded with Ext.Ajax.Request?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related