snowysweb
01-07-2009, 05:50 AM
THIS PAGE HERE (http://81.106.168.84/instantedit/)
Morning, going to chop my head off if i dont get my head around this soon.
Found this lil script on the net the other day it was called quick edit, there was no need to refresh page or press a submit button for it to upload. Could Anyone tell me why itt isnt working.
#index.php
<?php
include("database_connect.php");
?>
<html>
<head>
<title>Flick-Like Editing Test</title>
<style>
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 createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function sndReq(action) {
http.open('get', action);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
if(http.responseText=="name") {
var replaceText = document.getElementById('person_name').value;
document.getElementById('name_rg_display_section').innerHTML = replaceText;
document.getElementById('name_rg').style.display = '';
document.getElementById('name_hv').style.display = 'none';
}
else if(http.responseText=="email") {
var replaceText = document.getElementById('email_value').value;
document.getElementById('email_rg_display_section').innerHTML = "<b>Email:</b> " + replaceText;
document.getElementById('email_rg').style.display = '';
document.getElementById('email_hv').style.display = 'none';
}
else if(http.responseText=="phone") {
var replaceText = document.getElementById('phone_value').value;
document.getElementById('phone_rg_display_section').innerHTML = "<b>Phone:</b> " + replaceText;
document.getElementById('phone_rg').style.display = '';
document.getElementById('phone_hv').style.display = 'none';
}
}
}
function flashRow(obj) {
obj.bgColor = "#FFFF99";
}
function unFlashRow(obj) {
obj.bgColor = "#F6F6F6";
}
</script>
</head>
<body>
<table cellpadding="3" cellspacing="2" class="infoBox">
<tr><td align="right" class="underlinedTD"><b>Contact</b></td></tr>
<tr><td></td></tr>
<?php
if($editingMyOwn ==1) { ?>
<tr id="name_rg">
<td onMouseOver="flashRow(this);" onMouseOut="unFlashRow(this);" onClick="
document.getElementById('name_hv_editing_section').style.display = '';
document.getElementById('name_hv_saving_section').style.display = 'none';
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">
<input type="text" class="superBigSize editMode" size="<?php $val=strlen($firstName)+strlen($lastName); echo $val; ?>" value="<?php echo $firstName . " " . $lastName; ?>" id="person_name" /> <br /><input type="button" value="Save" onClick="document.getElementById('name_hv_editing_section').style.display='none';document.getElementById('nam e_hv_saving_section').style.display='';var req = 'updateProfileAjax.php?part=name&val=' + document.getElementById('person_name').value;sndReq(req);" /> Or <input type="button" value="Cancel" onClick="
document.getElementById('name_rg').style.display = '';
document.getElementById('name_hv').style.display = 'none';
"/>
</div>
<span id="name_hv_saving_section" class="savingAjaxWithBackground">
Saving...
</span>
<script type="text/javascript">
document.getElementById('name_hv').style.display = 'none';
document.getElementById('name_hv_saving_section').style.display = 'none';
</script>
</td></tr>
<?php }
else { ?>
<tr>
<td>
<div class="superBigSize"><?php echo $firstName . " " . $lastName; ?></div>
</td></tr>
<?php } ?>
<!--<tr><td align="right" class="underlinedTD">Email</td></tr>-->
<?php
if($editingMyOwn ==1) { ?>
<tr id="email_rg">
<td onMouseOver="flashRow(this);" onMouseOut="unFlashRow(this);" onClick="
document.getElementById('email_hv_editing_section').style.display = '';
document.getElementById('email_hv_saving_section').style.display = 'none';
document.getElementById('email_rg').style.display = 'none';
document.getElementById('email_hv').style.display = '';
">
<div class="" id="email_rg_display_section"><b>Email:</b> <?php echo $email; ?></div>
</td></tr>
<tr id="email_hv"><td>
<div id="email_hv_editing_section"><b>Email:</b>
<input type="text" class=" editMode" size="<?php $val=strlen($email); echo $val; ?>" value="<?php echo $email; ?>" id="email_value" /> <br /><input type="button" value="Save" onClick="document.getElementById('email_hv_editing_section').style.display='none';document.getElementById('em ail_hv_saving_section').style.display='';var req = 'updateProfileAjax.php?part=email&val=' + document.getElementById('email_value').value;sndReq(req);" /> Or <input type="button" value="Cancel" onClick="document.getElementById('email_rg').style.display = '';
document.getElementById('email_hv').style.display = 'none';"/>
</div>
<span id="email_hv_saving_section" class="savingAjaxWithBackground">
Saving...
</span>
<script type="text/javascript">
document.getElementById('email_hv').style.display = 'none';
document.getElementById('email_hv_saving_section').style.display = 'none';
</script>
</td></tr>
<?php }
else { ?>
<tr>
<td>
<div class=""><b>Email:</b> <?php echo $email; ?></div>
</td>
</tr>
<?php } ?>
<?php
if($editingMyOwn ==1) { ?>
<tr id="phone_rg">
<td onMouseOver="flashRow(this);" onMouseOut="unFlashRow(this);" onClick="
document.getElementById('phone_hv_editing_section').style.display = '';
document.getElementById('phone_hv_saving_section').style.display = 'none';
document.getElementById('phone_rg').style.display = 'none';
document.getElementById('phone_hv').style.display = '';
">
<div id="phone_rg_display_section"><b>Phone:</b> <?php echo $phone; ?></div>
</td></tr>
<tr id="phone_hv"><td>
<div id="phone_hv_editing_section"><b>Phone:</b>
<input type="text" class=" editMode" size="<?php $val=strlen($phone); echo $val; ?>" value="<?php echo $phone; ?>" id="phone_value" /> <br /><input type="button" value="Save" onClick="document.getElementById('phone_hv_editing_section').style.display='none';document.getElementById('ph one_hv_saving_section').style.display='';var req = 'updateProfileAjax.php?part=phone&val=' + document.getElementById('phone_value').value;sndReq(req);" /> Or <input type="button" value="Cancel" onClick="document.getElementById('phone_rg').style.display = '';
document.getElementById('phone_hv').style.display = 'none';"/>
</div>
<span id="phone_hv_saving_section" class="savingAjaxWithBackground">
Saving...
</span>
<script type="text/javascript">
document.getElementById('phone_hv').style.display = 'none';
document.getElementById('phone_hv_saving_section').style.display = 'none';
</script>
</td></tr>
<?php }
else { ?>
<tr>
<td>
<div class=""><b>Phone:</b> <?php echo $phone; ?></div>
</td>
</tr>
<?php } ?>
</table>
</body>
#updateProfileAjax.php
<?php
include("database_connect.php");
if($loggedIn == 1) {
$part = mysql_escape_string($_GET['part']);
$val = mysql_escape_string($_GET['val']);
$id = $userId;
if($part == "name") {
$array = split(" ",$val);
$firstName = mysql_escape_string($array[0]);
$lastName = mysql_escape_string($array[1]);
$sql = "UPDATE `$table` SET firstname = '$firstName', lastname = '$lastName' WHERE id=$id";
}
else if($part == "email") {
$sql = "UPDATE `$table` SET email = '$val' WHERE id=$id";
}
else if($part == "desc") {
$sql = "UPDATE `$table` SET description = '$val' WHERE id=$id";
}
else if($part == "phone") {
$sql = "UPDATE `$table` SET phone = '$val' WHERE id=$id";
}
mysql_query($sql);
mysql_close();
echo $part;
echo $_GET['part'];
}
?>
#database_connect.php
<?php
$sql_username = "root";
$sql_password = "";
$sql_server = "localhost"; //useualy localhost
$sql_database = "blogs";
$table = "demo";
$con = mysql_connect ($sql_server, $sql_username, $sql_password);
mysql_select_db($sql_database, $con);
$query = mysql_query("SELECT * from `$table` where id='1'");
$array = mysql_fetch_array($query);
$editingMyOwn = $array["user_level"];
$firstName = $array["firstname"];
$lastName = $array["lastname"];
$email = $array["email"];
$phone = $array["phone"];
?>
Morning, going to chop my head off if i dont get my head around this soon.
Found this lil script on the net the other day it was called quick edit, there was no need to refresh page or press a submit button for it to upload. Could Anyone tell me why itt isnt working.
#index.php
<?php
include("database_connect.php");
?>
<html>
<head>
<title>Flick-Like Editing Test</title>
<style>
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 createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function sndReq(action) {
http.open('get', action);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
if(http.responseText=="name") {
var replaceText = document.getElementById('person_name').value;
document.getElementById('name_rg_display_section').innerHTML = replaceText;
document.getElementById('name_rg').style.display = '';
document.getElementById('name_hv').style.display = 'none';
}
else if(http.responseText=="email") {
var replaceText = document.getElementById('email_value').value;
document.getElementById('email_rg_display_section').innerHTML = "<b>Email:</b> " + replaceText;
document.getElementById('email_rg').style.display = '';
document.getElementById('email_hv').style.display = 'none';
}
else if(http.responseText=="phone") {
var replaceText = document.getElementById('phone_value').value;
document.getElementById('phone_rg_display_section').innerHTML = "<b>Phone:</b> " + replaceText;
document.getElementById('phone_rg').style.display = '';
document.getElementById('phone_hv').style.display = 'none';
}
}
}
function flashRow(obj) {
obj.bgColor = "#FFFF99";
}
function unFlashRow(obj) {
obj.bgColor = "#F6F6F6";
}
</script>
</head>
<body>
<table cellpadding="3" cellspacing="2" class="infoBox">
<tr><td align="right" class="underlinedTD"><b>Contact</b></td></tr>
<tr><td></td></tr>
<?php
if($editingMyOwn ==1) { ?>
<tr id="name_rg">
<td onMouseOver="flashRow(this);" onMouseOut="unFlashRow(this);" onClick="
document.getElementById('name_hv_editing_section').style.display = '';
document.getElementById('name_hv_saving_section').style.display = 'none';
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">
<input type="text" class="superBigSize editMode" size="<?php $val=strlen($firstName)+strlen($lastName); echo $val; ?>" value="<?php echo $firstName . " " . $lastName; ?>" id="person_name" /> <br /><input type="button" value="Save" onClick="document.getElementById('name_hv_editing_section').style.display='none';document.getElementById('nam e_hv_saving_section').style.display='';var req = 'updateProfileAjax.php?part=name&val=' + document.getElementById('person_name').value;sndReq(req);" /> Or <input type="button" value="Cancel" onClick="
document.getElementById('name_rg').style.display = '';
document.getElementById('name_hv').style.display = 'none';
"/>
</div>
<span id="name_hv_saving_section" class="savingAjaxWithBackground">
Saving...
</span>
<script type="text/javascript">
document.getElementById('name_hv').style.display = 'none';
document.getElementById('name_hv_saving_section').style.display = 'none';
</script>
</td></tr>
<?php }
else { ?>
<tr>
<td>
<div class="superBigSize"><?php echo $firstName . " " . $lastName; ?></div>
</td></tr>
<?php } ?>
<!--<tr><td align="right" class="underlinedTD">Email</td></tr>-->
<?php
if($editingMyOwn ==1) { ?>
<tr id="email_rg">
<td onMouseOver="flashRow(this);" onMouseOut="unFlashRow(this);" onClick="
document.getElementById('email_hv_editing_section').style.display = '';
document.getElementById('email_hv_saving_section').style.display = 'none';
document.getElementById('email_rg').style.display = 'none';
document.getElementById('email_hv').style.display = '';
">
<div class="" id="email_rg_display_section"><b>Email:</b> <?php echo $email; ?></div>
</td></tr>
<tr id="email_hv"><td>
<div id="email_hv_editing_section"><b>Email:</b>
<input type="text" class=" editMode" size="<?php $val=strlen($email); echo $val; ?>" value="<?php echo $email; ?>" id="email_value" /> <br /><input type="button" value="Save" onClick="document.getElementById('email_hv_editing_section').style.display='none';document.getElementById('em ail_hv_saving_section').style.display='';var req = 'updateProfileAjax.php?part=email&val=' + document.getElementById('email_value').value;sndReq(req);" /> Or <input type="button" value="Cancel" onClick="document.getElementById('email_rg').style.display = '';
document.getElementById('email_hv').style.display = 'none';"/>
</div>
<span id="email_hv_saving_section" class="savingAjaxWithBackground">
Saving...
</span>
<script type="text/javascript">
document.getElementById('email_hv').style.display = 'none';
document.getElementById('email_hv_saving_section').style.display = 'none';
</script>
</td></tr>
<?php }
else { ?>
<tr>
<td>
<div class=""><b>Email:</b> <?php echo $email; ?></div>
</td>
</tr>
<?php } ?>
<?php
if($editingMyOwn ==1) { ?>
<tr id="phone_rg">
<td onMouseOver="flashRow(this);" onMouseOut="unFlashRow(this);" onClick="
document.getElementById('phone_hv_editing_section').style.display = '';
document.getElementById('phone_hv_saving_section').style.display = 'none';
document.getElementById('phone_rg').style.display = 'none';
document.getElementById('phone_hv').style.display = '';
">
<div id="phone_rg_display_section"><b>Phone:</b> <?php echo $phone; ?></div>
</td></tr>
<tr id="phone_hv"><td>
<div id="phone_hv_editing_section"><b>Phone:</b>
<input type="text" class=" editMode" size="<?php $val=strlen($phone); echo $val; ?>" value="<?php echo $phone; ?>" id="phone_value" /> <br /><input type="button" value="Save" onClick="document.getElementById('phone_hv_editing_section').style.display='none';document.getElementById('ph one_hv_saving_section').style.display='';var req = 'updateProfileAjax.php?part=phone&val=' + document.getElementById('phone_value').value;sndReq(req);" /> Or <input type="button" value="Cancel" onClick="document.getElementById('phone_rg').style.display = '';
document.getElementById('phone_hv').style.display = 'none';"/>
</div>
<span id="phone_hv_saving_section" class="savingAjaxWithBackground">
Saving...
</span>
<script type="text/javascript">
document.getElementById('phone_hv').style.display = 'none';
document.getElementById('phone_hv_saving_section').style.display = 'none';
</script>
</td></tr>
<?php }
else { ?>
<tr>
<td>
<div class=""><b>Phone:</b> <?php echo $phone; ?></div>
</td>
</tr>
<?php } ?>
</table>
</body>
#updateProfileAjax.php
<?php
include("database_connect.php");
if($loggedIn == 1) {
$part = mysql_escape_string($_GET['part']);
$val = mysql_escape_string($_GET['val']);
$id = $userId;
if($part == "name") {
$array = split(" ",$val);
$firstName = mysql_escape_string($array[0]);
$lastName = mysql_escape_string($array[1]);
$sql = "UPDATE `$table` SET firstname = '$firstName', lastname = '$lastName' WHERE id=$id";
}
else if($part == "email") {
$sql = "UPDATE `$table` SET email = '$val' WHERE id=$id";
}
else if($part == "desc") {
$sql = "UPDATE `$table` SET description = '$val' WHERE id=$id";
}
else if($part == "phone") {
$sql = "UPDATE `$table` SET phone = '$val' WHERE id=$id";
}
mysql_query($sql);
mysql_close();
echo $part;
echo $_GET['part'];
}
?>
#database_connect.php
<?php
$sql_username = "root";
$sql_password = "";
$sql_server = "localhost"; //useualy localhost
$sql_database = "blogs";
$table = "demo";
$con = mysql_connect ($sql_server, $sql_username, $sql_password);
mysql_select_db($sql_database, $con);
$query = mysql_query("SELECT * from `$table` where id='1'");
$array = mysql_fetch_array($query);
$editingMyOwn = $array["user_level"];
$firstName = $array["firstname"];
$lastName = $array["lastname"];
$email = $array["email"];
$phone = $array["phone"];
?>