We help IT Professionals succeed at work.

Ajax, get information from database and show in the browser

Pedro Chagas
Pedro Chagas asked
on
Medium Priority
378 Views
Last Modified: 2012-05-12
Hi E's, my knowlgment in Ajax is very poor, usually I use HTML and php for made my websites.
Now I need to resolve a problem with Ajax, and maybe this step was my beginning in Ajax.
In snippet code I have a form, where I can put a number, and that number have a title correspondent in my database. If I write 1000 appear one title, if I write 1001 appear another title and so on....
That is what I want do in Ajax, the script have to read the database correspodent for that number, and present data in "<div id="config_titulos">HERE PUT THE INFORMATION COME FROM DATABASE/AJAX</div>".
The db query you see in the beginning of the code, is usually the code I use to get data from db, in this specific case "tutorial" is where located the number, and "title" is where is locates the data from title correspondent for each number.

How I do in Ajax the presentation of title for different numbers I put in the form?

The best regards, JC
<!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>
<noscript>
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=index.php">
</noscript>
<? include("database.php"); 
// this is the way I usualy use to get data from database, in this case I get information from URL, but for this example can be any thing!
$tutorial_result = mysql_query("SELECT * FROM tutorial where tutorial = '$_GET[tutorial]'", $db);
$tutorial_rows = mysql_num_rows($tutorial_result);
$tutorial = mysql_fetch_object($tutorial_result);
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Novo Tutorial</title>
<style type="text/css" media="screen">
	@import "index.css";
</style>
</head>
<body>
<div id="geral">
<div id="titulo">upload de ficheiros e pastas</div>
<div id="sub_titulo">verificação e preparação</div>
<div id="menu_links">
<a href="index.php" class="links">home</a> <a href="novo.php" class="links">novo</a> <a href="configuracao.php" class="links">configuração</a> <a href="lista.php" class="links">lista</a>
</div>


<div id="config_tecno">
<div id="config_titulos">insert number please:</div>
<div id="config_titulos">HERE PUT THE INFORMATION COME FROM DATABASE/AJAX</div>
</div>
<div id="form"><form action="PROCESS_INFORMATION.PHP" method="post" name="form1">
<input name="number" type="text" value="" size="10" maxlength="4" /><br /> 
<input name="button" type="submit" disabled value="send information to process" /> 
</form>
</div>
</div>
</body>
</html>

Open in new window

Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
save attached code as hielo.php (in the same folder where you have database.php) and try it.
<?php

$url=htmlentities($_SERVER['PHP_SELF'],ENT_QUOTES);

if( isset($_GET['tutorial']) )
{
	require_once("database.php"); 

	$criteria=mysql_real_escape_string($_GET['tutorial']);

	$tutorial_result = mysql_query("SELECT * FROM `tutorial` where `tutorial` = '$criteria' ", $db) or die(mysql_error());
	$tutorial_rows = mysql_num_rows($tutorial_result);
	if(!$tutorial_rows )
	{
		echo 'No results found.';
	}
	else
	{
		$tutorial = mysql_fetch_assoc($tutorial_result);
		echo PHP_EOL,'<table><thead><tr><th>',implode('</th><th>',array_keys($tutorial)),'</th></tr></thead><tbody>';
		do{
			echo PHP_EOL,'<tr><td>', implode('</td><td>',$tutorial) , '</td></tr>';
		}while( $tutorial = mysql_fetch_assoc($tutorial_result) );
		echo PHP_EOL,'</tbody></table>';
	}
	
}

?>
<!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>
<noscript>
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=index.php">
</noscript>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Novo Tutorial</title>
<style type="text/css" media="screen">
	@import "index.css";
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function fetchData(v)
{
	$.get("<?php echo $url;?>?tutorial="+v,function(result){
		$('#config_titulos_data').html(result);
	});
}
</script>
</head>
<body>
<div id="geral">
<div id="titulo">upload de ficheiros e pastas</div>
<div id="sub_titulo">verificação e preparação</div>
<div id="menu_links">
<a href="index.php" class="links">home</a> <a href="novo.php" class="links">novo</a> <a href="configuracao.php" class="links">configuração</a> <a href="lista.php" class="links">lista</a>
</div>


<div id="config_tecno">
<div id="config_titulos">insert number please:</div>
<div id="config_titulos_data">HERE PUT THE INFORMATION COME FROM DATABASE/AJAX</div>
</div>
<div id="form"><form action="PROCESS_INFORMATION.PHP" method="post" name="form1">
	<input name="number" type="text" value="" size="10" maxlength="4" onchange="fetchData(this.value)" /><br /> 
	<input name="button" type="submit" disabled value="send information to process" /> 
</form>
</div>
</div>
</body>
</html>

Open in new window

Pedro ChagasWebmaster

Author

