hi, i'm trying to get my feet wet with ajax and have been struggling with my first project.
i'm trying to query a db of small text-posts which include html markup. essentially, it's a small "blog-like" feed of text, links, etc.
the process:
the page loads, including all the most recent updates from the current month. these posts will be filled out in a div. i'm also including links for the previous two months of content and then a link that has "all the updates." when a user clicks on a link, the currently displayed data is replaced by the queried data.
here's the code i have: (there is jquery bit of code that's used for styling the scrollbar but it's not related to this project, nor was i able to isolate any conflicts due to it).
<?php
include "functions.inc.php";
?>
<?php
<script type="text/javascript" src="responsexml.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="/mason/styles_test/demoStyles.css" />
<link rel="stylesheet" type="text/css" media="all" href="/mason/styles_test/jScrollPane.css" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/mason/scripts_test/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/mason/scripts_test/jScrollPane.js"></script>
<!--script type="text/javascript" src="../dist/jScrollPane.min.js"></script-->
<script type="text/javascript">
$(function()
{
// this initialises the demo scollpanes on the page.
$('#pane2').jScrollPane({showArrows:true});
});
</script>
<style type="text/css">
body {background:#000; color:#fff;}
#head {height:100px; width:750px; margin-top:10px; background:url(http://jandcgroup.com/mason/Masonic_title.gif) center no-repeat;}
#wrap {width:880px; margin:0 auto;}
#content {
margin-right:auto;
margin-left:auto;
width: 800px;
height:100%;
padding: 0px 10px 10px 10px;
background-color: #000;
color: #fff;
clear:both;}
#left {width:125px; height:200px; float:left; padding-right:5px; text-align:center;}
#blogtitle {color:#ffff00; font-weight:bold; visibility: visible;}
#foot {width:800px; float:left; margin-top:100px; text-align:center;}
h3 {text-align:left;}
a, a:link, a:visited, a:active {text-decoration:none; color:#FFFF00;}
a:hover {text-decoration:underline;}
#links {
visibility: hidden;
}
</style>
$month = date('m');
//$intial_content = get_intial_content ($month);
$link_one_date = $month - 1;
$link_two_date = $month - 2;
$link_one_month = fix_date ($link_one_date);
$link_two_month = fix_date ($link_two_date);
?>
</head>
<body>
<div id="wrap">
<div id="content">
<div id="head"></div>
<br />
<div id="left"><br />
</div>
<div class="holder">
<object width="250" height="40"> <param name="movie" value="/mason/images/news_animation.swf"> <embed src="/mason/images/news_animation.swf" width="250" height="40"> </embed> </object>
<a href="" onclick="get_content("<?php $link_one_date; ?>") return false;"> <?php echo $link_one_month.' '.date('Y'); ?></a>
<a href="" onclick="get_content("<?php $link_two_date; ?>"); return false;"> <?php echo $link_two_month." ".date('Y'); ?></a>
<div class="blogPostsContainer">
<script type="text/javascript">
var month = new Date();
var current_month = month.getMonth();
current_month++;//make it 1-12, not 0-11
//alert (current_month);
get_inital_content(current_month);
</script>
<span id="post_title"> </span>
<span id="post_date"> </span>
<span id="post_content"> </span>
</div>
</div>
</div>
</div><!--end content-->
responsexml.js :
var request;
function get_initial_content (current_month)
{
//alert (current_month);
var request_month = current_month;
request=getHTTPObject();
if (request==false)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="responsexml.php";
url=url+"?month="+request_month;
url=url+"&sid="+Math.random();
//alert(url);
request.onreadystatechange=stateChanged;
request.open("GET",url,true);
request.setRequestHeader("Content-Type", "text/xml");
request.send(null);
}
function get_content(month)
{
var request_month = month;
request=getHTTPObject();
if (request==false)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="responsexml.php";
url=url+"?month="+request_month;
url=url+"&sid="+Math.random();
//alert(url);
request.onreadystatechange=stateChanged;
request.open("GET",url,true);
request.setRequestHeader("Content-Type", "text/xml");
request.send(null);
}
function stateChanged()
{
if (request.readyState==4)
{
xmlDoc = request.responseXML;
//if ((request.status == 200) || (request.status = 304))
// alert (request.responseText);
document.getElementById("post_title").innerHTML=xmlDoc.getElementsByTagName("post_title")[0].firstChild.nodeValue;
document.getElementById("post_date").innerHTML = xmlDoc.getElementsByTagName("post_date")[0].firstChild.nodeValue;
document.getElementById("post_content").innerHTML = xmlDoc.getElementsByTagName("post_content")[0].firstChild.nodeValue;
}
}
function getHTTPObject()
{
var xhr = false;
if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
xhr = false;
}
}
}
return xhr;
}
responsexml.php
<?php
header('Content-type: text/xml');
?>
<?php
$month = $_GET['month'];
//echo "::::::::::month::::::::$month:::::::::<br />";
include "database.inc.php";
$recent_posts= "SELECT * FROM posts WHERE month='$month'";
$recent_posts_query = mysql_query ($recent_posts);
if (!$recent_posts_query)
echo mysql_error();
$count = mysql_num_rows ($recent_posts_query);
if ($count < 1)
echo "no posts being pulled from db for month: $month<br />";
//$total_posts_for_month = mysql_num_rows ($recent_postID_query);
echo '<?xml version="1.0" encoding="ISO-8859-1"?><info>';
while ($query_results = mysql_fetch_array($recent_posts_query))
{
echo "<post_title>" . $query_results['title'] . "</post_title>";
echo "<post_date>" . $query_results['date'] . "</post_date>";
echo "<post_content>" . $query_results['content'] . "</post_content>";
}//end of while
echo "</info>";
mysql_close();
//}//end of function
?>
