Jump to content

Php Include(): Javascript Does Not Work

tinfanide

By tinfanide
in PHP

Recommended Posts

tinfanide Member

tinfanide

Posted
Posted

ajaxTab.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>function ajaxTab(str){if (window.XMLHttpRequest) {  xmlhttp = new XMLHttpRequest();  } else {   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   }xmlhttp.onreadystatechange = function(){if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  document.getElementById("div").innerHTML = xmlhttp.responseText;   }  }xmlhttp.open("GET","ajaxTab.php?tab="+str,false);xmlhttp.send();}</script><style>.div {float: left;padding-right: 10px;}</style></head><body><div class="div" onclick="ajaxTab(1)">Tab 1</div><div class="div" onclick="ajaxTab(2)">Tab 2</div><div class="div" onclick="ajaxTab(3)">Tab 3</div><br /><hr /><div id="div"></div></body></html>

ajaxTab.php

 <?phpHeader("content-type: application/x-javascript"); $tab = $_GET['tab']; switch($tab){case 1:  include "index.html";  break;case 2:  echo "This is Tab 2";  break;case 3:  echo "This is Tab 3";  break;default:  echo "AJAX Tab";} ?>

index.html

<html><head><link rel="stylesheet" type="text/css" href="index.css" /><script type="text/javascript" src="parseXML.js"></script><script type="text/javascript" src="latest_activities-slideshow.js"></script><script> parseXML("GET","latest_activities-slideshow.xml",false);window.onload = function(){setSlideShowProperty();autoImage();};</script></head><body><div id="slideshowContainer">Our Latest English Learning Activities   <!--  Javascript Slideshow shows up here -->        </div> <.body></html>

Why can't the js slideshow be shown?

Link to comment
Share on other sites
Krewe Member

Krewe

Posted
Posted

The problem I see is that your include is not used as a function, change it from:

include "index.html";

to 

include("index.html");

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted

Well, I think include "" or include ("") is the same.I've just noticed on the console that only the JS external script is not loaded.It seems that the problem lies in the php file.

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted

I change the index.html page: 

<html><head><script>alert("JS is used");</script></head><body></body></html>

Even the alert function is not called.

Link to comment
Share on other sites
birbal Devoted Member

birbal

Posted
Posted

include is lactualy anguage construct so it dont need parantheses same as echo. you have to specify the type attribute in script tag.eg.

<script type='text/javascript'>

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted 
<?phpecho "<script>";echo "alert('javascript is used.')";echo "</script>";echo "JS";print("<script type='text/javascript'>alert('This is JS.')</script>");?>

I use AJAX to load a php file as above (php.php)and only the echo function is called.When I don't go to the page thru AJAX (i.e. just going to the page php.php), the alert function pops out.So I guess it is the problem with thexmlhttp.responseText

Link to comment
Share on other sites
Don E Invested Member

Don E

Posted
Posted

For reason I don't think it works because you're going to try include a whole page into a div container that's in a document. However, you can try and return the page to a iframe and it should work. The only thing is you'll see the borders. I tried adding the seamless="seamless" attritbute to the iframe, so that it should look like it is part of the containing document but it doesn't apply for some reason. Maybe it's not fully integrated yet since its new to HTML 5. Anyway, here's what I got and you can check it out, test it yourself and see what you think: ajaxTab.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">function ajaxTab(str){if (window.XMLHttpRequest) {  xmlhttp = new XMLHttpRequest();  } else {   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   }xmlhttp.onreadystatechange = function(){if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  if(xmlhttp.responseText == "index.html")  {document.getElementById("div").style.display = "none";document.getElementById("iframe").style.display="block";document.getElementById("iframe").src = xmlhttp.responseText;    }   else   {  document.getElementById("iframe").style.display="none";  document.getElementById("div").style.display = "block";  document.getElementById("div").innerHTML = xmlhttp.responseText; }       }  }xmlhttp.open("GET","ajaxTab.php?tab="+str,false);xmlhttp.send();}</script><style>.div {float: left;padding-right: 10px;}#div{display: none;}#iframe{display: none;}</style></head><body><div class="div" onclick="ajaxTab(1)">Tab 1</div><div class="div" onclick="ajaxTab(2)">Tab 2</div><div class="div" onclick="ajaxTab(3)">Tab 3</div><br /><hr /><iframe id="iframe" seamless="seamless"></iframe><div id="div"></div></body></html>

ajaxTab.php

<?php//header("content-type: application/x-javascript"); $tab = $_GET['tab']; switch($tab){case 1:  echo "index.html";  break;case 2:  echo "This is Tab 2";  break;case 3:  echo "This is Tab 3";  break;default:  echo "AJAX Tab";}?>

Edit: Instead of seamless above, you can do: frameborder="0" index.html

<!doctype html><html><head><script type="text/javascript">function sayhello(){alert("JS is used");}</script></head><body><h1 onclick="sayhello();">hello</h1><!--click h1 to see popup--></body></html>

Perhaps someone else has a solution to what you asking but that's what I was able to come up with.

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

