Double Click div เพื่อแก้ไขข้อมูลและอัพเดท

15 ต.ค. 2016 , 3,591 Views , หมวดหมู่ jQuery,JavaScript,Ajax PHP ทุกหมวดหมู่ โค๊ดดิ้ง ,

home.php

<?php
	$query = " SELECT home_usernote FROM app_users 
						WHERE userid=".$_SESSION['authenticated_user_id'];
	$res_note =  $mysqli->query($query);	
	$row_note = $res_note->fetch_array()
?>
	<div class="page-header div-move">
	  <h3><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>  Note<small> note everything</small></h3>
	</div>
	<img src="dist/img/vtbusy.gif" id="loading_img" style="vertical-align:middle; margin-left:5px; display:none;" />
	<div id="usernote"><?php if($row_note['home_usernote']){ echo nl2br(htmlspecialchars($row_note['home_usernote'])); }else{ echo '-DoubleClick for add Note.-'; } ?></div>


<script type="text/javascript">
function divClicked() {
    var divHtml = $(this).html();
    var regex = /<br\s*[\/]?>/gi;
    divHtml = divHtml.replace(regex, "");
    var editableText = $("<textarea class='form-control' rows='7' />");
    editableText.val(divHtml);
    $(this).replaceWith(editableText);
    editableText.focus();
    // setup the blur event for this new textarea
    editableText.blur(editableTextBlurred);
}

function editableTextBlurred() {
	$("#loading_img").show();
    var html = $(this).val();
    var viewableText = $("<div id='usernote'>");
    //viewableText.html(html);
    $(this).replaceWith(viewableText);
    // setup the click event for this new div
		$.post("blank.php?module=index&action=setUserNote",
		{
		  note:html
		},
		function(data,status){
			//alert("Data: " + data + "\nStatus: " + status);
			$("#loading_img").hide();
			$("#usernote").html(data);
		});

    viewableText.dblclick(divClicked);
}

$(document).ready(function() {
    $("#usernote").dblclick(divClicked);
});
//
</script>

<?php

$query = " SELECT home_usernote FROM app_users

WHERE userid=".$_SESSION['authenticated_user_id'];

$res_note = $mysqli->query($query);

$row_note = $res_note->fetch_array()

<h3><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Note<small> note everything</small></h3>

</div>

function divClicked() {

var divHtml = $(this).html();

var regex = /<br\s*[\/]?>/gi;

divHtml = divHtml.replace(regex, "");

var editableText = $("<textarea class='form-control' rows='7' />");

editableText.val(divHtml);

$(this).replaceWith(editableText);

editableText.focus();

// setup the blur event for this new textarea

editableText.blur(editableTextBlurred);

}

function editableTextBlurred() {

$("#loading_img").show();

var html = $(this).val();

var viewableText = $("<div id='usernote'>");

//viewableText.html(html);

$(this).replaceWith(viewableText);

// setup the click event for this new div

$.post("blank.php?module=index&action=setUserNote",

{

note:html

function(data,status){

//alert("Data: " + data + "\nStatus: " + status);

$("#loading_img").hide();

$("#usernote").html(data);

});

viewableText.dblclick(divClicked);

}

$(document).ready(function() {

$("#usernote").dblclick(divClicked);

});

</script>

setUserNote.php

<?php
if(isset($_POST['note'])){
	$query = " UPDATE app_users SET home_usernote='".$mysqli->real_escape_string(input_post('note'))."'
						WHERE  userid=".$_SESSION['authenticated_user_id'];
	$res_update =  $mysqli->query($query);	
	if($_POST['note']){ echo nl2br(htmlspecialchars($_POST['note'])); }else{ echo '-DoubleClick for add Note.-'; }
}
?>

<?php

if(isset($_POST['note'])){

$query = " UPDATE app_users SET home_usernote='".$mysqli->real_escape_string(input_post('note'))."'

WHERE userid=".$_SESSION['authenticated_user_id'];

$res_update = $mysqli->query($query);

if($_POST['note']){ echo nl2br(htmlspecialchars($_POST['note'])); }else{ echo '-DoubleClick for add Note.-'; }

}

ดูเพิ่มเติม http://stackoverflow.com/questions/18565816/how-do-i-replace-div-with-textarea-when-i-click-button-including-content

Double Click div เพื่อแก้ไขข้อมูลและอัพเดท

หมวดหมู่

ติดต่อเรา

ติดตามเรา

Double Click div เพื่อแก้ไขข้อมูลและอัพเดท

หมวดหมู่

Popular Posts

ป้ายกำกับ

ติดต่อเรา

ติดตามเรา