JQUERY Edit In Place With PHP While Loop Only Top Result Editable - Page 2

AndrewGSW · 12-27-2012, 10:07 PM

For example, from your most recent code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    .editable {
        background-color: #FF9;
        cursor: pointer;
    }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    setClickable();
});

function setClickable() {
    $("#editInPlace").click(function () {
        var tarea = "<div><textarea rows='10' cols='60'>" + $(this).html() + "</textarea>";
        var btns = "<div><input type='button' value='save' class='saveButton' /> " +
            "OR <input type='button' value='cancel' class='cancelButton' /></div></div>";
        var revert = $(this).html();
        
        $(this).after(tarea + btns).remove();
        
        $(".saveButton").click(function () {
            saveChanges(this, false);
        });
        $(".cancelButton").click(function () {
            saveChanges(this, revert);
        });
    }).mouseover(function () {
        $(this).addClass("editable");
    }).mouseout(function () {
        $(this).removeClass("editable");
    });
}

function saveChanges(obj, cancel) {
    if(!cancel) {
        var t = $(obj).parent().siblings(0).val();
        $.post("test2.php", {content: t}, function(txt) {
            alert(txt);
        });
    } else {
        var t = cancel;
    }
    $(obj).parent().parent().after('<div id="editInPlace">' + t + '</div>').remove();
    setClickable();
}
</script>
</head>

<body>

<!--<?php
include('db.php');

$query  = "SELECT * FROM videos ORDER By vid DESC";
$result = mysql_query($query);

while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "<div id=\"editInPlace\">" . $row['title'] . "</div>";
}
?>-->
<div class="editInPlace">Some text here</div>
<div class="editInPlace">Some text here 2nd</div>
<div class="editInPlace">Some text here 3rd</div>
</body>
</html>

I've added sample divs at the bottom to make it easier for someone to test.

What is the purpose of remove()? You seem to be inserting an element then removing it..?

AndrewGSW · 12-27-2012, 10:28 PM

The following is a bit closer I suspect:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    .editable {
        background-color: #FF9;
        cursor: pointer;
    }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    setClickable();
});

function setClickable() {
    $(".editInPlace").click(function () {
        var tarea = "<div class='holder'><textarea rows='10' cols='60'>" + $(this).html() + "</textarea>";
        var btns = "<div><input type='button' value='save' class='saveButton' /> " +
            "OR <input type='button' value='cancel' class='cancelButton' /></div></div>";
        var revert = $(this).html();
        
        $(this).replaceWith(tarea + btns);
        
        $(".saveButton").click(function () {
            saveChanges(this, false);
        });
        $(".cancelButton").click(function () {
            saveChanges(this, revert);
        });
    }).mouseover(function () {
        $(this).addClass("editable");
    }).mouseout(function () {
        $(this).removeClass("editable");
    });
}

function saveChanges(obj, cancel) {
    if(!cancel) {
        var t = $(obj).parent().siblings(0).val();
        $.post("test2.php", {content: t}, function(txt) {
            alert(txt);
        });
    } else {
        var t = cancel;
    }
    //$(obj).parent().parent().after('<div id="editInPlace">' + t + '</div>').remove();
    $(obj).closest('.holder').replaceWith('<div id="editInPlace">' + t + '</div>');
    setClickable();
}
</script>
</head>

<body>

<!--<?php
include('db.php');

$query  = "SELECT * FROM videos ORDER By vid DESC";
$result = mysql_query($query);

while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "<div id=\"editInPlace\">" . $row['title'] . "</div>";
}
?>-->
<div class="editInPlace">Some text here</div>
<div class="editInPlace">Some text here 2nd</div>
<div class="editInPlace">Some text here 3rd</div>
</body>
</html>

AndrewGSW · 12-27-2012, 10:32 PM

You need to use live() or, since jQuery 1.7, on() to attach events to elements - existing or newly inserted.

AndrewGSW · 12-27-2012, 10:39 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    .editable {
        background-color: #FF9;
        cursor: pointer;
    }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    setClickable();
});

function setClickable() {
    $(".editInPlace").on("click", function () {
        var tarea = "<div class='holder'><textarea rows='10' cols='60'>" + $(this).html() +
            "</textarea>";
        var btns = "<div><input type='button' value='save' class='saveButton' /> " +
            "OR <input type='button' value='cancel' class='cancelButton' /></div></div>";
        var revert = $(this).html();
        
        $(this).replaceWith(tarea + btns);
        
        $(".saveButton").on("click", function () {
            saveChanges(this, false);
        });
        $(".cancelButton").on("click", function () {
            saveChanges(this, revert);
        });
    }).on("mouseover", function () {
        $(this).addClass("editable");
    }).on("mouseout", function () {
        $(this).removeClass("editable");
    });
}

