Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

retrieve image from database and view without refreshing

Status
Not open for further replies.
dumz

dumz

Programmer
Mar 27, 2012
2
0
0
LK
Hi,
I have to create a program using ajax and php(i thing it should be done in ajax.but i'm not sure.) which is connected to the database. in the program the last uploaded image in the database should be displayed. if a person wants to see older images that should be viewed without refreshing the webpage.

i'm half way done as i connected and uploaded the images to database. but i don't know how to retrieve them and view them without refreshing the web page..

Does anyone know how to do this?
please help me will you??????
Many thanks in advance
 
Sort by date Sort by votes
Hi

An image usually is displayed using an [tt]img[/tt] HTML tag. For that the browsers generate a separate HTTP request. As far as you described the task, there is no reason to involve AJAX. Something like this should be enough :
JavaScript: 
[b]function[/b] [COLOR=darkgoldenrod]show[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'displayhere'[/i][/green][teal]).[/teal]src[teal]=[/teal]what[teal].[/teal]href
  [b]return[/b] [b]false[/b]
[teal]}[/teal]
Code: 
[b]<img[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"#"[/i][/green] [maroon]alt[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"displayhere"[/i][/green][b]>[/b]
[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"oneimage.png"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"return show(this)"[/i][/green][b]>[/b]One image[b]</a>[/b]
[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"otherimage.png"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"return show(this)"[/i][/green][b]>[/b]Other image[b]</a>[/b]


Feherke.
 
Upvote 0 Downvote
thanks alot for the reply..
but how do i retrieve image from database and view it without refreshing the page?(please help me as im new to this work..)
please go through this code





<title>laughline </title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
// <![CDATA[
document.observe('dom:loaded', function () {
var newsCat = document.getElementsByClassName('newsCat');
for (var i = 0; i < newsCat.length; i++) {
$(newsCat.id).onclick = function () {
getCatPage(this.id);
}
}
});

function getCatPage(id) {
var url = 'load-content.php';
var rand = Math.random(9999);
var pars = 'id=' + id + '&rand=' + rand;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}

function showLoad () {
$('newsContent').style.display = 'none';
$('newsLoading').style.display = 'block';
}

function showResponse (originalRequest) {
var newData = originalRequest.responseText;
$('newsLoading').style.display = 'none';
$('newsContent').style.display = 'block';
$('newsContent').innerHTML = newData;
}
// ]]>
</script>

</head>
<body>
<h1>Today's Laugh Lines.. </h1>
<div id="tagLine">Laugh for a while</div>

<br />

<div id="newsContainer">
<div id="newsCategoriesContainer">
<div class="newsCat" id="newsCat1">latest</div>
<div class="newsCat" id="newsCat2">laugh Line 02</div>
<div class="newsCat" id="newsCat3">laugh Line 03</div>
<div class="newsCat" id="newsCat4">laugh Line 04</div>
<div class="newsCat" id="newsCat5">laugh Line 05</div>
<div class="newsCat" id="newsCat6">laugh Line 06</div>
<div class="newsCat" id="newsCat7">laugh Line 07</div>
<div class="newsCat" id="newsCat8">laugh Line 08</div>
<div class="newsCat" id="newsCat9">laugh Line 09</div>

</div>
<div id="newsCategoriesContainer1"><div id="tagLine">Your advertisements here</div></div>
<div id="newsLoading">Loading... <img src="images/loader.gif" title="Loading..." alt="Loading..." border="0" /></div>
<div id="newsContent">
<p><img src="images/pic1.gif" width="560" /></p>
</div>
</div>
</body>
</html>


My php page




<head>
<?php
include('config.php');

?>


</head>

<title>Laugh line</title>
<body>

<?php
function stringForJavascript($in_string) {
$str = ereg_replace("[\r\n]", " \\n\\\n", $in_string);
$str = ereg_replace('"', '\\"', $str);
return $str;
}
switch($_GET['id']) {
case 'newsCat1':
$content = '(my LATEST IMAGE SHOULD BE CALLED HERE)';
break;
case 'newsCat2':
$content = '(my 2ND LATEST IMAGE SHOULD BE CALLED HERE)';';
break;
case 'newsCat3':
$content = 'Laughline 3.';
break;
case 'newsCat4':
$content = 'Laughline 4.';
break;
case 'newsCat5':
$content = 'Laughline 5.';
break;
case 'newsCat6':
$content = 'Laughline 6.';
break;
case 'newsCat7':
$content = 'Laughline 7.';
break;
case 'newsCat8':
$content = 'Laughline 8.';
break;
case 'newsCat9':
$content = 'Laughline 9.';
break;
case 'newsCat10':
$content = 'Laughline 10.';
break;
case 'newsCat11':
$content = 'Laughline 11.';
break;
case 'newsCat12':
$content = 'Laughline 12.';
break;
default:
$content = 'There was an error.';

}
print stringForJavascript($content);
usleep(600000);
?>
</body>

PLS help mee...
 
Upvote 0 Downvote
Create a seperate page in your webfolder called GETIMAGES.PHP or whatever you like put the following code in it...

<?php
mysql_connect("yourdatabaseserver","username","password");
mysql_select_db("yourdatabase");
$image = stripslashes($_REQUEST[imageid]);
$rs = mysql_query("select FIELDNAME from TABLENAME where IDENTIFIER=".$image."";
$row = mysql_fetch_assoc($rs);
$imagebytes = $row[FIELDNAME];
header("Content-type: image/jpeg");
print $imagebytes;
?>

change the yourdatabaseserver, username, password, yourdatabase etc to connect to your database

change FIELDNAME, TABLENAME and IDENTIFIER (obviously) to get the image record you want

Test it works by going to h**p://yourwebsite/GETIMAGES.PHP?imageid=1

Obviously replace the 1 with an ID from your table, and you should see an image in front of you.

Then to get the image into your web page use

'<img src="h**p://yourwebsite/GETIMAGES.PHP?imageid=1"/>'

Doesn't do everything you want it to, but it gets the image out of the database
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

penguinspeaks
  • Locked
  • Question
Refresh page after input from another
Replies
0
Views
63
penguinspeaks
penguinspeaks
Jenisha chauhan
  • Locked
  • Question
HOW TO CONVERT LATTITUDE AND LONGITUDE
Replies
0
Views
53
Jenisha chauhan
Jenisha chauhan
Jouster
  • Locked
  • Question
How do i process serialized data with Javascript and ASP? 1
Replies
1
Views
76
vacunita
vacunita
kennycad
  • Locked
  • Question
Best Method to Transfer Data from WebApp to a Private PC
Replies
2
Views
66
kennycad
kennycad
hondaman2003
  • Locked
  • Question
Redownload image on partial postback
Replies
3
Views
42
MarkSweetland
MarkSweetland

Part and Inventory Search

Sponsor

Back
Top