arbitter Posted March 14, 2011 Share Posted March 14, 2011 Hi there, After many attempts to learn ajax but never understanding the concept, I've finally gotten myself to partially understand it all, and I've made my first snippet, yet it doesn't work quite yet. the HTML with AJAX: <?php session_start(); setlocale(LC_ALL, 'nl_NL'); require_once('mysql_connect.inc.php'); date_default_timezone_set('Europe/Brussels'); $verbinding = mysql_connect(MYSQL_SERVER, MYSQL_GEBRUIKERSNAAM, MYSQL_WACHTWOORD) or die("Verbinding mislukt: " . mysql_error()); ?> <script type="text/javascript"> function update(description) { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("POST","ajaxsave.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send(description); } </script> <html> <body> <?php mysql_select_db('test'); $result = mysql_query("SELECT * FROM ajax"); while($row = mysql_fetch_array($result)){echo "Afbeelding: " . $row['photoid'] . $row['type'] . "<br /><br /><form name='MyForm'><input id='description' type='text' name='" . $row['photoid'] . "' value='" . $row['description'] . "'><input type='button' onclick=\"update(getElementById('description').value)\" value='sla op' /></form><hr>";} ?> </body> </html> So this code creates a simple form, with an input field that has the value of the description of the image displayed. (And yes I am aware there is no image displayed, it's the tthought that counts). The images and descriptions are all taken from a database. Now, the POST should take the content in the input field completely and send this to the php file. I think it is here that my mistake is somewhere, but sites use the GET method more yet it seems safer for me to use the POST method (correct me if I'm wrong) The php file it refers to isn't that complicated, the only trouble I have there is to retrieve the POST (if it is correctly sent). Not sure whether this is correct: <?php $description = $_POST['description']; ?> Another problem I have is to return a value from the php file. Not quite sure how to do that (for example a confirmation message if it is posted correctly) I hope I'm being clear here, and I hope it isn't a stupid thingy. I'm not a javascript/ajax hero just yet. Thanks in advance. Quote Link to comment Share on other sites More sharing options...
arbitter Posted March 14, 2011 Author Share Posted March 14, 2011 Can't seem to edit my original post... Anyhow, I fixed it, all by myself! Here's the code: <script type="text/javascript"> function update(description) { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } var parameters = 'description=' + description + '&id=' + '1'; xmlhttp.open("POST","ajaxsave.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send(parameters); } </script> <html> <body> <?php mysql_select_db('test'); $result = mysql_query("SELECT * FROM ajax"); while($row = mysql_fetch_array($result)){echo "Afbeelding: " . $row['photoid'] . $row['type'] . "<br /><br /><form name='MyForm'><input id='description' type='text' name='" . $row['photoid'] . "' value='" . $row['description'] . "'><input type='button' onclick=\"update(getElementById('description').value)\" value='sla op' /></form><hr>";} echo "<div id='myDiv'></div>"; ?> </body> </html> I've also fixed how it can return something. Now for the next problem; how do I send multiple variables? I want the onclick that currently does update(getElementById('description').value) to also send the value of the id to the script... So I need the value of the id that is accompanied with the description that's being changed... Quote Link to comment Share on other sites More sharing options...
arbitter Posted March 14, 2011 Author Share Posted March 14, 2011 SECOND EDIT Allright I fixed the issue of getting the photoid. Simply added the php variable Currently the script and form looks like this: <script type="text/javascript"> function update(description,photoid) { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } var parameters = 'description=' + description + '&photoid=' + photoid; xmlhttp.open("POST","ajaxsave.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send(parameters); } </script> <html> <body> <?php mysql_select_db('test'); $result = mysql_query("SELECT * FROM ajax"); while($row = mysql_fetch_array($result)){echo "Afbeelding: " . $row['photoid'] . $row['type'] . "<br /><br /><form name='MyForm'><input id='description' type='text' name='" . $row['photoid'] . "' value='" . $row['description'] . "'><input type='button' onclick=\"update(getElementById('description').value," . $row['photoid'] . ")\" value='sla op' /></form><hr>";} echo "<div id='myDiv'></div>"; ?> </body> </html> and my php file: <?php session_start(); setlocale(LC_ALL, 'nl_NL'); require_once('mysql_connect.inc.php'); date_default_timezone_set('Europe/Brussels'); $verbinding = mysql_connect(MYSQL_SERVER, MYSQL_GEBRUIKERSNAAM, MYSQL_WACHTWOORD) or die("Verbinding mislukt: " . mysql_error()); $description = $_POST['description']; $photoid = $_POST['photoid']; mysql_select_db('test'); mysql_query("UPDATE ajax SET description='".$description."' WHERE photoid='".$photoid."'"); echo $description; ?> I am aware that there aren't any filters currently, but as I said, it's purely testing purposes. Now the last problem. Currently it always takes the first ID, so the ID of whom I press the change button, that just changes that ID's description to the same description as the first ID. If you look at the code it's logical. But how do I change this? I can't change the ID because it would change everywhere, and adding another var doesn't do the trick eather... Quote Link to comment Share on other sites More sharing options...
arbitter Posted March 15, 2011 Author Share Posted March 15, 2011 Allrighty me again, I've fixed that issue too! I just gave the input a name field containing the photoid that get's passed as well to the php file. It all works. My responses even go directly next to the correct inputfield! Here's the code another time: ajax.php <?php session_start(); setlocale(LC_ALL, 'nl_NL'); require_once('mysql_connect.inc.php'); date_default_timezone_set('Europe/Brussels'); $verbinding = mysql_connect(MYSQL_SERVER, MYSQL_GEBRUIKERSNAAM, MYSQL_WACHTWOORD) or die("Verbinding mislukt: " . mysql_error()); ?> <script type="text/javascript"> function update(description,photoid) { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById(photoid).innerHTML=xmlhttp.responseText; } } var parameters = 'description=' + description + '&photoid=' + photoid; xmlhttp.open("POST","ajaxsave.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send(parameters); } </script> <html> <body> <?php mysql_select_db('test'); $result = mysql_query("SELECT * FROM ajax"); while($row = mysql_fetch_array($result)){ echo "Afbeelding: " . $row['photoid'] . $row['type'] . "<br /><br /><form name='MyForm'><input id='description' type='text' name='" . $row['photoid'] . "' value='" . $row['description'] . "'><input type='button' onclick=\"update(getElementsByName('".$row['photoid']."')[0].value," . $row['photoid'] . ")\" value='sla op' /></form>"; echo "<div id='".$row['photoid']."'></div>"; echo "<hr>"; } ?> </body> </html> ajaxsave.php <?php session_start(); setlocale(LC_ALL, 'nl_NL'); require_once('mysql_connect.inc.php'); date_default_timezone_set('Europe/Brussels'); $verbinding = mysql_connect(MYSQL_SERVER, MYSQL_GEBRUIKERSNAAM, MYSQL_WACHTWOORD) or die("Verbinding mislukt: " . mysql_error()); $description = $_POST['description']; $photoid = $_POST['photoid']; mysql_select_db('test'); mysql_query("UPDATE ajax SET description='".$description."' WHERE photoid='".$photoid."'"); echo 'Dit is succesvol opgeslagen!'; ?> Quote Link to comment Share on other sites More sharing options...
Imaulle Posted March 15, 2011 Share Posted March 15, 2011 you really seem to know what you are doing perhaps you could help point me in the right direction here - http://www.phpfreaks.com/forums/index.php?topic=326310.0 ;) Quote Link to comment Share on other sites More sharing options...
arbitter Posted March 15, 2011 Author Share Posted March 15, 2011 you really seem to know what you are doing perhaps you could help point me in the right direction here - http://www.phpfreaks.com/forums/index.php?topic=326310.0 ;) I'm sorry kind sir, I have nought knowledge about flash, and my javascript is very poor as well. I've read the topic, but I havn't got a clue how to help you Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.