ajax problem

Question

marjan_m 11 Junior Poster

15 Years Ago

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.

php

3 Contributors
13 Replies
129 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by marjan_m

Fungus1487 55 Posting Pro in Training

15 Years Ago

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);
    }
};

Fungus1487 55 Posting Pro in Training

15 Years Ago

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

Fungus1487 55 Posting Pro in Training

15 Years Ago

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>

Fungus1487 55 Posting Pro in Training

15 Years Ago

so does it still do this with my example ?

Reply to this topic

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.

marjan_m 11 Junior Poster · Answer 1 · 2009-04-18T15:36:53+00:00

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?

marjan_m 11 Junior Poster · Answer 2 · 2009-04-19T11:46:09+00:00

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>

marjan_m 11 Junior Poster · Answer 3 · 2009-04-20T00:07:58+00:00

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

marjan_m 11 Junior Poster · Answer 4 · 2009-04-20T00:25:02+00:00

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

marjan_m 11 Junior Poster · Answer 5 · 2009-04-20T06:10:38+00:00

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.

BzzBee 5 Posting Whiz · Answer 6 · 2009-04-20T09:33:36+00:00

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);

Fungus1487 55 Posting Pro in Training · Answer 7 · 2009-04-20T14:06:53+00:00

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

marjan_m 11 Junior Poster · Answer 8 · 2009-04-20T17:13:18+00:00

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.

marjan_m 11 Junior Poster · Answer 9 · 2009-04-20T17:48:08+00:00

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.