Member Avatar for DonGlover

I am trying to use ajax to 'embed' a youtube video on page.
I make my calls and put the responseText to the innerHTML. But the embed object does not appear.
I have verified that I can write to the div tag by ID (I pumped some straight text into it).
I have verified that the container page works properly by calling it from the address bar.
I have verified that the returned response text looks correct by popping it up in an alert and verifying the source against the address bar call.

I have tried both loading an entire page and just loading object HTML code.

Is this something that Ajax cannot do?

  • 2 Contributors
  • 2 Replies
  • 72 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by DonGlover
Member Avatar for vicky_rawat

Hi,

Please post you code.

Member Avatar for DonGlover

The videos-v1.php was the first bit of code I tried to just pump the <object> code into the innerHTML.
The Video.php is a more 'complete ajax' attempt.

//*******************************************************
//   Class: AJax
//   (Note in javascript you define a class as function)
//   Author: Don Glover (Base code lifted from vs335 training class)
//   Usage: Define a new ajax object: var ajax = new AJax();
//          Set the on success event handler: ajax.onSuccess = stateChange;
//          Holds the html element into which the retrieved page or info
//                will be written: ajax.element = element;
//                  var element = document.getElementById("dataArea1");
//          How you call the remote page to get the information: ajax.Call("GET", url, null);
//*******************************************************
function AJax()
{
   var Me = this;
   // Stores the area into which the retrieved page data is to be written.
   // Can be used in the onSuccess event handler.
   this.element = null;

   // define event handlers that are supplied by consumer
   this.onSuccess = null;
   this.onFail = null;

   // declare the XMLHTTP bbject.
   this.httpReq = GetXmlHttpObject();

   // Setup public methods
   this.Call = Call;

   //****************************
   // method : Get or Post
   // url    : URL of page to load
   function Call(method, url, data)
   {
      if(this.httpReq != null)
      {
        // assign function pointers
        this.httpReq.onreadystatechange = doStateChange;
        this.httpReq.open(method, url, true);//true = asynch
        this.httpReq.send(data);
      }
      else
      {
        // Internal error. What should we do here?
      }
   }

   //****************************
   function doStateChange()
   {
        if (Me.httpReq.readyState == 4 || Me.httpReq.readyState == "complete")
        {
            if (Me.httpReq.status == 302)
            {
                 // Step 1.. Get the Redirect location via getResponseHeader
                 // Step 2.. Call "Call" with the new URL.
            }
            else if (Me.httpReq.status == 200)
            {
                 //Me.onSuccess(Me)
                 //while(Me.httpReq.responseText == null);
                 alert(Me.httpReq.responseText);
                 Me.element = Me.httpReq.responseText;
            }
            else
                 Me.onFail(Me)
        }
   }

   //****************************
   // Called internally by the AJAX object.
   function GetXmlHttpObject()
   {
      var objXMLHttp=null;
      if (window.XMLHttpRequest)
      {
         objXMLHttp=new XMLHttpRequest(); // Firefox
      }
      else if (window.ActiveXObject)
      {
         objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
      }
      if (objXMLHttp==null)
      {
        alert ("Browser does not support HTTP RequestnPlease use a mail in registration form.");
      }
      return objXMLHttp; // IE
   }
}
<!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>
<?php $url = $_GET["url"]; ?>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>

<body>
<?php 
	echo(
	'<object width="425" height="344">' .
		'<param name="movie" value="' . $url . '&hl=en&fs=1"></param>' .
		'<param name="allowFullScreen" value="true"></param>' .
		'<embed src="' . $url . '&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>' .
		'</object>') ;
?>
</body>

</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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript" language="javascript" src="ajaxframework.js"></script>
<script type="text/javascript" language="javascript">


function doLoadVideo(url)
{
/*
	if(ajax == null)
			var ajax = new AJax();
	if(ajax.element == null)			
		ajax.element =  document.getElementById("videoout").innerHTML ;

	ajax.Call("GET", "getembed.php?url=" + url, null);
*/
	embededvideo = '<object width="425" height="344">' +
		'<param name="movie" value="' + url + '&hl=en&fs=1"></param>' +
		'<param name="allowFullScreen" value="true"></param>' +
		'<embed src="' + url + '&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>' +
		'</object>' ;
	document.getElementById("videoout").innerHTML = 	embededvideo;
	alert(
		'<object width="425" height="344">' +
		'<param name="movie" value="' + url + '&hl=en&fs=1"></param>' +
		'<param name="allowFullScreen" value="true"></param>' +
		'<embed src="' + url + '&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>' +
		'</object>' );

	
}

</script>
</head>

<body>
	<table>
		<tr>
			<td valign="top">
				<form method="post">
					<select onchange="doLoadVideo(this.value);">
					  <?php
					  $doc = new DOMDocument();
					  $doc->load( 'videodata.xml' );
					  
					  $books = $doc->getElementsByTagName( "video" );
					  foreach( $books as $book )
					  {
						  $titles = $book->getElementsByTagName( "title" );
						  $title = $titles->item(0)->nodeValue;
						  
						  $descs = $book->getElementsByTagName( "desc" );
						  $desc = $descs->item(0)->nodeValue;
						  
						  $urls = $book->getElementsByTagName( "url" );
						  $url = $urls->item(0)->nodeValue;
						  echo '<option value="' . $url . '">' . $title . '</option>\n';
					  }
					  ?>
					</select>
			    </form>
			</td>
			<td valign="top">
				<div id="videoout">
				<object width="425" height="344" >
				    <param name="movie" value="http://www.youtube.com/v/4ODVmtUJ0Po&hl=en&fs=1"></param>
				    <param name="allowFullScreen" value="true"></param>
				    <embed src="http://www.youtube.com/v/4ODVmtUJ0Po&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>
				</object>
				</div>
			</td>
		</tr>
	</table>
	
