Why does my <script> tag work from a php file? (jQuery is also involved here)

Question

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

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

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

No matter what I try, I can not get the pageControl.js file that is included or working in a new window that appears, created in response to success in an AJAX call. I get errors such as "Object expected" or a variable not defined, which leads to the file not being included. If I copy JavaScript directly into a PHP file, instead of using a script tag with src, I can make it work.

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

---

Hi again:

I dealt with this problem, and I still had no luck. I'm going to try to clarify what I'm doing, and maybe it will bring something to mind. I am including some code as requested to help clarify things a bit.

Here is the sequence:

• The user selects some parameters and clicks the submit button on the form.

• Clicking a form click is processed by jQuery code, which 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 makes an AJAX call to the PHP file ( process_report_request.php ), which creates the page content for a new window. This content is taken from the database and HTML. In a PHP file, I want to include another javascript file in my head using javascript, which is used in a new window. I am trying to enable it as follows

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

Changed path folder name to protect the innocent :)

The pageControl.js file is actually located in the same folder as the jQuery code file and php file, but I try to make the full path just safe. I can also access the js file using the URL in the browser, and I can successfully enable it on the html static test page using the src script 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, as soon as the php file sends the entire contents of the page back to an AJAX call, a new window will open, and the returned content will be written to it by jQuery code above.

The error “Error: object” appears in the writePageControls line when I start the page. However, since JavaScript works fine both on a static HTML page and when including "inline" in a PHP file, it makes me think that this is a problem of some way.

Again, no matter what I try, my function calls in the pageControls.js file do not work. If I put the contents of the pageControl.js file in a php file between script tags and don't change anything, it works as expected.

Based on what some of you have already said, I wonder if permission is allowed correctly for a newly opened window. But I do not understand why, because I use the full path. Also, to further confuse issues, my linked stylesheet works great with a PHP file.

Sorry how long this has been going on, but if anyone has the time to look at it further, I would really appreciate it. I'm at a dead end. I'm new when it comes to a lot of this , so if there is only the best way to do this and avoid this problem, I’m all ears (or eyes, I suppose ...)

Answer 1

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

• Make sure your php file just prints what you want in your body
• Dynamically add jquery to window chapter
• Dynamically add external external script files to a dynamic window
• use jQuery html in the window document to call html () with the loaded content on the body so that the 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 is probably not looking where you think it wants to capture your javascript file.

Try the format corresponding to the server:

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

If this still does not work, make sure that you can enter the url in your script file in your browser and download it.

Answer 3

Make sure you have this value within the <head> or <body> the HTML page. In addition, I double-check the path to the .js file. You can do this by inserting "pageControl.js" into the root of your web address.

Answer 4

What to search:

• Use the Firebug (NET) tab to check if the js file is loaded with a status of 200 . Also check the Console tab for javascript errors.
• You are using HTML5 offline . If you do this, it may be serving a cached version that does not include the <script> .
• Browse the source of the page and make sure it contains the script tag.
• Change the source attribute to an absolute path: <script src="http://www.example.com/js/pageControl.js" type="text/javascript"></script>
• Visit http://www.example.com/js/pageControl.js and make sure it displays correctly.
• Try placing <script> immediately after <head> so that it loads first.

That is all I could think of.

Answer 5

You can dynamically load the script by creating this element, and then add it to the head or another element:

 reportWindow.document.write(pageContent); var script = document.createElement('script'); script.src = 'pageControl.js'; script.type = 'text/javascript'; reportWindow.document.getElementsByTagName('head')[0].appendChild(script); reportWindow.document.close(); 

Answer 6

You tried to use jquery $("#target_div").load(...) This also does JS inside the output ...

Read this document to find out how to use it:

http://api.jquery.com/load/

Answer 7

It seems to me that you expect the unloaded script to work.

Try looking here: http://ensure.codeplex.com/SourceControl/changeset/view/9070#201379

This is a bit of javascript that ensures the script loads correctly before access is attempted. You can use this either as lazy loading (loading javascript files only as needed), or as I interpret your problem by loading a script based on the result of ajax calls.

Answer 8

What probably happens is that you echo the line through the ajax callback without inserting an element. External scripts require a second GET call to load their contents, which does not happen - only the first call has occurred. Thus, when the first call includes embedded code, the DOM does not have to make an additional GET request to retrieve the content. If the DOM does not see the script, the DOM will not execute it, which means that it is just some random tag.

There is a very quick way to find out. In Chrome (or Firefox with the Firebug plugin installed), check the console> scripts drop-down list to see all downloaded scripts. If it is not specified, it is not loaded, and the script tag that you see in the markup is otherwise inert.

Since this is probably just a string, as far as PHP is concerned, you can create it as a PHP DOM object and insert it correctly (although this can be time consuming). Instead, perhaps place it at the very end of the page, in front of the tags of the closing body. (This is the preferred position for js in any case - the dead last, after all the other elements on the page are loaded and available for the DOM.)

Hth :)