function saveChanges(obj, cancel) {
    if(!cancel) {
        var t = $(obj).parent().siblings(0).val();
        $.post("test2.php", {content: t}, function(txt) {
            alert(txt);
        });
    } else {
        var t = cancel;
    }
    //$(obj).parent().parent().after('<div id="editInPlace">' + t + '</div>').remove();
    $(obj).closest('.holder').replaceWith('<div class="editInPlace">' + t + '</div>');
    setClickable();
}
</script>
</head>

<body>

<!--<?php
include('db.php');

$query  = "SELECT * FROM videos ORDER By vid DESC";
$result = mysql_query($query);

while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "<div id=\"editInPlace\">" . $row['title'] . "</div>";
}
?>-->
<div class="editInPlace">Some text here</div>
<div class="editInPlace">Some text here 2nd</div>
<div class="editInPlace">Some text here 3rd</div>
</body>
</html>

stevenmw · 12-28-2012, 12:39 AM

Quote:

Originally Posted by AndrewGSW

If you indent your code properly (so that it can be read) and (please!) don't use variable names of textarea and button (show a little imagination!) I or someone else are more likely to assist

.

I intentionally taker out my indents when positing on here to avoid scrolling issues.

As far as variables for textareas. I'm just learning js stuff. I took a free piece of code and started playing with it.

Code:

<div class="editInPlace">Some text here
</div> <div class="editInPlace">Some text here 2nd</div> 
<div class="editInPlace">Some text here 3rd</div>

That would mean you would have to edit each field individually. I want to edit multiple fields simultaneously.

AndrewGSW · 12-28-2012, 12:54 AM

Quote:

I intentionally taker out my indents when positing on here to avoid scrolling issues

Do what?!

Quote:

I want to edit multiple fields simultaneously.

I don't follow. Good luck, Andy.

xelawho · 12-28-2012, 01:29 AM

Quote:

Originally Posted by AndrewGSW

I don't follow.

Why not read the entire thread? You appear to have reproduced the original functionality that stevenmw came here trying to modify

It is prettier, though...

AndrewGSW · 12-28-2012, 02:10 AM

Quote:

Originally Posted by xelawho

Why not read the entire thread? You appear to have reproduced the original functionality that stevenmw came here trying to modify

It is prettier, though...

The original functionality only enabled editing of the first item.

The original post stated "The idea is to make each entry editable" which is why I don't follow "I want to edit multiple fields simultaneously". But you are right; reading more closely I see that he might display several fields for each database row and want to edit any/all of these fields in one go.

xelawho · 12-28-2012, 02:20 AM

once he started using class names it worked the same as yours.

I think he is pulling in various fields per entry (in my example title and number) and wants each of those fields to be editable separately. If you run the code from post #10 in Chrome or FF you'll see what I mean.

xelawho · 12-28-2012, 03:18 AM

... sigh...

it was one superfluous closing div tag that was making IE freak out...

Code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style type="text/css">
.editable {
background-color: #FF9;
cursor: pointer;
}
</style>
</head>
<body>
<div class="editInPlace"><span num="tit1">the title</span>&nbsp<span num="num1">the number</span></div>
<div class="editInPlace"><span num="tit2">the second title</span>&nbsp<span num="num2">the second number</span>&nbsp<span num="num3">the second piece of info</span></div>
<script>
$(document).ready(function()
{
setClickable();
});

function setClickable() {
$(".editInPlace").click(function(){
var textarea = "<div>"
$(this).children('span').each(function () {
    textarea+="<input name='" + $(this).attr("num") + "' value='" + $(this).text()+ "'/>";
});
textarea+="</div>"
var button = "<div><input type='button' value='save' class='saveButton' /> OR <input type='button' value='cancel' class='cancelButton' /></div>";
var revert = $(this).html();
$(this).replaceWith(textarea + button);
$(".saveButton").click(function(){
saveChanges(this, false);
});
$(".cancelButton").click(function(){
saveChanges(this, revert);
});

}).mouseover(function() {
$(this).addClass("editable");
}).mouseout(function() {
$(this).removeClass("editable");
});
}

function saveChanges(obj, cancel) {
if(!cancel) {
var t={};
var s=""
$(obj).parent().prev().find("input").each(function(ind) {
    t[ind]={vl:$(this).val(),
			nm:$(this).attr('name')
	}
});
/*$.post("test2.php", {content: t}, function(txt) {
alert(txt);
}); */
$(obj).parent().prev().html("");
$.each(t, function(index) { 
s+="<span num="+t[index].nm+">"+t[index].vl+"</span>&nbsp";
});
$(obj).parent().prev().append(s)
} else {
$(obj).parent().prev().html(cancel);
}
$(obj).parent().prev().attr("class","editInPlace");
$(obj).parent().remove()
setClickable();
}
</script>
</body>
</html>