Link to home
Start Free TrialLog in
Avatar of bathazar
bathazar

asked on

Delete and Edit a row in mysql with Ajax using php

I have a list of Article. And I want to use Ajax to Edit and Delete it.

Example: If i click edit button. It will show the form to edit the article. And when i submit the form it will updated without refresh page. And if i click delete button it will delete that aticle content in database and remove table row in the article list.

Thanks for ur help !
ASKER CERTIFIED SOLUTION
Avatar of askanthonys
askanthonys

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of bathazar
bathazar

ASKER

Your Solution is exellent. But your code is contain many error. Such as MySQL Syntax Error or in this code:

Please test your code and sent it againt. U helped so much. Thanks u and happy new year !
wow I had a lot of errors...

heres the fixed code:


index.php {


<script type="text/javascript" language="javascript">

var rowShow=(document.all?'block':'table-row');

function editarticle() {

document.getElementById('edit').style.display = "none";
document.getElementById('doneediting').style.display = rowShow;
document.getElementById('deletearticle').style.display = rowShow;
document.getElementById('articletextbox').style.display = rowShow;
document.getElementById('articletextbox').value = document.getElementById('contentdiv').innerHTML;
document.getElementById('contentdiv').style.display="none";
document.getElementById('contentdiv').innerHTML = "";

}

function doneediting() {



var xmlhttp = false;
     if (window.XMLHttpRequest) {
               xmlhttp = new XMLHttpRequest();
               xmlhttp.overrideMimeType('text/xml');
     } else if (window.ActiveXObject) {
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }

     xmlhttp.open('GET', 'editarticle.php?articleid=<? echo $_GET['articleid']; ?>&contents='+document.getElementById("articletextbox").value , true);
     xmlhttp.onreadystatechange = function() {
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         
document.getElementById('contentdiv').innerHTML = document.getElementById('articletextbox').value;
document.getElementById('contentdiv').style.display=rowShow;
document.getElementById('articletextbox').style.display="none";
document.getElementById('doneediting').style.display="none";
document.getElementById('deletearticle').style.display ="none";
document.getElementById('edit').style.display = rowShow;
document.getElementById('articletextbox').value = "";
}
     };
     xmlhttp.send(null);

}






function deletearticle(articleid) {

x = confirm("Are you sure you want to delete this article?");

if(x) {
document.getElementById('edit').style.display="none";
document.getElementById('articletextbox').style.display="none";
document.getElementById('doneediting').style.display="none";
document.getElementById('deletearticle').style.display ="none";
document.getElementById('contentdiv').style.display=rowShow;
document.getElementById('contentdiv').innerHTML = "Article Deleted!";
document.getElementById('articletextbox').value="";

var xmlhttp = false;
     if (window.XMLHttpRequest) {
               xmlhttp = new XMLHttpRequest();
               xmlhttp.overrideMimeType('text/xml');
     } else if (window.ActiveXObject) {
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }

     xmlhttp.open('GET', 'deletearticle.php?articleid='+articleid, true);
     xmlhttp.onreadystatechange = function() {
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          }
     };
     xmlhttp.send(null);

}



}







</script>


<?php


// $username AND $password AND $db AND $tablename AND $datacolname AND $idcolname NEED TO BE SET
mysql_connect("localhost", $username, $password) or die(mysql_error());
mysql_select_db($db) or die(mysql_error());

$articleid= mysql_real_escape_string($_GET['articleid']);

$result = mysql_query("SELECT * FROM ".$tablename." WHERE ".$idcolname." = '$articleid' ")
or die(mysql_error());

$row = mysql_fetch_array( $result );
// Print out the contents of the entry

echo "<div id=\"contentdiv\" name=\"contentdiv\">";
echo $row[$datacolname];
echo '</div>';
echo "<textarea id=\"articletextbox\" name=\"articletextbox\" rows=\"50\" cols=\"200\" style=\"display:none;\"></textarea>";
echo "<br><input type=\"button\" id=\"edit\" name=\"edit\" onclick=\"editarticle();\" value=\"Edit Article\">";
echo "<input type=\"button\" onclick=\"doneediting('".$_GET['articleid']."');\" id=\"doneediting\" value=\"Done Editing\" name=\"doneediting\" style=\"display:none;\">";
echo "<input type=\"button\" onclick=\"deletearticle('".$_GET['articleid']."');\" id=\"deletearticle\" value=\"Delete Article\" name=\"deletearticle\" style=\"display:none;\">";
?>
















}

