editing with AJAX and PHP\mysql

Question

with plenty of visits i found helpful answers from all of you and hope this also give me some idea about my problem.

Basically i'm trying to edit mysql data with ajax. i have done with following code.

Step 1- i loaded data from server with following script

$("#editselected,#addselected").live("click", function(){
   var whatto=$(this).attr('id');var edit_ids = new Array();
   $(".selectable:checked").each(function() {
   edit_ids.push($(this).attr('name'));
    });
   $("#editadd").load("ajaxloads/addedit.php?idarray="+edit_ids+"&action="+whatto,Hide_Load());
   //centerPopup();//loadPopup();
     });

AND ITs Server DATA is

if($selectall_action=='editselected'){   ?>
    <table id="main" class="editallmainwidth">
    <thead>
    <tr>
    <th scope="col" >Vendor</th>
    <th scope="col" >ItemType</th>
    <th scope="col" >ItemCode</th>
    <th scope="col" >ItemName</th>
    <th scope="col" >SerialNo</th>
    <th scope="col" >AssetCode</th>
    <th scope="col" >Ownership</th>
    <th scope="col" >PO</th>
    </tr>
    </thead>
    <tbody>
    <?php
   $ids= split(",",$selectall_id_array);
foreach($ids as $sid)
{

$stock=mysql_query("select * FROM $region where id='$sid'");

            while($q=mysql_fetch_array($stock))
            {
    echo "<tr>";      

    echo "<td width=\"5%\"><input type='hidden' name='id_all' value='{$q[8]}' /><input type='text'  name='vend_all' value='$q[0]' /></td>";
    echo "<td width=\"5%\"><input type='text' name='type_all' value='$q[1]' /></td>";
    echo "<td width=\"8%\"><input type='text' name='code_all' value='$q[2]' /></td>";
    echo "<td width=\"20%\"><input type='text' name='desc_all' value='$q[3]' /></td>";
    echo "<td width=\"10%\"><input type='text' name='seno_all' value='$q[4]' /></td>";
    echo "<td width=\"5%\"><input type='text' name='acode_all' value='$q[5]' /></td>";
    echo "<td width=\"2%\"><input type='text' name='os_all' value='$q[9]' /></td>";
    echo "<td width=\"5%\"><input type='text' name='porder_all' value='$q[12]' />  </td>";

    echo "</tr>";
            }

     }  
     ?>
      </tbody>
      </table>
      <fieldset id="add">
            <input type="submit" id='editall' name="Modify" value="EditAll" />   </fieldset>

Step-2 Then I edited The loaded text boxes filled with server data and send back ajax request to server

$("#editall").live("click", function(){

    var id_alledit = new Array();
    var vendor_alledit = new Array();
    var type_alledit = new Array();
    var code_alledit = new Array();
    var desc_alledit = new Array();
    var seno_alledit = new Array();
    var acode_alledit = new Array();
    var os_alledit = new Array();
    var po_alledit = new Array();

    var isedited=$("#editall").val();



$("input[name='id_all']").map(function(index) {
id_alledit.push($(this).attr('value'));
});

var tcount=$("input[name='id_all']").length;

 $("input[name='vend_all']").map(function(index) {
vendor_alledit.push($(this).attr('value'));
 });


 $("input[name='type_all']").map(function(index) {
 type_alledit.push($(this).attr('value'));
 });

 $("input[name='code_all']").map(function(index) {
code_alledit.push($(this).attr('value'));
});

 $("input[name='desc_all']").map(function(index) {
 desc_alledit.push($(this).attr('value'));
 });

 $("input[name='seno_all']").map(function(index) {
 seno_alledit.push($(this).attr('value'));
});

$("input[name='acode_all']").map(function(index) {
acode_alledit.push($(this).attr('value'));
});
$("input[name='os_all']").map(function(index) {
os_alledit.push($(this).attr('value'));
});
 $("input[name='porder_all']").map(function(index) {
po_alledit.push($(this).attr('value'));
});



jQuery.ajax({
type:"POST",url:"ajaxloads/addedit.php",
data:"&id_arrays=" + id_alledit + "&vend_arrays=" + vendor_alledit + "&type_arrays=" +         type_alledit + "&code_arrays=" + code_alledit + "&desc_arrays=" + desc_alledit +   "&seno_arrays=" + seno_alledit + "&os_arrays=" + os_alledit + "&acode_arrays=" +   acode_alledit + "&po_arrays=" + po_alledit + "&ifedited=" + isedited + "&tcount=" + tcount  ,
      complete:function(data){


 //$("#main").load("ajaxloads/addedit.php",null,function(responseText){ 
 //$("#main").html(responseText);
//$('tr:even',this).addClass("odd");
   alert(data.responseText);
 //}); 

   }
 }); 

  //disablePopup(); 
   return false;
  });

AND Updation was done with the following server side code

if(isset($_POST[ifedited])=='EditAll')

{

$id_count= $_POST[tcount];
$idarray=split(",",$_POST[id_arrays]);
$vendarray=split(",",$_POST[vend_arrays]);
$typearray=split(",",$_POST[type_arrays]);
$codearray=split(",",$_POST[code_arrays]);
$descarray=split(",",$_POST[desc_arrays]);
$senoarray=split(",",$_POST[seno_arrays]);
$acodearray=split(",",$_POST[acode_arrays]);
$osarray=split(",",$_POST[os_arrays]);
$poarray=split(",",$_POST[po_arrays]);
//print_r($idarray);

       for($i=0;$i<=$id_count;$i++)
 {
 //echo $id_count;
 echo $idarray[$i];
 echo $typearray[$i];
 echo $vendarray[$i];
 echo $codearray[$i];
 echo $descarray[$i];
 echo $senoarray[$i];
 echo $acodearray[$i];
 echo $osarray[$i];
 echo $poarray[$i];

 mysql_query("update Query");



 }

    }

*Every thing working fine but it seems like steps for this are being used are quite lengthy and may cause a performance issue. i Need if some can suggest me a better way of doing all this. Or if JSON is better option? and if it is then how i can Creat A JSON with associative arrays.

Thanks*

Famver Tags · Accepted Answer · 2010-12-28 00:07:51Z

1

I reccomend you use JSON to do it. If you have a JSON returned like this

{
  "foo": "The quick brown fox jumps over the lazy dog.",
  "bar": "ABCDEFG",
  "baz": [52, 97]
}

Use jQuery to grab it like this

$.getJSON('ajax-mysql/json.php', function(data) {
  $('.result').html('<p>' + data.foo + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});

Update: Sending the data back to mysql. Javascript

var data = new Array();
data[0] = $("input1").val();
data[1] = $("input2").val();
data[2] = $("input3").val();

etc...

var mysql_field=new Array();
mysql_field[0] = 'field1';
mysql_field[1] = 'field2';
mysql_field[2] = 'field3';

var jq = new Array();
for(i=0;i<data.length;i++){jq[i] = mysql_field[i]+'=\''+data[i]+'\'';}
jq=jq.join('&');

you can replace data and mysql_field with the current variables you have. Now here's how you would update it with jQuery..

$(".submit").click(function(){
  $.post("/ajax-update.php",'"'+jq+'"',function (output){
    $("somediv").html(output); // the output on /ajax-update.php after data is submitted
  });
});

and on the ajax-update.php file you could use something like

$field[0] = $_POST['field1'];
$field[1] = $_POST['field2'];
$field[2] = $_POST['field2'];
$db->query_update("table",$field,"id=1"); //update where id=1

That query is how you would do it, using this great mysql wrapper class at http://www.ricocheting.com/code/php/mysql-database-class-wrapper. Check it out it'll make your life really easy. All you do is put this at the top of your php file

require("Database.class.php");
$db = new Database("server_name", "mysql_user", "mysql_pass", "mysql_database");

edited Dec 28, 2010 at 0:07

answered Dec 27, 2010 at 8:28

Famver Tags

1,9982 gold badges16 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Muhammad Haseeb Khan Over a year ago

Thanks for your urgent response, it seems like you are suggesting encoding in json through php and then creat html ? but how i will send back to server the edited arrays of data back to php? can please give simple example

Famver Tags Over a year ago

Yeah, thats what I was basically saying. Can you clarify more on what you want to send back to the mysql server.. Also, checkout php.net/manual/en/function.json-encode.php and php.net/manual/en/function.json-decode.php :)

Muhammad Haseeb Khan Over a year ago

send back to mysql means, as you know in my example i first loaded the page with ajax and data was stored in array of textbox in NAme And Value. From your idea of JSON what i understood that i will use $.getjson instead of Load. but after loading json in html element how i will iterate through each HTML element to creat same type of JSON and decode in PHP. In simple how i will creat a JSON of Edited value with its field name to use in update query. infact having no idea.

Famver Tags Over a year ago

So, are you going to update with ajax, after the values are edited. Or are you going to do it without ajax on the same page? If you're going to update the edited values with ajax, its fairly easy with JSON, if not.. then you don't even need JSON to do it.

Muhammad Haseeb Khan Over a year ago

ya sure i will use ajax. please can give me a little example to edit with JSON.

|

Mathias E. · Accepted Answer · 2010-12-27 08:36:50Z

0

for this question : "how i can Creat A JSON with associative arrays.". Try using the json_encode function.

You could also :

stop using the [deprecated] split function that uses regex and use the explode function.
use quotes on your array's call like here : $_POST[tcount] : $_POST['tcount']
while isset returns boolean, this test is quite weird : if(isset($_POST[ifedited])=='EditAll'){
stop using SELECT * FROM ... but write SELECT field1, field2 FROM ....
add a third parameter to this call : mysql_fetch_array($stock, MYSQL_NUM)
here :

foreach($ids as $sid) {

$stock=mysql_query("select * FROM $region where id='$sid'");

try using the IN operator of the WHERE clause to avoid multi-queries.

Your code is very difficult to read because not well parsed but still, there are lots of improvements that should affect performances ...

answered Dec 27, 2010 at 8:36

Mathias E.

4713 silver badges5 bronze badges

1 Comment

Muhammad Haseeb Khan Over a year ago

thanks for your helpful improvements. But here my concentration have been graped by JSON that seems little simple. i wish if someone can give me little idea how to convert my existing code in JSON

Collectives™ on Stack Overflow

editing with AJAX and PHP\mysql

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related