Commented:
Hi hiello, I don't test your solution because I am in my mobile phone.
In first view, I thing your code will create a table, and increment titles every time I put a number in the form, if I'm wrong, my apologizes! But if it is true, is not that I needed.
Supose I'm correct about your solution:
If I write in the form for example 1000, I present the title correspodent for that number, but if I erase from the form the number 1000 and write 1001 or other the system give me another title, in practice I just to see one title each time I write a number in the form. And that information have to be present in this line: "<div id="config_titulos">HERE PUT THE INFORMATION COME FROM DATABASE/AJAX</div>".
Can you please change your code?

The best regard, JC
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
line 46:
$('#config_titulos_data').html(result);

overwrites the OLD content of config_titulos_data with the new content fetched from the ajax call.  The ajax call is executed everytime a use types a new value and "leaves" the field.

On another note, on my first post, line 26 should be:
exit;
...
	else
	{
		$tutorial = mysql_fetch_assoc($tutorial_result);
		echo PHP_EOL,'<table><thead><tr><th>',implode('</th><th>',array_keys($tutorial)),'</th></tr></thead><tbody>';
		do{
			echo PHP_EOL,'<tr><td>', implode('</td><td>',$tutorial) , '</td></tr>';
		}while( $tutorial = mysql_fetch_assoc($tutorial_result) );
		echo PHP_EOL,'</tbody></table>';
	}
exit;//BE SURE TO add this line	
}
...

Open in new window

Pedro ChagasWebmaster

Author

Commented:
Hi @hielo, is that I wanted, very nice.
Like you can see in attach image, the ajax system show all fields for that number, and like I tell above (in first post) I just want the information of title, in real case was "titulo" (title in english and titulo in Portuguese).
Can you please change the code again?

The best regards, JC
02-11-2011-18-47-53.png
Pedro ChagasWebmaster

Author

Commented:
For example put that information inside a string...
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
>>the ajax system show all fields for that numbe
That is because I "re-used" the query YOU posted. You posted:
SELECT * FROM ...

which will get you ALL the fields on the query.

>> I just want the information of title, in real case was "titulo"
Then all you need to do is to change your query to:
SELECT `titulo` FROM ...
Pedro ChagasWebmaster

Author

Commented:
You have reason, but when I want see just the 'titulo' I do $tutorial->titulo;
I change the Select, and now I can see the titulo only.
Please how I can see only the contain of titulo. In attach image you can see, that I have the contain of titulo (that's good), but I have ti the title of the field, in this case is titulo too.

Regards, JC
02-11-2011-20-02-16.png
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008
Commented:
try:
...
	else
	{
		while( $tutorial = mysql_fetch_assoc($tutorial_result) )
		{
			echo $tutorial['titulo'];
		}
	}
exit;//BE SURE TO add this line	
}
...

Open in new window

Pedro ChagasWebmaster

Author

Commented:
Thank you @hielo.
I post entire code again in snippet code for the next visitors view.
One more time thanks for your time.

The best regards, JC
<?php

$url=htmlentities($_SERVER['PHP_SELF'],ENT_QUOTES);

if( isset($_GET['tutorial']) )
{
    require_once("database.php"); 

    $criteria=mysql_real_escape_string($_GET['tutorial']);

    $tutorial_result = mysql_query("SELECT * FROM `tutorial` where `tutorial` = '$criteria' ", $db) or die(mysql_error());
    $tutorial_rows = mysql_num_rows($tutorial_result);
    if(!$tutorial_rows )
    {
        echo 'No results found.';
    }
    else
    {
        while( $tutorial = mysql_fetch_assoc($tutorial_result) )
        {
            echo $tutorial['titulo'];
        }
    }
exit;//BE SURE TO add this line    
}

?>
<!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>
<noscript>
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=index.php">
</noscript>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Novo Tutorial</title>
<style type="text/css" media="screen">
    @import "index.css";
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function fetchData(v)
{
    $.get("<?php echo $url;?>?tutorial="+v,function(result){
        $('#config_titulos_data').html(result);
    });
}
</script>
</head>
<body>
<div id="geral">
<div id="titulo">upload de ficheiros e pastas</div>
<div id="sub_titulo">verificação e preparação</div>
<div id="menu_links">
<a href="index.php" class="links">home</a> <a href="novo.php" class="links">novo</a> <a href="configuracao.php" class="links">configuração</a> <a href="lista.php" class="links">lista</a>
</div>


<div id="config_tecno">
<div id="config_titulos">insert number please:</div>
<div id="config_titulos_data">HERE PUT THE INFORMATION COME FROM DATABASE/AJAX</div>
</div>
<div id="form"><form action="PROCESS_INFORMATION.PHP" method="post" name="form1">
    <input name="number" type="text" value="" size="10" maxlength="4" onchange="fetchData(this.value)" /><br /> 
    <input name="button" type="submit" value="send information to process" /> 
</form>
</div>
</div>
</body>
</html>

Open in new window

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
>>SELECT *
On the code above, you are using ONLY "titulo", so you should be executing ONLY SELECT `titulo`. It doesn't make sense for you to consume memory on data/information you do not need.  In general, you should select only the field(s) you need.

Regards,
Hielo
Pedro ChagasWebmaster

Author

Commented:
Thank you hielo!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.