Is this possible with AJAX?

lindm · 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?

Mchl · September 15, 2008

That's what AJAX is for, so yes it is possible.

lindm · 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?

Mchl · September 16, 2008

I use ExtJS library for such things. There should be some examples on their website.

markjoe · 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...

lindm · September 16, 2008

I learn a lot from code examples on the web. Any good sources for what I am looking for?

markjoe · 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.

lindm · 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~';


?>

markjoe · 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.

markjoe · 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>

lindm · 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?

lindm · 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?

markjoe · 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.

CroNiX · September 17, 2008

Aint it great when php has a command to do this for you?

http://us.php.net/json_encode

lindm · 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 " ??

Sign In

Is this possible with AJAX?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information