deletearticle.php {




<?



// $username AND $password AND $db AND $tablename AND $datacolname AND $idcolname NEED TO BE SET
mysql_connect("localhost", $username, $password) or die(mysql_error());
mysql_select_db($db) or die(mysql_error());

$articleid = mysql_real_escape_string($_GET['articleid']);

mysql_query("DELETE FROM ".$tablename." WHERE ".$idcolname."='$articleid'")
or die(mysql_error());


?>






}


editarticle.php {



<?



// $username AND $password AND $db AND $tablename AND $datacolname AND $idcolname NEED TO BE SET
mysql_connect("localhost", $username, $password) or die(mysql_error());
mysql_select_db($db) or die(mysql_error());
$articleid = mysql_real_escape_string($_GET['articleid']);

$data = mysql_real_escape_string($_GET['contents']);

$result = mysql_query("UPDATE ".$tablename." SET ".$datacolname."='$data' WHERE ".$idcolname."='$articleid'")
or die(mysql_error());

echo "<b> UPDATE SUCCESSFUL </b>";

?>


}





I seem to have come upon a problem:

the article cannot contain these tags : </div> or </textarea>

if you need me to fix it I will try my best



also this should only be for administrators because it is probably vulnerable to sql injection
By administrators I mean that regular users should not have access to it
- Can u have a Demo ? I still have many error

- If i open index.php file. I can't have any result because the script cannot find the query string variable is "articleid".

- If i del this (WHERE ".$idcolname." = '$articleid') i have a list of article and a button edit. When i click into the edit button it show the content of article and i can edit it. But i cannot update or delete it :(

- Can u fix it for me ?

- Thanks u very much. Nice help :)
I have a test running just fine for me on my server (tested in firefox and ie)

on index.php you must specify in the top like index.php?articleid=1

if you dont want to add the articles in manually you can just press edit and type something and save it






do you want to be able to edit all the articles on one page not specified by the query string?

like you just open up index.php and it lists like this:

article1:

This is article 1 this is some text that takes up some space.

[edit]

article2:

This is article 2 this is some text that takes up some space

[edit]

article3:

This is article 3 this is some text that takes up some space

[edit]

etc.

???


- Yeah... I want to edit all article in the list page. So i need u help again...

- Thanks u very much. Nice help :)
ok Ill go get to work on that

prolly take me about 5-10 more minutes
all I changed was the index and the delete page so here they are:


index.php {


<script type="text/javascript" language="javascript">

var rowShow=(document.all?'block':'table-row');

function editarticle(editbutton, doneeditingbutton,deletearticlebutton,thearticletextbox,thecontentdiv) {

document.getElementById(editbutton).style.display = "none";
document.getElementById(doneeditingbutton).style.display = rowShow;
document.getElementById(deletearticlebutton).style.display = rowShow;
document.getElementById(thearticletextbox).style.display = rowShow;
document.getElementById(thearticletextbox).value = document.getElementById(thecontentdiv).innerHTML;
document.getElementById(thecontentdiv).style.display="none";
document.getElementById(thecontentdiv).innerHTML = "";
}

function doneediting(editbutton, doneeditingbutton,deletearticlebutton,thearticletextbox,thecontentdiv, thearticleid) {

var xmlhttp = false;
     if (window.XMLHttpRequest) {
               xmlhttp = new XMLHttpRequest();
               xmlhttp.overrideMimeType('text/xml');
     } else if (window.ActiveXObject) {
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }

     xmlhttp.open('GET', 'editarticle.php?articleid='+thearticleid+'&contents='+document.getElementById(thearticletextbox).value , true);
     xmlhttp.onreadystatechange = function() {
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         
document.getElementById(thecontentdiv).innerHTML = document.getElementById(thearticletextbox).value;
document.getElementById(thecontentdiv).style.display=rowShow;
document.getElementById(thearticletextbox).style.display="none";
document.getElementById(doneeditingbutton).style.display="none";
document.getElementById(deletearticlebutton).style.display ="none";
document.getElementById(editbutton).style.display = rowShow;
document.getElementById(thearticletextbox).value = "";
}
     };
     xmlhttp.send(null);
}

