hellow everybody,
i have created a image gallery, i am displaying a button name "Collect" with every image, when ever a registered user clicks on this button, the image id will be stored in the database table, but it must be behind the scene, i mean without refreshing the whole page.
please can anybody help how it can be done in simple way, i will be very much thankfull.
regards.......
This can be done using ajax.
I am not really good at Ajax, but, I think, this is what you are trying to achieve. I modified the script from http://w3schools.com/php/php_ajax_suggest.asp to meet your requirement!
This is index.php
<html>
<head>
<script src="clienthint.js"></script>
</head>
<body>
<form name="form1">
<input type="button" name="button" value="button" onclick="callAjax(1);" /><br />
<input type="button" name="button" value="button" onclick="callAjax(2);" /><br />
<input type="button" name="button" value="button" onclick="callAjax(3);" /><br />
<input type="button" name="button" value="button" onclick="callAjax(4);" /><br />
<input type="button" name="button" value="button" onclick="callAjax(5);" /><br />
<input type="button" name="button" value="button" onclick="callAjax(6);" /><br />
<input type="button" name="button" value="button" onclick="callAjax(7);" /><br />
<input type="button" name="button" value="button" onclick="callAjax(8);" /><br />
<input type="button" name="button" value="button" onclick="callAjax(9);" /><br />
<input type="button" name="button" value="button" onclick="callAjax(10);" /><br />
</form>
<p><span id="txtHint"></span></p>
</body>
</html>
//callAjax is an ajax function. You pass the id of the image as parameter.This is clienthint.js
var xmlHttp
function callAjax(id) {
if (id.length==0) {
document.getElementById("txtHint").innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null) {
alert ("Browser does not support HTTP Request")
return
}
var url="gethint.php"
url=url+"?id="+id
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject() {
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}This is gethint.php where you execute your sql query.
<?php
if(isset($_REQUEST['id'])) {
$id = $_REQUEST['id'];
echo $query = "update table set xyz='blah' where id='$id'";
echo "<br />";
}
?>Cheers,
Nav
Thanks Nav, you are always the solution of my every problem...
i tested this code, it is running very soomthly without any problem. i wana ask you 3 things, is it possible to pass more than one variable like in showUser(str, str1). secondly, how can we put php code (gethint.php) in the same php script file where the action being taken. At last how can we display message for intimating user.
again thanks for your valuable script.
regards
shuja
Yep. Its possible to send many variables to the function (as long as you have defined it in the function).
You can put gethint.php in your script by putting everything in a condition. That is, for example, set a variable &ajax=true. In your phpscript, check if $_GET is set and its true. If yes, execute this part of the code, else, continue with normal execution of the script.
echo the 'confirmation part' after you execute the query. (Just like how we are echo-ing the query here).
I am learning ajax ! So, its not my strong area yet ! :)
Thanks Nav, can you suggest me a sitem where i can get comprehensive solution...
Umm.. this is a logical solution and I don't think a website has an example.
Eg of what I was talking about.
<?php
if(isset($_REQUEST['ajax']) && $_REQUEST['ajax']=="true") {
echo "Executing ajax function.. ";
//implementing this script with your existing script
} else {
echo "Your actual script !";
//original script
}
?>Hey, this is something I've been searching for all day how to do, and this seems pretty much to be the solution.
Except...
I would like to have the value visible and change it without reloading the whole page.
Eg, I have a query that renders several values; NAME, EMAIL, INVOICED and so on.
INVOICED will have no value to start with, but I would like to add the value 'yes' to it, and also to be able to change the value from 'yes' to 'no', or from 'no' to 'yes', simply by clicking it (the actual word would be a link that also changes).
Any idea on how to do this?
All help would be much appreciated!
/André
Hi guys
How can the above code be modified for more than one variable? I'm sure this is simple!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.