You shouldn't have an entire HTML document there, just the content you need. You're putting an <html>, <head> and <body> element inside the box. You should validate the HTML of the included file, anyways.

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted
For reason I don't think it works because you're going to try include a whole page into a div container that's in a document. However, you can try and return the page to a iframe and it should work. The only thing is you'll see the borders. I tried adding the seamless="seamless" attritbute to the iframe, so that it should look like it is part of the containing document but it doesn't apply for some reason. Maybe it's not fully integrated yet since its new to HTML 5. Anyway, here's what I got and you can check it out, test it yourself and see what you think: ajaxTab.html
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">function ajaxTab(str){if (window.XMLHttpRequest) {  xmlhttp = new XMLHttpRequest();  } else {   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   }xmlhttp.onreadystatechange = function(){if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  if(xmlhttp.responseText == "index.html")  {document.getElementById("div").style.display = "none";document.getElementById("iframe").style.display="block";document.getElementById("iframe").src = xmlhttp.responseText;    }   else   {  document.getElementById("iframe").style.display="none";  document.getElementById("div").style.display = "block";  document.getElementById("div").innerHTML = xmlhttp.responseText; }       }  }xmlhttp.open("GET","ajaxTab.php?tab="+str,false);xmlhttp.send();}</script><style>.div {float: left;padding-right: 10px;}#div{display: none;}#iframe{display: none;}</style></head><body><div class="div" onclick="ajaxTab(1)">Tab 1</div><div class="div" onclick="ajaxTab(2)">Tab 2</div><div class="div" onclick="ajaxTab(3)">Tab 3</div><br /><hr /><iframe id="iframe" seamless="seamless"></iframe><div id="div"></div></body></html>

ajaxTab.php

<?php//header("content-type: application/x-javascript"); $tab = $_GET['tab']; switch($tab){case 1:  echo "index.html";  break;case 2:  echo "This is Tab 2";  break;case 3:  echo "This is Tab 3";  break;default:  echo "AJAX Tab";}?>

Edit: Instead of seamless above, you can do: frameborder="0" index.html

<!doctype html><html><head><script type="text/javascript">function sayhello(){alert("JS is used");}</script></head><body><h1 onclick="sayhello();">hello</h1><!--click h1 to see popup--></body></html>

Perhaps someone else has a solution to what you asking but that's what I was able to come up with.

Yes, I preferred to use a div with PHP including a page. But it seems with JS running iframe is the only choice.I especially start liking using it when ya reminded me of using frameborder to get rid of the ugly border. It just works in the same manner.But I wonder how it is possible to load JS within a div with PHP???
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

You should place js code you wish to run, into the main document, or link to externally in the main document. Actually the javascript will not run from any include file which is included AFTER the mainpage has fully loaded.The onload won't work in the included file because it is inserted into document that has already loaded, so you have to run the function for the slideshow AFTER the include page is inserted after document.getElementById("div").innerHTML = xmlhttp.responseText; 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="index.css" /><script type="text/javascript" src="parseXML.js"></script><script type="text/javascript" src="latest_activities-slideshow.js"></script> <script>function ajaxTab(str)	{	if (window.XMLHttpRequest)		{		  xmlhttp = new XMLHttpRequest();		 }	else		{		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");		   }	  	xmlhttp.onreadystatechange = function()		{ 		if (xmlhttp.readyState == 4 && xmlhttp.status == 200)			{			  document.getElementById("div").innerHTML = xmlhttp.responseText;			if(document.getElementById("slideshowContainer"))			runthis();			   } 		  }	xmlhttp.open("GET","ajaxTab.php?tab="+str,false);	xmlhttp.send();	}  function runthis()	{	alert("run the slideshow fool!")	parseXML("GET","latest_activities-slideshow.xml",false);	setSlideShowProperty();	autoImage();	} </script><style>.div {float: left;padding-right: 10px;}</style></head><body><div class="div" onclick="ajaxTab(1)">Tab 1</div><div class="div" onclick="ajaxTab(2)">Tab 2</div><div class="div" onclick="ajaxTab(3)">Tab 3</div><br /><hr /><div id="div"></div></body></html>

<?phpHeader("content-type: application/x-javascript"); $tab = $_GET['tab']; switch($tab){case 1:  include "index.html";  break;case 2:  echo "This is Tab 2";  break;case 3:  echo "This is Tab 3";  break;default:  echo "AJAX Tab";}  ?>

<div id="slideshowContainer">Our Latest English Learning Activities  <!--  Javascript Slideshow shows up here -->    </div>

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

The browser will not automatically execute Javascript code that was returned from an ajax request. If you want to execute the code then you need to create a new script element and set the innerHTML of it to the code you want to execute, then attach the script element to the page. It's not enough to just set the innerHTML of an element to a bunch of text that happens to include Javascript code, it's not going to be executed. For that reason it's common to use JSON to return a structure that contains an HTML part that you add to the page, and a Javascript part that you use to create a new script element.

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted

Yes, I've heard people saying eval() is not a good way.But could you provide me with some hints so that I can make a start in JSON? JSON's just new to me.

Link to comment
Share on other sites
birbal Devoted Member

birbal

Posted
Posted

you may like to see thishttps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/JSONand about json herehttp://w3schools.com/json

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

you can use jquery to parse a JSON response (make and get the request/response) which would help to cover some of the known security issues with using eval.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...