Ajax Javascript query does not run more than once
index.php
Code:
<div style="position:fixed; left:300px; top: 500px; display:inline-block;"><strong><i><a href="#" id="previous" onClick="process('previous','<?=$postID?>')">Previous</a></i></strong></div>
getpost.js
Code:
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject() {
var xmlHttp;
if(window.ActivexObject) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlHttp = false;
}
} else {
try {
xmlHttp = new XMLHttpRequest();
} catch(e) {
xmlHttp = False;
}
}
if(!xmlHttp)
alert("XML Http Objhect cannot be created");
else
return xmlHttp;
}
function process(direction,$postID) {
var direction = direction;
var postID = $postID;
if(xmlHttp.readyState==0 || xmlHttp.readystate==4) {//check if server is ready
try{
if (direction == 'previous') {
xmlHttp.open("GET","getpost.php?postID="+postID+"&direction=previous", true);
} else if (direction == 'next') {
xmlHttp.open("GET","getpost.php?postID="+postID+"&direction=next", true);
}
xmlHttp.send('');
// xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.onreadystatechange=function()
{
// alert(xmlHttp.readyState + " " + xmlHttp.status);
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
message = xmlDocumentElement.firstChild.data;
//document.getElementById("journalcontent").innerHTML = '<span style="color:blue">'+ message + '</span>';
var showElements = xmlResponse.getElementsByTagName("response");
//alert(showElements);//objectnodelist
for (var x=0; x<showElements.length; x++)
{
var journalID = showElements[x].childNodes[0].firstChild.data;
var title = showElements[x].childNodes[2].firstChild.data;
var content = showElements[x].childNodes[3].firstChild.data;
var datetime = showElements[x].childNodes[4].firstChild.data;
content = nl2br(content);
total = '<strong>' + title + '</strong><br /><br />' + content;
document.getElementById("journalcontent").innerHTML = total + '<div style="text-align:right; border-bottom-width:2px; border-bottom-style:dashed; border-bottom-color:black;" id="datetime"></div>';
datetime = '<strong>' + datetime + '</strong>';
document.getElementById("datetime").innerHTML = datetime;
alert(journalID);
$('#previous').attr("onClick", "process('previous','"+ journalID + "')");
// document.getElementById("previous").onClick = "process('previous',<?="+ journalID + "?>)";
}
// ajaxFinished = 1;
//
// //need to close the connection.
// xmlHttp = null;
}
}
} catch(e) {
alert(e.toString());
}
} else {
setTimeout('process(direction,postID)', 1000)
}
}
function nl2br (str, is_xhtml) {
// http://kevin.vanzonneveld.net
// + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: Philip Peterson
// + improved by: Onno Marsman
// + improved by: Atli Þór
// + bugfixed by: Onno Marsman
// + input by: Brett Zamir (http://brett-zamir.me)
// + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: Brett Zamir (http://brett-zamir.me)
// + improved by: Maximusya
// * example 1: nl2br('Kevin\nvan\nZonneveld');
// * returns 1: 'Kevin<br />\nvan<br />\nZonneveld'
// * example 2: nl2br("\nOne\nTwo\n\nThree\n", false);
// * returns 2: '<br>\nOne<br>\nTwo<br>\n<br>\nThree<br>\n'
// * example 3: nl2br("\nOne\nTwo\n\nThree\n", true);
// * returns 3: '<br />\nOne<br />\nTwo<br />\n<br />\nThree<br />\n'
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br ' + '/>' : '<br>'; // Adjust comment to avoid issue on phpjs.org display
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}
.
getpost.php works fine
I am able to click the button and get data back, but I am unable to get data back the second time I click the button.
Why?
I have also tried using the below 2
1.
// ajaxFinished = 1;
2.
// //need to close the connection.
// xmlHttp = null;