Why doesn't my <script> tag work from php file? (jQuery involved here too)

Question

Here is what I am trying to accomplish. I have a form that uses jQuery to make an AJAX call to a PHP file. The PHP file interacts with a database, and then creates the page content to return as the AJAX response; i.e. this page content is written to a new window in the success function for the $.ajax call. As part of the page content returned by the PHP file, I have a straightforward HTML script tag that has a JavaScript file. Specifically:

<script type="text/javascript" src="pageControl.js"></script>

This is not echoed in the php (although I have tried that), it is just html. The pageControl.js is in the same directory as my php file that generates the content.

No matter what I try, I can't seem to get the pageControl.js file included or working in the resulting new window created in response to success in the AJAX call. I end up with errors like "Object expected" or variable not defined, leading me to believe the file is not getting included. If I copy the JavaScript directly into the PHPfile, rather than using the script tag with src, I can get it working.

Is there something I am missing here about scope resolution between calling file, php, and the jQuery AJAX? I am going to want to include javascript files this way in the future and would like to understand what I am doing wrong.

---

Hello again:

I have worked away at this issue, and still no luck. I am going to try and clarify what I am doing, and maybe that will bring something to mind. I am including some code as requested to help clarify things a bit.

Here is the sequence:

1. User selects some options, and clicks submit button on form.

2. The form button click is handled by jQuery code that looks like this:

   $(document).ready(function() {
     $("#runReport").click(function() {
   
       var report = $("#report").val();
       var program = $("#program").val();
       var session = $("#session").val();
       var students = $("#students").val();
   
       var dataString = 'report=' +report+ 
                        '&program=' +program+
                        '&session=' +session+
                        '&students=' +students;
   
       $.ajax({
           type: "POST",
           url: "process_report_request.php",
           cache: false,
           data: dataString,
           success: function(pageContent) {
               if (pageContent) {
                   $("#result_msg").addClass("successMsg")
                       .text("Report created.");
   
                   var windowFeatures = "width=800,menubar=yes,scrollbars=1,resizable=1,status=yes";
   
                   // open a new report window
                   var reportWindow = window.open("", "newReportWindow", windowFeatures);
   
                   // add the report data itself returned from the AJAX call
                   reportWindow.document.write(pageContent);
                   reportWindow.document.close();
               }
               else {
                   $("#result_msg").addClass("failedMsg")
                       .text("Report creation failed.");
               }
           }
       }); // end ajax call
       // return false from click function to prevent normal submit handling
       return false;
     }); // end click call    
   }); // end ready call
   

This code performs an AJAX call to a PHP file (process_report_request.php) that creates the page content for the new window. This content is taken from a database and HTML. In the PHP file I want to include another javascript file in the head with javascript used in the new window. I am trying to include it as follows

<script src="/folder1/folder2/folder3/pageControl.js" type="text/javascript"></script>

Changed path folder names to protect the innocent :)

The pageControl.js file is actually in the same folder as the jQuery code file and the php file, but I am trying the full path just to be safe. I am also able to access the js file using the URL in the browser, and I can successfully include it in a static html test page using the script src tag.

After the javascript file is included in the php file, I have a call to one of its functions as follows (echo from php):

 echo '<script type="text/javascript" language="javascript">writePageControls();</script>';

So, once the php file sends all the page content back to the AJAX call, then the new window is opened, and the returned content is written to it by the jQuery code above.

The writePageControls line is where I get the error "Error: Object expected" when I run the page. However, since the JavaScript works fine in both the static HTML page and when included "inline" in the PHP file, it is leading me to think this is a path issue of some kind.

Again, no matter what I try, my calls to the functions in the pageControls.js file do not work. If I put the contents of the pageControl.js file in the php file between script tags and change nothing else, it works as expected.

Based on what some of you have already said, I am wondering if the path resolution to the newly opened window is not correct. But I don't understand why because I am using the full path. Also to confuse matters even more, my linked stylesheet works just fine from the PHP file.

Apologies for how long this is, but if anyone has the time to look at this further, I would greatly appreciate it. I am stumped. I am a novice when it comes to a lot of this, so if there is just a better way to do this and avoid this problem, I am all ears (or eyes I suppose...)

Answer 1

I have also had problems with a similar issue to this, and this was a real headache. The following approach may not be elegant, but it worked for me.

1. Make sure that your php file, just outputs what you want in your body
2. Add jquery to the window head dynamically
3. Add any external script files to the window head dynamically
4. use jQuery html on the window's document to call html() with your loaded content on the body, so that scripts are evaluated.

For example, in your ajax success:

success: function(pageContent) {
        var windowFeatures = "width=800,menubar=yes,scrollbars=1,resizable=1,status=yes";
        var reportWindow = window.open("", "newReportWindow", windowFeatures);

        // boilerplate
        var boilerplate = "<html><head></head><body></body></html>";

        reportWindow.document.write(boilerplate);

        var head = reportWindow.document.getElementsByTagName("head")[0];

        var jquery = reportWindow.document.createElement("script");
        jquery.type = "text/javascript";
        jquery.src = "http://code.jquery.com/jquery-1.7.min.js";
        head.appendChild(jquery);

        var js = reportWindow.document.createElement("script");
        js.type = "text/javascript";
        js.src = "/folder1/folder2/folder3/pageControl.js";
        js.onload= function() {
            reportWindow.$("body").html(pageContent);
        };
        head.appendChild(js);


        reportWindow.document.close();

    }

Good luck!

Answer 2

It probably isn't looking where you think it is looking to grab your javascript file.

Try a server-relative format like this:

<script src="/some/path/to/pageControl.js"></script>

If that still isn't working, verify that you can type the url to your script file into your browser and get it to download.

Answer 3

Make sure that you have that within either <head> or <body> of the HTML page. Also, I'd double check the path to the .js file. You could do that by pasting "pageControl.js" at the root of your web address.