Skip to content

@peponi /frontend_editing
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
frontend_editing
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<style>
.edit{width: 100px;margin-left:20px;}
input
{
border: 1px solid black;
padding: 3px;
}
input:focus
{
box-shadow: 0px;
}
</style>
</head>
<body>
<div class="edit" ><p name="val1">klick mich</p></div><br>
<div class="edit" ><p name="val2">alter</p></div></br>
<div class="edit" ><p name="val3">emailemailemailemailemailemailemailemailemailemailemailemaemailemailemailemailemailemailemailemailemailemailemailema</p></div><br>
</body>
</html>
<script>
$(".edit").on("click",function()
{
var text = $(this).text();
var name = $(this).find("p").attr("name");
if($(this)[0]["nodeName"] != "INPUT" && !$(this).hasClass("onedit"))
{
var fieldType = $(this)[0]["lastChild"]["localName"];
$(this).find("p").hide();
if($(this).children().length <=1 && text.length > 100)
{
$(this).append('<textarea rows="4" cols="50" name="'+name+'">'+text+'</textarea>');
}
else if( $(this).children().length <=1 )
{
$(this).append('<input type="text" value="'+text+'" name="'+name+'">');
}
else
{
if(fieldType == "textarea")
{
$(this).find(fieldType).show().text(text);
}
else
{
$(this).find(fieldType).show().val(text);
}
}
$(this).find(fieldType).focus();
}
$(this).addClass("onedit");
})
$(".edit").on("focusout",function()
{
var fieldType = $(this)[0]["lastChild"]["localName"];
var text = $(this).find(fieldType).val();
var name = $(this).find(fieldType).attr("name");
$.post("/URB_BASE/"+text, { value: text, name: name }, null, null);
$(this).find(fieldType).hide();
$(this).find("p").show().text(text);
$(this).removeClass("onedit");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.