Ajax.Request apparently not evaluating JS code

Question

Hi, I am creating a report, both the interface for the report parameters and the report itself is created by the exact same php file.

This are the first lines of the part of the file called when the report is being created:

<script type="text/javascript">alert("bla");</script>

Whenever I use this code to pull the report

new Ajax.Updater('reportarea','reportengines/<?=$configdata['filename']?>',
                    {
                         method: 'post',
                         parameters: {
                             action: 'executereport',
                             rep_projects: $('rep_projects').value,
                             rep_daterange: $('rep_daterange').value,
                             rep_daterangefws: $('rep_daterangefws').value,
                             rep_daterangemos: $('rep_daterangemos').value,
                             start_date: startdate,
                             end_date: enddate
                        }
                    }
                )

everything works perfectly and all of my JS code is evaluated so as soon as the page opens, the alert comes up with "bla", but, if I use this:

    new Ajax.Request( 'reportengines/<?=$configdata['filename']?>',
                    {
                         method: 'post',
                         parameters: {
                             action: 'executereport',
                             rep_projects: $('rep_projects').value,
                             rep_daterange: $('rep_daterange').value,
                             rep_daterangefws: $('rep_daterangefws').value,
                             rep_daterangemos: $('rep_daterangemos').value,
                             start_date: startdate,
                             end_date: enddate
                        },
                        onSuccess: function(transport ) {
                            $('reportarea').innerHTML = transport.responseText;
                            Effect.BlindUp('reportoptions', { duration: 1.0 });
                            Effect.BlindDown('reportarea', { duration: 1.0 });
                        }
                    }
                )

not even the slightest amount of JS activity is shown. I might be using the Ajax.Request in a wrong fashion but I can't understand which one...

Is anybody familiarized with this?

Answer 1

According to Prototype documentation

"If an ajax request follows the Same Origin Policy and it's response has a JavaScript-related content-type, the content of the responseText property will automatically be passed to eval"

In this case you have two options.

Set Content-Type on the other side to one of the following:

• application/ecmascript
• application/javascript
• application/x-ecmascript
• application/x-javascript
• text/ecmascript
• text/javascript
• text/x-ecmascript
• text/x-javascript

or, Force JS evaluation:

    new Ajax.Request( 'reportengines/<?=$configdata['filename']?>', {
        method: 'post',
        evalJS: 'force',
        parameters: {
            action: 'executereport',
            rep_projects: $('rep_projects').value,
            rep_daterange: $('rep_daterange').value,
            rep_daterangefws: $('rep_daterangefws').value,
            rep_daterangemos: $('rep_daterangemos').value,
            start_date: startdate,
            end_date: enddate
        },
        onSuccess: function(transport ) {
            $('reportarea').innerHTML = transport.responseText;
            Effect.BlindUp('reportoptions', { duration: 1.0 });
        }
    });

Notice: Additional option was added evalJS: 'force'