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 !
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
wow I had a lot of errors...
heres the fixed code:
index.php {
<script type="text/javascript" language="javascript">
var rowShow=(document.all?'blo ck':'table -row');
function editarticle() {
document.getElementById('e dit').styl e.display = "none";
document.getElementById('d oneediting ').style.d isplay = rowShow;
document.getElementById('d eleteartic le').style .display = rowShow;
document.getElementById('a rticletext box').styl e.display = rowShow;
document.getElementById('a rticletext box').valu e = document.getElementById('c ontentdiv' ).innerHTM L;
document.getElementById('c ontentdiv' ).style.di splay="non e";
document.getElementById('c ontentdiv' ).innerHTM L = "";
}
function doneediting() {
var xmlhttp = false;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType(' text/xml') ;
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.X MLHTTP");
}
xmlhttp.open('GET', 'editarticle.php?articleid =<? echo $_GET['articleid']; ?>&contents='+document.get ElementByI d("article textbox"). value , true);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('c ontentdiv' ).innerHTM L = document.getElementById('a rticletext box').valu e;
document.getElementById('c ontentdiv' ).style.di splay=rowS how;
document.getElementById('a rticletext box').styl e.display= "none";
document.getElementById('d oneediting ').style.d isplay="no ne";
document.getElementById('d eleteartic le').style .display ="none";
document.getElementById('e dit').styl e.display = rowShow;
document.getElementById('a rticletext box').valu e = "";
}
};
xmlhttp.send(null);
}
function deletearticle(articleid) {
x = confirm("Are you sure you want to delete this article?");
if(x) {
document.getElementById('e dit').styl e.display= "none";
document.getElementById('a rticletext box').styl e.display= "none";
document.getElementById('d oneediting ').style.d isplay="no ne";
document.getElementById('d eleteartic le').style .display ="none";
document.getElementById('c ontentdiv' ).style.di splay=rowS how;
document.getElementById('c ontentdiv' ).innerHTM L = "Article Deleted!";
document.getElementById('a rticletext box').valu e="";
var xmlhttp = false;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType(' text/xml') ;
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.X MLHTTP");
}
xmlhttp.open('GET', 'deletearticle.php?article id='+artic leid, 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['arti cleid']);
$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['arti cleid']."' );\" id=\"doneediting\" value=\"Done Editing\" name=\"doneediting\" style=\"display:none;\">";
echo "<input type=\"button\" onclick=\"deletearticle('" .$_GET['ar ticleid']. "');\" 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['arti cleid']);
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['arti cleid']);
$data = mysql_real_escape_string($ _GET['cont ents']);
$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
heres the fixed code:
index.php {
<script type="text/javascript" language="javascript">
var rowShow=(document.all?'blo
function editarticle() {
document.getElementById('e
document.getElementById('d
document.getElementById('d
document.getElementById('a
document.getElementById('a
document.getElementById('c
document.getElementById('c
}
function doneediting() {
var xmlhttp = false;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType('
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.X
}
xmlhttp.open('GET', 'editarticle.php?articleid
xmlhttp.onreadystatechange
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('c
document.getElementById('c
document.getElementById('a
document.getElementById('d
document.getElementById('d
document.getElementById('e
document.getElementById('a
}
};
xmlhttp.send(null);
}
function deletearticle(articleid) {
x = confirm("Are you sure you want to delete this article?");
if(x) {
document.getElementById('e
document.getElementById('a
document.getElementById('d
document.getElementById('d
document.getElementById('c
document.getElementById('c
document.getElementById('a
var xmlhttp = false;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType('
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.X
}
xmlhttp.open('GET', 'deletearticle.php?article
xmlhttp.onreadystatechange
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",
mysql_select_db($db) or die(mysql_error());
$articleid= mysql_real_escape_string($
$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;\"></
echo "<br><input type=\"button\" id=\"edit\" name=\"edit\" onclick=\"editarticle();\"
echo "<input type=\"button\" onclick=\"doneediting('".$
echo "<input type=\"button\" onclick=\"deletearticle('"
?>
}
deletearticle.php {
<?
// $username AND $password AND $db AND $tablename AND $datacolname AND $idcolname NEED TO BE SET
mysql_connect("localhost",
mysql_select_db($db) or die(mysql_error());
$articleid = mysql_real_escape_string($
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",
mysql_select_db($db) or die(mysql_error());
$articleid = mysql_real_escape_string($
$data = mysql_real_escape_string($
$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
ASKER
- 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 :)
- 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.
???
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.
???
ASKER
- Yeah... I want to edit all article in the list page. So i need u help again...
- Thanks u very much. Nice help :)
- Thanks u very much. Nice help :)
ok Ill go get to work on that
prolly take me about 5-10 more minutes
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?'blo ck':'table -row');
function editarticle(editbutton, doneeditingbutton,deletear ticlebutto n,theartic letextbox, thecontent div) {
document.getElementById(ed itbutton). style.disp lay = "none";
document.getElementById(do needitingb utton).sty le.display = rowShow;
document.getElementById(de letearticl ebutton).s tyle.displ ay = rowShow;
document.getElementById(th earticlete xtbox).sty le.display = rowShow;
document.getElementById(th earticlete xtbox).val ue = document.getElementById(th econtentdi v).innerHT ML;
document.getElementById(th econtentdi v).style.d isplay="no ne";
document.getElementById(th econtentdi v).innerHT ML = "";
}
function doneediting(editbutton, doneeditingbutton,deletear ticlebutto n,theartic letextbox, thecontent div, thearticleid) {
var xmlhttp = false;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType(' text/xml') ;
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.X MLHTTP");
}
xmlhttp.open('GET', 'editarticle.php?articleid ='+thearti cleid+'&co ntents='+d ocument.ge tElementBy Id(thearti cletextbox ).value , true);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(th econtentdi v).innerHT ML = document.getElementById(th earticlete xtbox).val ue;
document.getElementById(th econtentdi v).style.d isplay=row Show;
document.getElementById(th earticlete xtbox).sty le.display ="none";
document.getElementById(do needitingb utton).sty le.display ="none";
document.getElementById(de letearticl ebutton).s tyle.displ ay ="none";
document.getElementById(ed itbutton). style.disp lay = rowShow;
document.getElementById(th earticlete xtbox).val ue = "";
}
};
xmlhttp.send(null);
}
function deletearticle(editbutton, doneeditingbutton,deletear ticlebutto n,theartic letextbox, thecontent div,articl eid) {
x = confirm("Are you sure you want to delete this article?");
if(x) {
document.getElementById(ed itbutton). style.disp lay="none" ;
document.getElementById(th earticlete xtbox).sty le.display ="none";
document.getElementById(do needitingb utton).sty le.display ="none";
document.getElementById(de letearticl ebutton).s tyle.displ ay ="none";
document.getElementById(th econtentdi v).style.d isplay=row Show;
document.getElementById(th econtentdi v).innerHT ML = "Article Deleted!";
document.getElementById(th earticlete xtbox).val ue="";
var xmlhttp = false;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType(' text/xml') ;
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.X MLHTTP");
}
xmlhttp.open('GET', 'deletearticle.php?article id='+artic leid, 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[$idc olname]."\ " name=\"contentdiv".$row[$i dcolname]. "\">";
echo $row[$datacolname];
echo '</div>';
echo "<textarea id=\"articletextbox".$row[ $idcolname ]."\" name=\"articletextbox".$ro w[$idcolna me]."\" rows=\"50\" cols=\"200\" style=\"display:none;\"></ textarea>" ;
echo "<br><input type=\"button\" id=\"edit".$row[$idcolname ]."\" name=\"edit".$row[$idcolna me]."\" onclick=\"editarticle('edi t".$row[$i dcolname]. "','doneed iting".$ro w[$idcolna me]."','de letearticl e".$row[$i dcolname]. "','articl etextbox". $row[$idco lname]."', 'contentdi v".$row[$i dcolname]. "');\" value=\"Edit Article\">";
echo "<input type=\"button\" onclick=\"doneediting('edi t".$row[$i dcolname]. "','doneed iting".$ro w[$idcolna me]."','de letearticl e".$row[$i dcolname]. "','articl etextbox". $row[$idco lname]."', 'contentdi v".$row[$i dcolname]. "','".$row [$idcolnam e]."');\" id=\"doneediting".$row[$id colname]." \" value=\"Done Editing\" name=\"doneediting".$row[$ idcolname] ."\" style=\"display:none;\">";
echo "<input type=\"button\" onclick=\"deletearticle('e dit".$row[ $idcolname ]."','done editing".$ row[$idcol name]."',' deletearti cle".$row[ $idcolname ]."','arti cletextbox ".$row[$id colname]." ','content div".$row[ $idcolname ]."','".$r ow[$idcoln ame]."');\ " id=\"deletearticle".$row[$ idcolname] ."\" value=\"Delete Article\" name=\"deletearticle".$row [$idcolnam e]."\" 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['arti cleid']);
mysql_query("DELETE FROM ".$tablename." WHERE ".$idcolname."='$articleid '")
or die(mysql_error());
echo "<b>article deleted</b>";
?>
}
should work now
index.php {
<script type="text/javascript" language="javascript">
var rowShow=(document.all?'blo
function editarticle(editbutton, doneeditingbutton,deletear
document.getElementById(ed
document.getElementById(do
document.getElementById(de
document.getElementById(th
document.getElementById(th
document.getElementById(th
document.getElementById(th
}
function doneediting(editbutton, doneeditingbutton,deletear
var xmlhttp = false;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType('
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.X
}
xmlhttp.open('GET', 'editarticle.php?articleid
xmlhttp.onreadystatechange
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(th
document.getElementById(th
document.getElementById(th
document.getElementById(do
document.getElementById(de
document.getElementById(ed
document.getElementById(th
}
};
xmlhttp.send(null);
}
function deletearticle(editbutton, doneeditingbutton,deletear
x = confirm("Are you sure you want to delete this article?");
if(x) {
document.getElementById(ed
document.getElementById(th
document.getElementById(do
document.getElementById(de
document.getElementById(th
document.getElementById(th
document.getElementById(th
var xmlhttp = false;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType('
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.X
}
xmlhttp.open('GET', 'deletearticle.php?article
xmlhttp.onreadystatechange
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",
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[$idc
echo $row[$datacolname];
echo '</div>';
echo "<textarea id=\"articletextbox".$row[
echo "<br><input type=\"button\" id=\"edit".$row[$idcolname
echo "<input type=\"button\" onclick=\"doneediting('edi
echo "<input type=\"button\" onclick=\"deletearticle('e
}
?>
}
deletearticle.php {
<?
// $username AND $password AND $db AND $tablename AND $datacolname AND $idcolname NEED TO BE SET
mysql_connect("localhost",
mysql_select_db($db) or die(mysql_error());
$articleid = mysql_real_escape_string($
mysql_query("DELETE FROM ".$tablename." WHERE ".$idcolname."='$articleid
or die(mysql_error());
echo "<b>article deleted</b>";
?>
}
should work now
ASKER
Yeah !!! I can delete it. But i still can't Update it !!
ASKER
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"?
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"?
ASKER
- 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.
- 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
What about the <div> <textarea>?
I thought of that sorta idea if thats what you mean
ASKER
Please test your code and sent it againt. U helped so much. Thanks u and happy new year !