function deletearticle(editbutton, doneeditingbutton,deletearticlebutton,thearticletextbox,thecontentdiv,articleid) {

x = confirm("Are you sure you want to delete this article?");

if(x) {
document.getElementById(editbutton).style.display="none";
document.getElementById(thearticletextbox).style.display="none";
document.getElementById(doneeditingbutton).style.display="none";
document.getElementById(deletearticlebutton).style.display ="none";
document.getElementById(thecontentdiv).style.display=rowShow;
document.getElementById(thecontentdiv).innerHTML = "Article Deleted!";
document.getElementById(thearticletextbox).value="";

var xmlhttp = false;
     if (window.XMLHttpRequest) {
               xmlhttp = new XMLHttpRequest();
               xmlhttp.overrideMimeType('text/xml');
     } else if (window.ActiveXObject) {
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }

     xmlhttp.open('GET', 'deletearticle.php?articleid='+articleid, true);
     xmlhttp.onreadystatechange = function() {
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          }
     };
     xmlhttp.send(null);
}
}
</script>

<?php

$username = "jacware_ipnow";
$password = "asdfipnow";
$db = "jacware_ipnow";
$tablename = "articles";
$datacolname = "data";
$idcolname = "articleid";

// $username AND $password AND $db AND $tablename AND $datacolname AND $idcolname NEED TO BE SET
mysql_connect("localhost", $username, $password) or die(mysql_error());
mysql_select_db($db) or die(mysql_error());

$result = mysql_query("SELECT * FROM ".$tablename."")
or die(mysql_error());
while($row = mysql_fetch_array( $result )) {
// Print out the contents of the entry
echo "<div id=\"contentdiv".$row[$idcolname]."\" name=\"contentdiv".$row[$idcolname]."\">";
echo $row[$datacolname];
echo '</div>';
echo "<textarea id=\"articletextbox".$row[$idcolname]."\" name=\"articletextbox".$row[$idcolname]."\" rows=\"50\" cols=\"200\" style=\"display:none;\"></textarea>";
echo "<br><input type=\"button\" id=\"edit".$row[$idcolname]."\" name=\"edit".$row[$idcolname]."\" onclick=\"editarticle('edit".$row[$idcolname]."','doneediting".$row[$idcolname]."','deletearticle".$row[$idcolname]."','articletextbox".$row[$idcolname]."','contentdiv".$row[$idcolname]."');\" value=\"Edit Article\">";
echo "<input type=\"button\" onclick=\"doneediting('edit".$row[$idcolname]."','doneediting".$row[$idcolname]."','deletearticle".$row[$idcolname]."','articletextbox".$row[$idcolname]."','contentdiv".$row[$idcolname]."','".$row[$idcolname]."');\" id=\"doneediting".$row[$idcolname]."\" value=\"Done Editing\" name=\"doneediting".$row[$idcolname]."\" style=\"display:none;\">";
echo "<input type=\"button\" onclick=\"deletearticle('edit".$row[$idcolname]."','doneediting".$row[$idcolname]."','deletearticle".$row[$idcolname]."','articletextbox".$row[$idcolname]."','contentdiv".$row[$idcolname]."','".$row[$idcolname]."');\" id=\"deletearticle".$row[$idcolname]."\" value=\"Delete Article\" name=\"deletearticle".$row[$idcolname]."\" style=\"display:none;\">";

}
?>


}


deletearticle.php {



<?


// $username AND $password AND $db AND $tablename AND $datacolname AND $idcolname NEED TO BE SET
mysql_connect("localhost", $username, $password) or die(mysql_error());
mysql_select_db($db) or die(mysql_error());

$articleid = mysql_real_escape_string($_GET['articleid']);

mysql_query("DELETE FROM ".$tablename." WHERE ".$idcolname."='$articleid'")
or die(mysql_error());

echo "<b>article deleted</b>";

?>


}


should work now
Yeah !!! I can delete it. But i still can't Update it !!
Perhaps it can received Article ID but it can't receive Article Conten :)
It worked for me.


I am not sure what the problem could be.

if you have firefox will you check if the javascript console says?



what exactly is it doing?

where does it get "stuck"?
- It worked for me. I changed editarticle.php file so it does not work :)

- Thanks for your help.

- That code help me a lot for my work.

- Did you think about use <div><textarea> in that code. I think if u finish it, it will be a excellent code :)

- Anyway. Thank ur help.
Your ever so welcome

What about the <div> <textarea>?

I thought of that sorta idea if thats what you mean