loading the javascript in innerHTML

**tianshiz** · 02-10-2010, 10:01 PM

I'm using the script below to load content dynamically bia ajax. It has an accordion which once clicked loads the following code:
display_content.php:

Code:

<?php
session_start();

echo '  <script src="javascript/jquery-1.4.min.js"><script src="javascript/jquery-ui-1.7.2.custom.min.js"></script> 
		<script src="javascript/jquery.flip.min.js"></script> <link rel="stylesheet" type="text/css" href="css/flip_099.css"/> ';

//database fetches stuff, irrevelant


while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)) {
echo "<h3>".$row['e_name']."</h3>";

echo '<script type="text/javascript"> 
			$(function(){
				
				$("#flipPad a:not(.revert)").bind("click",function(){
					var $this = $(this);
					$("#flipbox").flip({
						direction: $this.attr("rel"),
						color: $this.attr("rev"),
						content:"';
echo "CONTENTGOESHERE- DATABASE STUFF SPEW IN HERE AND DISPLAYED IN FLIPBOX";

                      echo '",
						onBefore: function(){$(".revert").show()}
					})
					return false;
				});
				
                                 $("#flipPad2 a:not(.revert)").bind("click",function(){
					var $this = $(this);
					$("#flipbox").flip({
						direction: $this.attr("rel"),
						color: $this.attr("rev"),
						content:"<iframe src=\'stats.php?eid='.$eid.'\' height=\'55%\' width= \'100%\'></iframe>",
						onBefore: function(){$(".revert").show()}
					})
					return false;
				});
				$(".revert").bind("click",function(){
					$("#flipbox").revertFlip();
					return false;
				});
				
				
				
			});
		</script>';

?>
<div id="flipbox">Hello! I'm a flip-box! :)</div> 
					<div id="flipPad" style="float:left"> 
						<a href="#" class="left" rel="rl" rev="#39AB3E" title="Change content as <em>you</em> like!">Info</a> 
						
					</div>
                                        <div id="flipPad2" style="float:right"> 
						<a href="#" class="left" rel="rl" rev="#39AB3E" title="Change content as <em>you</em> like!">Display</a> 
						
					</div>

This page works when loaded individually, however when i call this page through ajax, although everything loads, the javascript fails to run. The page that runs this has the following code:
displaydates.php:

Code:

<html><head>

<script type="text/javascript" src="javascript/prototype.js"></script>
	<script type="text/javascript" src="javascript/effects.js"></script> 
	<script type="text/javascript" src="javascript/accordion.js"></script> 
<script type="text/javascript" src="javascript/load.js"></script> 

<link href="accordion.css" rel="stylesheet" type="text/css">
<SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT">
var url = "display_content.php?eid="; // The server-side script
function handleHttpResponse() {
  if (http.readyState == 4) {
    // Split the comma delimited response into an array
    results = http.responseText;
    document.getElementById('con').innerHTML = results;

  }
}
function updateCityState(ab) {
  var zipValue = ab;
var zip_name="zip"+ab;
if (document.getElementById(zip_name).innerHTML!="&nbsp;"){
  http.open("GET", url + escape(zipValue), true);
  http.onreadystatechange = function(){
if (http.readyState == 4) {
    // Split the comma delimited response into an array
    results = http.responseText;
    document.getElementById(zipValue).innerHTML = results;

  }
}
}
  http.send(null);
}
function getHTTPObject() {
  var xmlhttp;
  /*@cc_on
  @if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
  @else
  xmlhttp = false;
  @end @*/
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    try {
      xmlhttp = new XMLHttpRequest();
    } catch (e) {
      xmlhttp = false;
    }
  }
  return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object
</script> 
</head>
<body>

<div id="container"> 
	<div id="vertical_container" > 

<?php


echo "</h2><div  class='accordion_content' id='".$row['eid']."'> ";
//content here THIS IS WHERE THE AJAX CONTENT IS LOADED FROM CODE ABOVE





echo "</div>";
}
}
?>
 
	


</div> </div>
</body>
</html>

Can someone help me on this? Is this even possible to accomplish?

Thanks for any advice!
tianshiz

**TriggerHappy** · 02-15-2010, 11:22 AM

When the javascript fails to run, it usually means there is an error somewhere in it. Or you could have disabled Javascript. I'm sorry I can't read your code either, it's pretty messy and there is no highlighting.

But, this is what I use to load pages with ajax;

HTML Code:

var xmlhttp;
function ajax(url, str, state){
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null){
	  alert ("Browser does not support HTTP Request");
	  return;
	}

	url='newchat/'+url+str;
	xmlhttp.onreadystatechange=state;
	xmlhttp.open("GET",url,true);
	xmlhttp.send(null);
}

function GetXmlHttpObject(){
	if (window.XMLHttpRequest){return new XMLHttpRequest();}
	if (window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP");}
	return null;
}

It would be used like this;

HTML Code:

function callback(){
    alert(xmlhttp.responseText);
}
ajax("yourphpfile.php", "?do=query", callback)

Thread: loading the javascript in innerHTML

LinkBack

Thread Tools

Search Thread

Display

loading the javascript in innerHTML

Re: loading the javascript in innerHTML

Thread Information

Users Browsing this Thread

Similar Threads

jQuery, loading animation - how to hide again, after loading is finished?

Ajax innerHTML

innerHTML

"Loading message" while loading ASP.NET pages

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions