Multiple Page AJAX

HDFilmMaker2112 · March 26, 2012

I just want to see if I'm going in the right direction with this.

The below has tabs, and then a window above it (loaded via AJAX).

tabs_viewer.php

<?php
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
  header("Content-type: application/xhtml+xml");
}
else {
  header("Content-type: text/html");
}
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="viewer">

</div>

<div class="tabs_video_wrapper">
<div class="tabs_video"><span class="tabs_video_text" onclick="">View Trailer</span></div>
<div class="tabs_video"><span class="tabs_video_text" onclick="">Project Details</span></div>
<div class="tabs_video"><span class="tabs_video_text" onclick="">Offical Site</span></div>
<div class="tabs_video"><span class="tabs_video_text" onclick="">Buy Tickets</span></div>
<div class="tabs_video"><span class="tabs_video_text">Twitter</span></div>
</div>

</body>
</html>

project_viewer.php

This is the page that contains what goes in the "viewer" div via AJAX.

<?php
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
  header("Content-type: application/xhtml+xml");
}
else {
  header("Content-type: text/html");
}

if($view=="trailer"){
$content='<div href="video/Area51EntertainmentCommercialLow.mp4" id="player"> 
</div>
<script>
flowplayer("player", "./flowplayer-3.2.7-0.swf");
</script>';
}
elseif($view="details"){

}
elseif($view="tickets"){

}
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" src="flowplayer-3.2.6.min.js"></script>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<?
echo $content;
?>
</body>
</html>

Now if you view this page: http://www.area51entertainment.co/maintenance/

The blank area above the scroller, with the white boxes, is where both of those pages will go via AJAX. Now the white boxes in the scroller will contain images/poster for films. Each of those will trigger an AJAX call (when clicked) to the tabs_viewer.php sending along the films id number, and in turn tabs_viewer.php will control the display of the content, by calling project_viewer.php.

So, am I going the right way here, or is there a way to simplify this?

HDFilmMaker2112 · March 27, 2012

Here's my current ajax code. It's not loading anything... I need the tabs to come up as a default when the main page loads.


function load(){
if(type==undefined){
type="000001";
}
sndReq(type);
changeClr(type);
}

function requestObj() {
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}

var http = requestObj();

function sndReq(type) {
    http.open('get', 'tab_viewer.php?film_id='+type, true);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        document.getElementById("tabs").innerHTML = response;
    }
}

Here is where it's being called:

<?php
$num_projects=15;
$scroller_projects="";

require_once 'db_select.php';
$project_query_num="SELECT COUNT(*) FROM $tbl_name";
$project_result_num=mysql_query($project_query_num);
$project_row_num=mysql_fetch_row($project_result_num);
$project_row_num=$project_row_num[0];

if($project_row_num <= $num_projects){
$project_query="SELECT * FROM $tbl_name";
$project_result=mysql_query($project_query);
}
else{
$project_query="SELECT * FROM $tbl_name WHERE project_release_date BETWEEN $start_date AND $end_date LIMIT 0,$num_projects";
$project_result=mysql_query($project_query);
}
$i=1;
while($project_row=mysql_fetch_array($project_result)){
extract($project_row);
$scroller_projects.='<div class="project_entry" tabindex="'.$i.'" onclick="sndReq(\''.$project_id.'\');">Test</div>';
$i++;
}
if($project_row_num==""){
$project_row_num=$num_projects;
}
$scroller_width=$project_row_num*114;
$content='
<div class="video_scroller_wrapper">
<div class="video" id="tabs">

</div>


<div class="recentfilms_wrapper">
<div class="left_arrow"><img src="arrow_left.png" alt="Left" title=""  class="arrow_left" onclick="jumpLeft(\'recentfilms\')" onmouseover="startScrollLeft(\'recentfilms\')" onmouseout="stopScroll()" /></div> 
<div id="recentfilms">
<div id="scroller" style="width: '.$scroller_width.'px;">
'.$scroller_projects.'
</div>
</div>
<div class="right_arrow"><img src="arrow_right.png" alt="Left" title="" class="arrow_right" onclick="jumpRight(\'recentfilms\')" onmouseover="startScrollRight(\'recentfilms\')" onmouseout="stopScroll()" /></div>
</div>
</div>
<div class="news_wrapper">
<div class="news">
<div class="news_title"><span class="category_title_text">Latest News</span></div>
<div class="news_text">
<iframe src="http://www.indiegogo.com/project/widget/75876?a=9030" style="width: 224px; height: 429px; position: relative; left: 3px; top: 15px; border: 0px; overflow: hidden;"></iframe>
</div>
</div>
</div>
';
?>

Sign In

Multiple Page AJAX

Recommended Posts

HDFilmMaker2112

Link to comment

Share on other sites

HDFilmMaker2112

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information