Hi,

I am trying to implement the following ajax code:

function create()
{

	obj_t = new XMLHttpRequest();
	if(obj_t == null)
	{
	
		alert("Your broweser does not support it");
	}
	
}

function data()
{

	if(obj_t!=null)
		{

			if(obj_t.readyState == 4)
			{
			
				var dv = document.getElementById('tdetail');
				dv.innerHTML = obj_t.responseText;

			
			}
			
		}
}

function createRequest(id)
{

	obj_t.open("GET","functions/travellerdetail.php?tid="+id,true);
	obj_t.onreadystatechange = data;
	obj_t.send(null);

}


function showdetail(tid)
{

	create();
	createRequest(tid);
	
}

I have called the showdetail function a link click and passed it's id. The problem is that the dv is not updated data. Is there any problem with the link?

Thanks for your time.

Recommended Answers

All 13 Replies

This should be in the JavaScript forum but from looking at your code quickly it seems ok but you need to make sure the browser your using supports creating your XMLHttpRequest object like you do. The following code is taken from a project of mine which I know works feel free to try it out and see if its working in place of your code.

var createXmlHttpRequest = function() {
    var x;
    try {
        x = new XMLHttpRequest();
    } catch(ex) {
        try {
            x = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(ex2) {
            try {
                x = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(ex3) {
                x = false;
            }
        }
    }
    if(x) { return x; } else { return false; }
};
	
var createUniqueUrl = function(url) {
    return url + (url.indexOf('?') !== -1 ? '' : '?') + '&$=' + new Date().getTime();
};

var ajax = function(url, id) {
    var xmlHttp = createXmlHttpRequest();
    if(xmlHttp) {
        xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState === 4) {
                var data = xmlHttp.responseText;
            }
        };
        url = createUniqueUrl(url + '?id=' + id);
        xmlHttp.open('GET', url, true);
        xmlHttp.send(null);
    }
};

Thanks for your reply.

Mine code was also working fine. I have checked by alert that it reaches on state 4 and displays data, but the data vanishes after state 4. First it shows state 2 then 3 , then 4 and then 1. Why the div is not holding the data permanently?

you have alerted the 'obj_t.responseText' value and it definately is returning text ? Also do you have an element in the page with ID 'tdetail'. If so can you post your pages HTML as there may be a problem elsewhere

Thanks for your time. I am posting the whole code, please guide about the mistakes.

<?
include "functions/mysql.php";
?>

<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Find Travellers</title>
<link rel="stylesheet" type="text/css" href="stylesheet/style.css">
<script>
var obj_t;
function create()
{

	obj_t = new XMLHttpRequest();
	if(obj_t == null)
	{
	
		alert("Your broweser does not support it");
	}
	
}

function data()
{

	if(obj_t!= null)
		{	
						
			if(obj_t.readyState == 4)
			{

				var dv = document.getElementById('tdetail');
				dv.innerHTML = obj_t.responseText;

		
			}
			
		}
}

function createRequest(id)
{
	
	
	obj_t.open("GET", "functions/travellerdetail.php?tid="+id , true);

	obj_t.onreadystatechange = data;
	obj_t.send(null);

}


function showdetail(tid)
{

	create();
	createRequest(tid);
	
}
</script>
</head>

<body>
<table>
<tr><td>
<?$Q = mysql_query("select * from travellers where t_type = 'air'");?>
<div id="byair">
	<? 
	while($R = mysql_fetch_array($Q))
	{ 
	?>
	<br />
	<a href="" class="tlink" onclick="showdetail(<? echo $R["t_id"]; ?>)"  id="<? echo $R["t_id"]; ?>" name="<? echo $R["t_name"]; ?>">
				<? echo $R["t_name"]; ?> </a>

	<? }
	?>
	</div></td></tr>
<tr><td><div id="tdetail"></div></td></tr>
</table>

First of all if the document is (X)Html then your link tag needs to be closed.

<link rel="stylesheet" type="text/css" href="stylesheet/style.css">

should be

<link rel="stylesheet" type="text/css" href="stylesheet/style.css" />

Secondly the script tag REQUIRES you to specify its type.

<script>

should be

<script type="text/javascript">

You also need a closing </body> and </html> tag at the end of the document. Ive taken your script and reformatted it, try the following.

<?
	include "functions/mysql.php";
?>

<!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>
    <title>Find Travellers</title>
    <link rel="stylesheet" type="text/css" href="stylesheet/style.css" />
    <script language="javascript" type="text/javascript">
        function createXmlHttpRequest() {
            var x;
            try {
                x = new XMLHttpRequest();
            } catch(ex) {
                try {
                    x = new ActiveXObject("Msxml2.XMLHTTP");
                } catch(ex2) {
                    try {
                        x = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch(ex3) {
                        x = false;
                    }
                }
            }
            if(x) { return x; } else { return false; }
        }

        function showdetail(tid) {
            var xmlHttp = createXmlHttpRequest();
            if(xmlHttp) {
                xmlHttp.onreadystatechange = function() {
                    if(xmlHttp.readyState === 4) {
                        var data = xmlHttp.responseText;
                        var dv = document.getElementById('tdetail');
                        dv.innerHTML = data;
                    }
                };
                xmlHttp.open('GET', 'functions/travellerdetail.php?tid=' + id, true);
                xmlHttp.send(null);
            }
            return false;
        }
    </script>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <?$Q = mysql_query("select * from travellers where t_type = 'air'");?>
          <div id="byair">
            <?
              while($R = mysql_fetch_array($Q)) {
            ?>
            <br />
            <a href="#" class="tlink" onclick="return showdetail(<? echo $R["t_id"]; ?>)" id="<? echo $R["t_id"]; ?>" name="<? echo $R["t_name"]; ?>"><? echo $R["t_name"]; ?></a>
          <? } ?>
        </div>
      </td>
    </tr>
    <tr>
       <td> 
         <div id="tdetail"></div>
        </td>
      </tr>
    </table>
  </body>
</html>

Thanks for your help. Did you get the output of this code?

The inner html of div is changed at state 4 but then vanishes at 1, why the states has sequence of 2,3,4 and then except of having the correct sequence of 1,2,3,4

so does it still do this with my example ?

I have tried your code but it is not giving the output, then I have corrected the script tag in mine code. Still the problem exists.

marjaan_m

at first glance it looks like your this line is wrong
give the full path and then try
e.g if you are at localhost then

http://localhost/xyz/functions/travellerdetail.php

obj_t.open("GET","functions/travellerdetail.php?tid="+id,true);

it does not require a full URL but give it a try anyway.

Does the page POST BACK?
This might happen cuz you have not specified '#' in the href property of the anchor tag

marjaan_m

at first glance it looks like your this line is wrong
give the full path and then try
e.g if you are at localhost then

http://localhost/xyz/functions/travellerdetail.php

obj_t.open("GET","functions/travellerdetail.php?tid="+id,true);

Thanks for your time and suggestion.

it does not require a full URL but give it a try anyway.

Does the page POST BACK?
This might happen cuz you have not specified '#' in the href property of the anchor tag

Thanks for your time and guidance. The problem was that I was not specifying the href property. Now it is resolved.

Thanks for your help.

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.