Jump to content

Is this possible with AJAX?


lindm

Recommended Posts

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?

Link to comment
Share on other sites

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?

 

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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


?>

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.