View Full Version : Inline editing
benslayton
07-28-2006, 04:55 AM
Ok i just found this demo. But How do I fix it to where I can save it?
http://www.koculu.net/azer/code/js/inline_editing/
Well, you may want to send them an e-mail. I clicked on the "Coding" link and the only thing I found was a place to place a message. Donno why their going about it this way but hey, it's a strange world.
Pretty cool script though! ;)
benslayton
07-28-2006, 05:34 AM
yea i have emailed the dude. But the source code is the code. that is how you obtian it. But I need it to actually save, because i can think of no reason to have that script unless you can save it.
benslayton
08-02-2006, 01:20 AM
hey guys really need help in this. Would appreciate very much.
benslayton
08-02-2006, 02:21 AM
I guess no one know do u.
benslayton
08-02-2006, 03:17 AM
ok I figured out how to save stuff but I can t figure out where to put
action="change.php"
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Inline Editing</title>
</head>
<style>
body,html { padding:0; margin:0; }
div { margin:0 auto 40px; }
h1,h4 { text-align:center; margin:3px; }
textarea { background:#ffffcc; padding:3px; }
div,textarea { width:300px; height:130px; text-align:justify; font:11px Arial, Helvetica, sans-serif; }
</style>
<body>
<h1>Click and Edit</h1>
<h4>This is a demo, you can not save.</h4><br>
<div edit="1">
<?php
if ($file = @file_get_contents("comments.phpdata")) {
echo $file."\n";
}
else {echo "Sorry, But your page is blank";}
?></div>
<div style=""><p>Coding:<br><a href="http://www.koculu.net">(c)2006 Azer Koçulu</a><br><font color=#aaa>22.06.2006</font></p></div>
<script>
var txt = document.createElement("textarea");
var sbmt = document.createElement("input");
var cls = document.createElement("input");
var dhhhz = 0;
var dzzzh;
var dzhzh;
var dhzhz;
var i = document.all
if(i)
{
document.attachEvent("onclick",edit);
} else
{
document.addEventListener("click",edit,false);
}
function edit(e)
{
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3)
targ = targ.parentNode;
if(dhhhz==0 && targ.getAttribute("edit")=="1")
{
dzzzh = targ.innerHTML;
dzhzh = targ;
targ.innerHTML = "<textarea edit=\"1\">" + dzzzh + "</textarea><input type=\"submit\" value=\"Save\"><input type=\"submit\" value=\"Close\">"
dhhhz = 1;
}
else if(dhhhz==1 && targ.getAttribute("edit")!="1")
{
dzhzh.innerHTML = dzzzh;
dhhhz = 0;
}
}
</script>
</body>
</html>
benslayton
08-02-2006, 03:46 AM
Ok I got it to work. wow noone has not even helped me on this yet. Sweet.
Well here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Inline Editing</title>
</head>
<style>
body,html { padding:0; margin:0; }
div { margin:0 auto 40px; }
h1,h4 { text-align:center; margin:3px; }
textarea { background:#ffffcc; padding:3px; }
div,textarea { width:300px; height:130px; text-align:justify; font:11px Arial, Helvetica, sans-serif; }
</style>
<body>
<h1>Click and Edit</h1>
<h4>This is a demo, you can not save.</h4><br>
<div edit="1">
<?php
if ($file = @file_get_contents("comments.phpdata")) {
echo $file."\n";
}
else {echo "Sorry, But your page is blank";}
?></div>
<div style=""><p>Coding:<br><a href="http://www.koculu.net">(c)2006 Azer Koçulu</a><br><font color=#aaa>22.06.2006</font></p></div>
<script>
var txt = document.createElement("textarea");
var sbmt = document.createElement("input");
var cls = document.createElement("input");
var dhhhz = 0;
var dzzzh;
var dzhzh;
var dhzhz;
var i = document.all
if(i)
{
document.attachEvent("onclick",edit);
} else
{
document.addEventListener("click",edit,false);
}
function edit(e)
{
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3)
targ = targ.parentNode;
if(dhhhz==0 && targ.getAttribute("edit")=="1")
{
dzzzh = targ.innerHTML;
dzhzh = targ;
targ.innerHTML = "<form name=\"form1\" method=\"post\" action=\"change.php\"><textarea name=\"comment\"edit=\"1\">" + dzzzh + "</textarea><input type=\"submit\" value=\"Save\"><input type=\"submit\" value=\"Close\"></form>"
dhhhz = 1;
}
else if(dhhhz==1 && targ.getAttribute("edit")!="1")
{
dzhzh.innerHTML = dzzzh;
dhhhz = 0;
}
}
</script>
</body>
</html>
The only problem is that the close button dont work.
benslayton
08-02-2006, 03:54 AM
never mind fix that tooo. sweeeeet.
jr_yeo
08-02-2006, 03:58 AM
never mind fix that tooo. sweeeeet.
Mind showing the script of what you ended up doing? :p
benslayton
08-02-2006, 04:53 AM
I don't mind, and I actually password protected the files using the security.php.inc. The only problem I have is that the edit feature doesn't work in I.E. But I hope to get it working. I fyou figure it out before I do then great please let me know.
page 1: inline-edit.php
<?php require("security.inc.php"); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Inline Editing</title>
</head>
<style>
body,html { padding:0; margin:0; }
div { margin:0 auto 40px; }
h1,h4 { text-align:center; margin:3px; }
textarea { background:#ffffcc; padding:3px; }
div,textarea { width:300px; height:130px; text-align:justify; font:11px Arial, Helvetica, sans-serif; }
</style>
<body>
<h1>Click and Edit</h1>
<h4>This is a demo.</h4><br>
<div edit="1">
<?php
if ($file = @file_get_contents("comments.phpdata")) {
echo $file."\n";
}
else {echo "Sorry, But your page is blank";}
?></div>
<script>
var txt = document.createElement("textarea");
var sbmt = document.createElement("input");
var cls = document.createElement("input");
var dhhhz = 0;
var dzzzh;
var dzhzh;
var dhzhz;
var i = document.all
if(i)
{
document.attachEvent("onclick",edit);
} else
{
document.addEventListener("click",edit,false);
}
function edit(e)
{
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3)
targ = targ.parentNode;
if(dhhhz==0 && targ.getAttribute("edit")=="1")
{
dzzzh = targ.innerHTML;
dzhzh = targ;
targ.innerHTML = "<form name=\"form1\" method=\"post\" action=\"change.php\"><textarea name=\"comment\"edit=\"1\">" + dzzzh + "</textarea><input type=\"submit\" value=\"Save\"><input type=\"button\" value=\"cancel\"></form>"
dhhhz = 1;
}
else if(dhhhz==1 && targ.getAttribute("edit")!="1")
{
dzhzh.innerHTML = dzzzh;
dhhhz = 0;
}
}
</script>
</body>
</html>
page 2: change.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?php
$filename = "comments.phpdata";
if ($comment = stripslashes($_POST['comment'])) {
$file = @fopen($filename, "w+");
@fwrite($file, $comment);
@fclose($file);
$message = "Your comment was successfully added.<br>Redirecting to inline-edit.php";
}
else {
$message = "You either entered no data or it was entered incorrectly.<br>Redirecting to inline-edit.php";
}
?>
<html>
<head>
<title>Comment Added Demo</title>
<meta http-equiv="refresh" content="3;url=inline-edit.php">
</head>
<body>
<div align="center">
<p><font size="+1">Comment Added Demo:</font></p>
<?php echo $message; ?>
</div>
</body>
</html>
page 3: security.php.inc
<?php session_start();
$password = "Your Password Goes Here";
function showLoginForm($badpw = false) {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Login Form</title>
<style type="text/css">
<!--
.style1 {color: #FF0000}
body,td,th {
font-family: tahoma;
font-size: 11px;
color: #FFFFFF;
}
body {
background-color: #003300;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<form action="<?php echo($PHP_SELF); ?>" method="post">
<p align="center">
<?php if($badpw) { ?>
<span class="style1"><strong>ERROR:</strong><br>
The password you entered was incorrect.<br>Please try again. Make sure that all characters are capitalized properly.</span> <?php } ?>
</p>
<p align="center">Password:
<input type="password" name="pass">
</p>
<p align="center">
<input type="submit" value="Log In">
</p>
</form>
</body>
</html>
<?php
return "";
}
if(!isset($_SESSION['pwhash']) && !isset($_POST['pass']))
die(showLoginForm());
else if(isset($_POST['pass']))
if($_POST['pass'] == $password) $_SESSION['pwhash'] = md5($password);
else die(showLoginForm(true));
else if(isset($_SESSION['pwhash']))
if($_SESSION['pwhash'] != md5($password)) die(showLoginForm(true));
?>
When you add these files to your server and edit the textarea it will create a file called comments.phpdata and the when using the password caps lock count. If you happen to not want the password the simply delete the file security.php.inc and take out <?php require("security.inc.php"); ?> of the change.php file. And that should do it. I have only tested in Opera and IE. Works in opera but not IE.
jr_yeo
08-02-2006, 05:38 AM
do i have to create a file named "comments.phpdata"? the textarea keeps showing "Sorry, But your page is blank". :cool:
<edit>
if comments.phpdata contains "hello world", why can't i change it "hello DD forums" and save it again? is this an error on my config? :cool:
benslayton
08-02-2006, 01:56 PM
no you shouldn't. But I also just tested it in FireFox and it doesnt work. So I will have to see about getting it to work in IE and FF. Right now it only works in opera, Out of the 3 browsers I have tested.
EDIT: You know I am starting to think if this script would work better if Instead of it turning into a textbox right away, It was a popup and then turned into a textbox. Hmmmmm
And there are also some little things happening like when yoo click enter it drops down but when you click save it doesnt add a <br> or anything.
benslayton
08-02-2006, 05:26 PM
ok Here is what the script does. You click on the text you want to edit, and a popup with a textbox comes up. You can edit the text through the textbox and click save or cancel. and this script also refreshes the page every 20 secs. I didnt passwordword protect these because I assume you already know how to do that. And I have tested this in Opera, IE, and FF, and they seem to work correctly.
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Inline edit 2</title>
<style type="text/css">
<!--
body,td,th {
font-family: tahoma;
font-size: 11px;
}
-->
</style></head>
<body>
<script language="JavaScript">
//Refresh page script- By Brett Taylor (glutnix@yahoo.com.au)
//Modified by Dynamic Drive for NS4, NS6+
//Visit http://www.dynamicdrive.com for this script
//configure refresh interval (in seconds)
var countDownInterval=20;
//configure width of displayed text, in px (applicable only in NS4)
var c_reloadwidth=200
</script>
<ilayer id="c_reload" width=&{c_reloadwidth}; ><layer id="c_reload2" width=&{c_reloadwidth}; left=0 top=0></layer></ilayer>
<script>
var countDownTime=countDownInterval+1;
function countDown(){
countDownTime--;
if (countDownTime <=0){
countDownTime=countDownInterval;
clearTimeout(counter)
window.location.reload()
return
}
if (document.all) //if IE 4+
document.all.countDownText.innerText = countDownTime+" ";
else if (document.getElementById) //else if NS6+
document.getElementById("countDownText").innerHTML=countDownTime+" "
else if (document.layers){ //CHANGE TEXT BELOW TO YOUR OWN
document.c_reload.document.c_reload2.document.write('Next <a href="javascript:window.location.reload()">refresh</a> in <b id="countDownText">'+countDownTime+' </b> seconds')
document.c_reload.document.c_reload2.document.close()
}
counter=setTimeout("countDown()", 1000);
}
function startit(){
if (document.all||document.getElementById) //CHANGE TEXT BELOW TO YOUR OWN
document.write('Next <a href="javascript:window.location.reload()">refresh</a> in <b id="countDownText">'+countDownTime+' </b> seconds')
countDown()
}
if (document.all||document.getElementById)
startit()
else
window.onload=startit
</script>
<br>
<center>
<p onClick="hint_wnd = window.open(
'', 'hint_wnd', 'width=360, height=250, resizable=no, scrollbars=no' )
hint_wnd.document.write( 'Please click <a href=help.htm target=_blank>help</a> for help.' )
hint_wnd.document.write( '<form name=form1 method=post action=change.php>' )
hint_wnd.document.write( '<textarea name=comment cols=40 rows=10></textarea>' )
hint_wnd.document.write( '<center><input type=submit name=Submit value=Save>' )
hint_wnd.document.write( '<input type=button value=Close Window onClick=window.close()></center>' )
hint_wnd.document.write( '</form>' )">
<?php
if ($file = @file_get_contents("comments.phpdata")) {
echo $file."\n";
}
else {echo "Sorry, But your page is blank";}
?></p>
</center>
</body>
</html>
change.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?php
$filename = "comments.phpdata";
if ($comment = stripslashes($_POST['comment'])) {
$file = @fopen($filename, "w+");
@fwrite($file, $comment);
@fclose($file);
$message = "Your content was successfully added.";
}
else {
$message = "You either entered no data or it was entered incorrectly.";
}
?>
<html>
<head>
</head>
<body>
<div align="center">
<p><font size="+1"></font></p>
<?php echo $message; ?>
<br><br><br><br><center><input type="button" value="Close Window" onClick="window.close()"></center>
</div>
</body>
</html>
One last thing is that in order to make a new line you have to use the <br> tag you can't just hit enter. And ther's a link to a help page. You design that yourself.
<edit>
The refresh doesnt work in I.E.
<edit 2> Yes the refresh does work in IE, Sorry>
jr_yeo
08-02-2006, 05:38 PM
tnx :p
denimdonnie
08-11-2006, 04:48 PM
Fantastic script!!!!
Just a question..... is it possible to get buttons like a forum, to help with editing for those who aren't familiar with php/html... if you can give me some information on adding like 1 or 2 buttons, I'm pretty sure i could get the rest up..
Also another request.... when editing.... can you use the definition more, "inline".... referring to... keeping the text in the box when you begin to edit... so that its all not lost.
Thanks
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.