lindm Posted September 15, 2008 Share Posted September 15, 2008 Looking for two simple (hopefully) ajax scripts that: Script 1: Submits ALL form elements found on a html page in the background and updates a mysql-database with the data. Script 2: Retrieves ALL fields from the mysql-database and updates the corresponding form elements (same name as mysql field) on the html page. Been looking around but haven't found any spot on solutions. Anyone seen this somewhere? Quote Link to comment Share on other sites More sharing options...
Mchl Posted September 15, 2008 Share Posted September 15, 2008 That's what AJAX is for, so yes it is possible. Quote Link to comment Share on other sites More sharing options...
lindm Posted September 16, 2008 Author Share Posted September 16, 2008 Alright got it. Been looking around but seem only to find simple ajax routines where the contents of one div is updated. What I am looking for is: Htmlpage: 20 form elements Mysql-database: 20 fields corresponding to the form elements Php-script: gets data from mysql User clicks update button in htmlpage. Ajax gets data from via php-script from mysql-database and updates all form fields on the htmlpage. Can anyone point me to an example? Quote Link to comment Share on other sites More sharing options...
Mchl Posted September 16, 2008 Share Posted September 16, 2008 I use ExtJS library for such things. There should be some examples on their website. Quote Link to comment Share on other sites More sharing options...
markjoe Posted September 16, 2008 Share Posted September 16, 2008 If you take care in naming your fields in the data base and html page, this should be fairly easy. In the readystatechange handler, you can use the data passed form PHP to update the elements in the page. So PHP returns the name and value of each database field. Javascript uses the name to address the proper HTML element and update it with it's data. I not sure if I'm explaining well enough... Quote Link to comment Share on other sites More sharing options...
lindm Posted September 16, 2008 Author Share Posted September 16, 2008 I learn a lot from code examples on the web. Any good sources for what I am looking for? Quote Link to comment Share on other sites More sharing options...
markjoe Posted September 16, 2008 Share Posted September 16, 2008 I may have an example to show, if I can find it at home. Let's see if I can make one up on the fly for now. This will be very minimal as I assume you already know how to set a query based on $_GET input, and similar basic tasks. php: <?php $R=mysql_query("select * from my_data"); while($D=mysql_fetch_assoc($R)){ echo "datum1^".$D['datum1']."|datum2^".$D['datum2']."~"; } ?> JavaScript: var X=new XMLHttpRequest(); X.open('get',page.php?var1='+val1); X.onreadystatechange=function(){ if(X.readyState==4 && X.responseText){ var allRows=X.responseText.split("~"); for(var i=0; i<allRows.length; i++){ var allFields=allRows[i].split("|"); for(var j=0; j<allFields.length; j++){ var oneField=allFields[j].split("^"); document.getElementById(oneField[0]+'Tag').innerHTML+=oneField[1]; } } } }; X.send(null); HTML: <input type='text' id='datum1Tag' /> <input type='text' id='datum2Tag' /> I have used this method a few times, and it has worked fine so far. I believe this may be basically what JSON is doing, but I have yet to look into JSON. My opinion on ExtJS is that you may have an easier time building from scratch rather than understanding their API. I had to maintain an Intranet tool that used it and I hated it entirely. Quote Link to comment Share on other sites More sharing options...
lindm Posted September 16, 2008 Author Share Posted September 16, 2008 Alright getting off to a beginning here. Trying to make your code snippet work with existing simple ajax code. No go so far. HTML <!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>Untitled Document</title> <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function ajaxRequest(){ var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) for (var i=0; i<activexmodes.length; i++){ try{ return new ActiveXObject(activexmodes[i]) } catch(e){ //suppress error } } } else if (window.XMLHttpRequest) // if Mozilla, Safari etc return new XMLHttpRequest() else return false } //--> </script> </head> <body> <script language="javascript" type="text/javascript"> function ajaxpost(){ var X=new ajaxRequest(); X.open('get',ajax.php); X.onreadystatechange=function(){ if(X.readyState==4 && X.responseText){ var allRows=X.responseText.split("~"); for(var i=0; i<allRows.length; i++){ var allFields=allRows[i].split("|"); for(var j=0; j<allFields.length; j++){ var oneField=allFields[j].split("^"); document.getElementById(oneField[0]+'Tag').innerHTML+=oneField[1]; } } } }; X.send(null); } //--> </script> <form id="form1" name="form1" method="post" action=""> <input type="text" name="1" id="1" /> <br /> <input type="text" name="2" id="2" /> <input type="button" name="button" id="button" value="Load" onClick="ajaxpost();" /> </form> <br /> </body> </html> PHP <?php echo '1^1|2^2~'; ?> Quote Link to comment Share on other sites More sharing options...
markjoe Posted September 16, 2008 Share Posted September 16, 2008 Woops, i used input tags and innerHTML, Booo. .innerHTML should be .value I'll try to take a closer look in a bit. Quote Link to comment Share on other sites More sharing options...
markjoe Posted September 16, 2008 Share Posted September 16, 2008 The input tag IDs were wrong, (missing the 'Tag' part of the name). ajax.php was not quoted in open(). Changed to .value instead of the very wrong .innerHTML (that is for DIV, TD, etc tags) Added a check for the last always blank value of allData array. <!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>Untitled Document</title> <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function ajaxRequest(){ var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) for (var i=0; i<activexmodes.length; i++){ try{ return new ActiveXObject(activexmodes[i]) } catch(e){ //suppress error } } } else if (window.XMLHttpRequest) // if Mozilla, Safari etc return new XMLHttpRequest() else return false } //--> </script> </head> <body> <script language="javascript" type="text/javascript"> function ajaxpost(){ var X=new ajaxRequest(); X.open('get','ajax.php'); X.onreadystatechange=function(){ if(X.readyState==4 && X.responseText){ var allRows=X.responseText.split("~"); for(var i=0; i<allRows.length; i++){ if(allRows[i]){ var allFields=allRows[i].split("|"); for(var j=0; j<allFields.length; j++){ var oneField=allFields[j].split("^"); document.getElementById(oneField[0]+'Tag').value+=oneField[1]; } } } } }; X.send(null); } //--> </script> <form id="form1" name="form1" method="post" action=""> <input type="text" name="1" id="1Tag" /> <br /> <input type="text" name="2" id="2Tag" /> <input type="button" name="button" id="button" value="Load" onClick="ajaxpost();" /> </form> <br /> </body> </html> Quote Link to comment Share on other sites More sharing options...
lindm Posted September 17, 2008 Author Share Posted September 17, 2008 Works now! Will fiddle a bit more with mysql etc. Is there a simple script to submit a form in the background? Quote Link to comment Share on other sites More sharing options...
lindm Posted September 17, 2008 Author Share Posted September 17, 2008 Alright so next problem regarding the script above. The array from a mysql query is in the format: Array ( [0] => Value [field] => Value [field2] etc) Is the best way to change the javascripts way to read the array or change the array in php to suit the javascripts way to read the array? Quote Link to comment Share on other sites More sharing options...
markjoe Posted September 17, 2008 Share Posted September 17, 2008 You should change which ever end you feel more comfortable coding (PHP or JavaScript). What function are you using to fetch results, mysql_fetch_row() or mysql_fetch_assoc()? In order to make this work properly, you must use mysql_fetch_assoc(), so that you can pass the column names on properly. Quote Link to comment Share on other sites More sharing options...
CroNiX Posted September 17, 2008 Share Posted September 17, 2008 Aint it great when php has a command to do this for you? http://us.php.net/json_encode Quote Link to comment Share on other sites More sharing options...
lindm Posted September 17, 2008 Author Share Posted September 17, 2008 Alright json_encode seems to help As fairly new to php, is this ok scripting to strip the array to a string easy readable by the javascript? $result='{"field1":"5","field2":"6"}'; //array from query $stripresult=str_replace('"', '', $result); $stripresult2=str_replace('{', '', $stripresult); $stripresult3=str_replace('}', '', $stripresult2); echo $stripresult3; My spontaneuous guess is what if a field contains a " ?? 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.