Ad:

PHP Discussion Thread
Marked Solved
Views: 1300

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Apr 18th, 2009

ajax problem

Expand Post »

Hi,

I am trying to implement the following ajax code:

PHP Syntax (Toggle Plain Text)
 
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);
 
}
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.

Similar Threads

AJAX problem in JavaScript / DHTML / AJAX
Frustrating Firefox Problem while making AJAX request on an anchor in JavaScript / DHTML / AJAX
Radio Button - AJAX - Problem with Passing Value in JavaScript / DHTML / AJAX
Problem with page link. in JavaScript / DHTML / AJAX
multiple radiobutton values ajax problem in JavaScript / DHTML / AJAX

marjan_m

Reputation Points: 21

Solved Threads: 0

Junior Poster

Offline

149 posts
since Apr 2005

Permalink

Apr 18th, 2009

Re: ajax problem

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.

javascript Syntax (Toggle Plain Text)
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);
    }
};
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

Reputation Points: 66

Solved Threads: 56

Posting Pro in Training

Offline

459 posts
since Apr 2007

Permalink

Apr 18th, 2009

Re: ajax problem

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

Reputation Points: 21

Solved Threads: 0

Junior Poster

Offline

149 posts
since Apr 2005

Permalink

Apr 18th, 2009

Re: ajax problem

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

Reputation Points: 66

Solved Threads: 56

Posting Pro in Training

Offline

459 posts
since Apr 2007

Permalink

Apr 19th, 2009

Re: ajax problem

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

php Syntax (Toggle Plain Text)
<?
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>
<?
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>

Last edited by marjan_m; Apr 19th, 2009 at 2:54 am.

marjan_m

Reputation Points: 21

Solved Threads: 0

Junior Poster

Offline

149 posts
since Apr 2005

Permalink

Apr 19th, 2009

Re: ajax problem

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

Click to Expand / Collapse Quote originally posted by marjan_m ...

html Syntax (Toggle Plain Text)
<link rel="stylesheet" type="text/css" href="stylesheet/style.css">
<link rel="stylesheet" type="text/css" href="stylesheet/style.css">

should be

html Syntax (Toggle Plain Text)
<link rel="stylesheet" type="text/css" href="stylesheet/style.css" />
<link rel="stylesheet" type="text/css" href="stylesheet/style.css" />

Secondly the script tag REQUIRES you to specify its type.

Click to Expand / Collapse Quote originally posted by marjan_m ...

html Syntax (Toggle Plain Text)
<script>
<script>

should be

html Syntax (Toggle Plain Text)
<script type="text/javascript">
<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.

php Syntax (Toggle Plain Text)
<?
	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>
<?
	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

Reputation Points: 66

Solved Threads: 56

Posting Pro in Training

Offline

459 posts
since Apr 2007

Permalink

Apr 19th, 2009

Re: ajax problem

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

marjan_m

Reputation Points: 21

Solved Threads: 0

Junior Poster

Offline

149 posts
since Apr 2005

Permalink

Apr 19th, 2009

Re: ajax problem

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

Reputation Points: 21

Solved Threads: 0

Junior Poster

Offline

149 posts
since Apr 2005

Permalink

Apr 19th, 2009

Re: ajax problem

so does it still do this with my example ?

Fungus1487

Reputation Points: 66

Solved Threads: 56

Posting Pro in Training

Offline

459 posts
since Apr 2007

Permalink

Apr 19th, 2009

Re: ajax problem

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.

marjan_m

Reputation Points: 21

Solved Threads: 0

Junior Poster

Offline

149 posts
since Apr 2005

Page 1
2
Next

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in PHP Forum Timeline: dynamic array and dymanic variables

Next Thread in PHP Forum Timeline: PHP-MySQL question

DaniWeb Message

Cancel Changes

User Name
Password