PDA

View Full Version : Edit in Place Example

davidc2
07-17-2009, 09:33 PM
Was trying to get this one to work but it seems to be broken and since some people can't get it to work - me included
http://www.ajaxdaddy.com/flickr-like-edit-in-place.html

I decided to rewrite it... so I made some modifications in order to make it work... So here you go:
test.php

<html>
<head>

<style type="text/css">

</style>

<title>Flick-Like Editing Test</title>

<style>
body {
color: white;background: #52616F;
}
a { color: white; }
body {
color: black;
}
input.editMode {
background-color : #FFFF99;
}
textarea.editMode {
background-color : #FFFF99;
}
.savingAjaxWithBackground {
background-color : #FFFF99;
}
.superBigSize {
font-size: 45px;
font-weight: bold;
}
td.underlinedTD {
border-bottom:1px #000000 dashed;
}
table.infoBox {
background-color:#F6F6F6;
border:#999999 double 1px;
font-size:11px;
padding:2px;
}
</style>

<script type="text/javascript">

function sndReq(action) {
var xmlhttp;

if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4) {
document.getElementById("name_rg_display_section").innerHTML=xmlhttp.responseText;
document.getElementById("person_name").value=xmlhttp.responseText;
document.getElementById('name_rg').style.display = 'block';
}
}

xmlhttp.open("GET",action,true);
xmlhttp.send(null);
}

function flashRow(obj) {
obj.bgColor = "#FFFF99";
}
function unFlashRow(obj) {
obj.bgColor = "#F6F6F6";
}
</script>
</head>
<body>


<?php
$editingMyOwn = 1; //Verification code should go here. Set variable to whether user is editing a page they are allowed to.
$firstName = "John";
$lastName = "Doe";
?>


<table cellpadding="2" cellspacing="2" class="infoBox" width="100%">
<tr id="name_rg">
<td onMouseOver="flashRow(this);" onMouseOut="unFlashRow(this);" onClick="
document.getElementById('name_hv_editing_section').style.display = '';
document.getElementById('name_rg').style.display = 'none';
document.getElementById('name_hv').style.display = '';
">
<div class="superBigSize" id="name_rg_display_section">
<?php echo $firstName . " " . $lastName; ?>
</div>
</td>
</tr>
<tr id="name_hv">
<td>
<div id="name_hv_editing_section" style="display:none">
<input type="text" id="person_name" class="superBigSize editMode"
size="<?php $val=strlen($firstName)+strlen($lastName); echo $val;?>"
value="<?php echo $firstName . " " . $lastName;?>"
/>
<br />

<input type="button" value="Guardar" onClick="
document.getElementById('name_hv_editing_section').style.display='none';
var req = 'updateProfileAjax.php?part=name&val=' + document.getElementById('person_name').value;
sndReq(req);"
/>

<input type="button" value="Cancelar" onClick="
document.getElementById('name_rg').style.display = '';
document.getElementById('name_hv').style.display = 'none';
"/>
</div>
</td>
</tr>
</table>
</body>

updateProfileAjax.php

<?php

$part = $_GET["part"];
$new_value = $_GET["val"];

echo $new_value;

?>


Change the stuff on updateProfileAjax to fit your needs, save to database, etc..

Hope this helps.
davidc2
07-17-2009, 10:24 PM
You may want to add something like this to the Cancel javascript also:

document.getElementById('person_name').value=document.getElementById('name_rg_display_section').inne rHTML;