Inline editing

**benslayton** · 07-28-2006, 05: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/

**Jack** · 07-28-2006, 06:26 AM

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, 06: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, 02:20 AM

hey guys really need help in this. Would appreciate very much.

**benslayton** · 08-02-2006, 03:21 AM

I guess no one know do u.

**benslayton** · 08-02-2006, 04:17 AM

ok I figured out how to save stuff but I can t figure out where to put

Code:

action="change.php"

Here is the code:

PHP 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, 04:46 AM

Ok I got it to work. wow noone has not even helped me on this yet. Sweet.
Well here is the code:

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, 04:54 AM

never mind fix that tooo. sweeeeet.

**jr_yeo** · 08-02-2006, 04:58 AM

Originally Posted by benslayton

never mind fix that tooo. sweeeeet.

Mind showing the script of what you ended up doing?

**benslayton** · 08-02-2006, 05: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

Code:

<?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

Code:

<!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

Code:

<?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.

Thread: Inline editing

Thread Tools

Search Thread

Inline editing

Bookmarks

Bookmarks

Posting Permissions