</body>

</html>
<videos>
    <video con="31" type="member">
        <title>NORWESCON 31 - Part One</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=2AvcI6gNzPs</url>
    </video>
    <video con="31" type="member">
        <title>NORWESCON 2008 - PART 2</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=PizEUgZ1GVI</url>
    </video>
    <video con="31" type="member">
        <title>Norwescon 31 - Part 3 - THE FLYING MONKEY!</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=Je7Rc2D-Ly4</url>
    </video>
    <video con="31" type="member">
        <title>Zombiebot Film Festival</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=yy2bPmlvI2w</url>
    </video>
    <video con="24M" type="masquerade">
        <title>Norwescon 24 Masquerade - Yadra, the protector</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=kiH3RhwISms</url>
    </video>
    <video con="23" type="masquerade">
        <title>Norwescon 23 Masquerade - Spring Rain</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=cbzoiprk-V8</url>
    </video>
    <video con="19" type="masquerade">
        <title>Norwescon 19 Masquerade - The Awakening</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=c9zDqXO7JR4</url>
    </video>
    <video con="19" type="masquerade">
        <title>Norwescon 19 Masquerade - The Gift</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=OH45MJWAFxk</url>
    </video>
    <video con="30" type="interview">
        <title>Writer interviews at Norwescon 30</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=eueCR1KvdBM</url>
    </video>
    <video con="30" type="interview">
        <title>Luis Royo at Norwescon 30</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=puDit2OyFNs</url>
    </video>
    <video con="31" type="member">
        <title># 105a - Norwescon 31 - Mar 20-23 2008 Part 1</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=xhq-aST7H5k</url>
    </video>
    <video con="30" type="member">
        <title>Norwescon 30</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=TC1DqX0Pd4g</url>
    </video>
     <video con="30" type="member">
        <title>Yip Yip Aliens At Norwescon 30</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=RAx_eOuWKgA</url>
    </video>
     <video con="30" type="member">
        <title>Norwescon walk</title>
        <desc></desc>
        <url></url>
    </video>
     <video con="19" type="masquerade">
        <title>A Klingon Wedding</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=shykcJGb85Q</url>
    </video>
      <video con="30" type="member">
        <title>Personal yipyip</title>
        <desc></desc>
        <url>http://www.youtube.com/watch?v=UTy9hlJqE0s</url>
    </video>
</videos>
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript" language="javascript" src="ajaxframework.js"></script>
<script type="text/javascript" language="javascript">


function doLoadVideo(url)
{
	if(ajax == null)
			var ajax = new AJax();
	if(ajax.element == null)			
		ajax.element =  document.getElementById("videoout").innerHTML ;

	ajax.Call("GET", "getembed.php?url=" + url, null);
/*
	embededvideo = '<object width="425" height="344">' +
		'<param name="movie" value="' + url + '&hl=en&fs=1"></param>' +
		'<param name="allowFullScreen" value="true"></param>' +
		'<embed src="' + url + '&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>' +
		'</object>' ;
	document.getElementById("videoout").innerHTML = 	embededvideo;
	alert(
		'<object width="425" height="344">' +
		'<param name="movie" value="' + url + '&hl=en&fs=1"></param>' +
		'<param name="allowFullScreen" value="true"></param>' +
		'<embed src="' + url + '&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>' +
		'</object>' );
	*/
	
}

</script>
</head>

<body>
	<table>
		<tr>
			<td valign="top">
				<form method="post">
					<select onchange="doLoadVideo(this.value);">
					  <?php
					  $doc = new DOMDocument();
					  $doc->load( 'videodata.xml' );
					  
					  $books = $doc->getElementsByTagName( "video" );
					  foreach( $books as $book )
					  {
						  $titles = $book->getElementsByTagName( "title" );
						  $title = $titles->item(0)->nodeValue;
						  
						  $descs = $book->getElementsByTagName( "desc" );
						  $desc = $descs->item(0)->nodeValue;
						  
						  $urls = $book->getElementsByTagName( "url" );
						  $url = $urls->item(0)->nodeValue;
						  echo '<option value="' . $url . '">' . $title . '</option>\n';
					  }
					  ?>
					</select>
			    </form>
			</td>
			<td valign="top">
				<div id="videoout">
				<object width="425" height="344" >
				    <param name="movie" value="http://www.youtube.com/v/4ODVmtUJ0Po&hl=en&fs=1"></param>
				    <param name="allowFullScreen" value="true"></param>
				    <embed src="http://www.youtube.com/v/4ODVmtUJ0Po&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>
				</object>
				</div>
			</td>
		</tr>
	</table>
	
</body>

</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.